把tree结构数据转换easyui的columns

很多时候我们的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),
                    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