很多时候我们的datagrid需要动态的列显示，那么这个时候我们后台一般提供最直观的数据格式tree结构。那么需要我们前端自己根据这个tree结构转换成easyui的datagrid的columns。那么经过跟后台大神（陈汉军）同事一起的研究最后我整理了一个下面的函数来提供转换。
/* *@author:yeminglong *@date:2018/06/22 *@email:ye583025823@126.com *@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的和。 *感谢：陈汉军同学为本函数提供算法参考。本文的算法来自 陈汉军 同学的指导。再次感谢。 */ (function (wd) { var allLevel = [0], maxLevel = 0, columns = []; //获取最大层级 function getMaxLevel(allLevel) { return Math.max.apply(null, allLevel); } //把数据结构转换成自己需要的基本属性 function convert(nodes, parentNode) { var node, i = 0; try { for (; i < nodes.length; i++) { 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; } } } catch (e) { //console.log(); } return nodes; } //获取跨列 function getCospan(node) { var colspan = 0; for (var j = 0; j < node.children.length; j++) { if(node.children[j].cp>1){ colspan +=getCospan(node.children[j]); }else{ 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), 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, 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(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": [] }] } ] } ];
var columns=treeToColumns(gridTitle); $('#div1').datagrid({ fit: true, columns: columns })
如果这篇文章对您有帮助，您可以打赏我,您的打赏让我会更有动力。
技术交流QQ群：15129679