把tree結構資料轉換easyui的columns
阿新 • • 發佈：2018-11-04
很多時候我們的datagrid需要動態的列顯示，那麼這個時候我們後臺一般提供最直觀的資料格式tree結構。那麼需要我們前端自己根據這個tree結構轉換成easyui的datagrid的columns。那麼經過跟後臺大神（陳漢軍）同事一起的研究最後我整理了一個下面的函式來提供轉換。
/* *@author:yeminglong *@date:2018/06/22 *@email:[email protected] *@description:把treeNOde轉換成easyui的datagrid或者treegrid的columns *用法： * var treeNode=[{text:"節點1",value:"myName","children";[{ "text": "ziduan51", "value": "ziduan51", "children": [] }]}]; * var columns= treeToColumns(treeNode); *原理：先把treeNode的level計算出來，然後獲取最大的maxLevel。 *跨行公式=maxLevel-currentNode.level+1; *跨列公式=currentNode的children的childrenNode的children的length的和。 *感謝：陳漢軍同學為本函式提供演算法參考。本文的演算法來自 陳漢軍 同學的指導。再次感謝。View Code*/ (function (wd) { var allLevel = [0], maxLevel = 0, columns = []; //獲取最大層級 function getMaxLevel(allLevel) { return Math.max.apply(null, allLevel); } //把資料結構轉換成自己需要的基本屬性 function convert(nodes, parentNode) { for (var i = 0; i < nodes.length; i++) {var node = nodes[i]; if (!parentNode) { node.level = 0; } else { node.level = parentNode.level + 1; allLevel.push(node.level); } if (node.children.length > 0) { node.cp = node.children.length; convert(node.children, node); }else { node.cp = 1; } } return nodes; } //獲取跨列 function getCospan(node) { var colspan = 0; for (var j = 0; j < node.children.length; j++) { colspan += node.children[j].cp; } return colspan; } //開始轉換 function convert2(nodes, parentNode) { for (var i = 0; i < nodes.length; i++) { var node = nodes[i]; if (!columns[node.level]) { columns[node.level] = []; } if (node.children.length > 0) { columns[node.level].push({ field: node.value, title: node.text, rowspan: 1, colspan: getCospan(node), width: 200, align: 'center' }); convert2(node.children, node); } else { columns[node.level].push({ field: node.value, title: node.text, rowspan: (maxLevel - node.level + 1), colspan: 1, width: 200, align: 'center' }); } } return columns; } //提供給外面的全域性函式 wd.treeToColumns = function (treeNode) { allLevel = [0], maxLevel = 0, columns = []; var node2 = convert(treeNode, null); maxLevel = getMaxLevel(allLevel); console.log(maxLevel); columns = convert2(node2); // console.log(JSON.stringify(columns)); return columns; } })(window);
用法示例：
var gridTitle = [ { "text": "ziduan1", "value": "ziduan1", "children": [ { "text": "ziduan11", "value": "ziduan11", "children": [ { "text": "ziduan51", "value": "ziduan51", "children": [] }, { "text": "ziduan52", "value": "ziduan52", "children": [] }, { "text": "ziduan53", "value": "ziduan53", "children": [] }, { "text": "ziduan54", "value": "ziduan54", "children": [] }, { "text": "ziduan55", "value": "ziduan55", "children": [] } ] }, { "text": "ziduan12", "value": "ziduan12", "children": [] }, { "text": "ziduan13", "value": "ziduan13", "children": [] }, { "text": "ziduan14", "value": "ziduan14", "children": [] }, { "text": "ziduan15", "value": "ziduan15", "children": [] } ] }, { "text": "ziduan2", "value": "ziduan2", "children": [ { "text": "ziduan21", "value": "ziduan21", "children": [] }, { "text": "ziduan22", "value": "ziduan22", "children": [] }, { "text": "ziduan23", "value": "ziduan23", "children": [] }, { "text": "ziduan24", "value": "ziduan24", "children": [] }, { "text": "ziduan25", "value": "ziduan25", "children": [] } ] }, { "text": "ziduan3", "value": "ziduan3", "children": [ { "text": "ziduan31", "value": "ziduan31", "children": [] }, { "text": "ziduan32", "value": "ziduan32", "children": [] }, { "text": "ziduan33", "value": "ziduan33", "children": [] }, { "text": "ziduan34", "value": "ziduan34", "children": [] }, { "text": "ziduan35", "value": "ziduan35", "children": [] } ] }, { "text": "ziduan4", "value": "ziduan4", "children": [ { "text": "ziduan41", "value": "ziduan41", "children": [] }, { "text": "ziduan42", "value": "ziduan42", "children": [] }, { "text": "ziduan43", "value": "ziduan43", "children": [] }, { "text": "ziduan44", "value": "ziduan44", "children": [] }, { "text": "ziduan45", "value": "ziduan45", "children": [] }, ] }, { "text": "ziduan5", "value": "ziduan5", "children": [ { "text": "ziduan46", "value": "ziduan46", "children": [] }, { "text": "ziduan47", "value": "ziduan47", "children": [ { "text": "ziduan56", "value": "ziduan56", "children": [] }, { "text": "ziduan57", "value": "ziduan57", "children": [] }, { "text": "ziduan58", "value": "ziduan58", "children": [] }, { "text": "ziduan59", "value": "ziduan59", "children": [] }, { "text": "ziduan60", "value": "ziduan60", "children": [] } ] }, { "text": "ziduan48", "value": "ziduan48", "children": [] }, { "text": "ziduan49", "value": "ziduan49", "children": [] }, { "text": "ziduan50", "value": "ziduan50", "children": [] } ] }, { "text": "ziduan77", "value": "ziduan77", "children": [ { "text": "ziduan78", "value": "ziduan78", "children": [] } ] }, { "text": "ziduan79", "value": "ziduan79", "children": [ { "text": "ziduan80", "value": "ziduan80", "children": [{ "text": "ziduan81", "value": "ziduan81", "children": [] }] } ] } ];View Code
var columns=treeToColumns(gridTitle); $('#div1').datagrid({ fit: true, columns: columns })
如果這篇文章對您有幫助，您可以打賞我,您的打賞讓我會更有動力。
技術交流QQ群：15129679