很多时候我们的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的和。
*感谢：陈汉军同学为本函数提供算法参考。本文的算法来自 陈汉军 同学的指导。再次感谢。
*/
(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),
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(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