easyui tree 的数据格式转换

easyui tree 的数据格式转换

一般用来储存树数据的数据库表都含有两个整型字段:id pid,所以我们查询出来的List一般是这样的(约定pId为-1的节点为根节点):

var serverList = [
    {id : 2,pid : -1},
    {id : 1,pid : -1},
        {id : 3,pid : 1},
        {id : 4,pid : 1},
        {id : 5,pid : 1},
        {id : 9,pid : 1},
            {id : 10,pid : 9},
            {id : 8,pid : 9},
                {id : 7,pid : 8},
                    {id : 6,pid : 7},
                        {id : 11,pid : 6},
                            {id : 12,pid : 11},
                                {id : 16,pid : 12},
                                    {id : 17,pid : 16},
                                        {id : 18,pid : 17},
                                        {id : 19,pid : 17},
                                        {id : 20,pid : 17},
                                        {id : 21,pid : 17},
                                            {id : 22,pid : 21},
                                        {id : 23,pid : 17},
                                        {id : 24,pid : 17},
                                        {id : 25,pid : 17},
                                        {id : 26,pid : 17},
                                            {id : 27,pid : 26},
                                                {id : 28,pid : 27},
                                                {id : 29,pid : 27},
                                                    {id : 30,pid : 29},
                                                    {id : 31,pid : 29},
    {id : 13,pid : -1},
        {id : 14,pid : 13},
            {id : 15,pid : 14}
];

我通过缩进来显示它们的父子关系。

然而，easyui tree所需求数据的格式是这样的：

var treeList = [
    {id : 2},
    {id : 1,children : [
        {id : 3},
        {id : 4},
        {id : 5},
        {id : 9,children : [
            {id : 10},
            {id : 8,children : [
                {id : 7,children : [
                    id : 6
                ]}
            ]},
　　　　　　　......
        ]}
    ]}
];

如果采用分层加载，则只需通过简单的转换操作就能将后台查询出来的一层数据list转换成easyui tree的数据格式，

但是如果遇到一次全部加载的需求，我们就必须将后台查询出来的serverList转换成符合easyui tree 数据格式的treeList，为此我写了如下转换的JS方法:

function TreeHelper(list){
    this.list = list;
}
(function(TreeHelper){
    function getAllChildren(list,item){
        var children = getNextLevelChildren(list,item);
        for(var i=0,ii=children.length;i<ii;i++){
            getAllChildren(list,children[i]);
        }
    }
    //遍历list剩下的数据，找到item的下一层的子节点
    function getNextLevelChildren(list,item){
        var children = [];
        for(var i=list.length-1;i>=0;i--){
            var mid = list[i];
            if(mid.pid === item.id){
                delete mid.pid;
                children.push(mid);
                list.splice(i,1);
            }
        }
        if(children.length > 0){
            item.children = children;
        }
        return children;
    }
    TreeHelper.prototype.dataTransferer = function(){
        var list = this.list;
        //根节点必须在数组前面
        list.sort(function(a,b){
            if(a.pid > b.pid){
                return 1;
            }else{
                return -1;
            }
        });
        var item,
            result = [];
        //遍历根节点，递归处理其所有子节点的数据
        //每处理完一个根节点，就将其及其所有子节点从list中删除，加快递归速度
        while(list.length){
            item = list[0];
            list.splice(0,1);
            delete item.pid;
            getAllChildren(list,item);
            result.push(item);
        }
        return result;
    };
})(TreeHelper);

测试:

var treeData = new TreeHelper(serverList).dataTransferer();
console.log(JSON.stringify(treeData));

输出:
[{"id":2},{"id":13,"children":[{"id":14,"children":[{"id":15}]}]},{"id":1,"children":[{"id":3},{"id":9,"children":[{"id":10},{"id":8,"children":[{"id":7,"children":[{"id":6,"children":[{"id":11,"children":[{"id":12,"children":[{"id":16,"children":[{"id":17,"children":[{"id":19},{"id":18},{"id":21,"children":[{"id":22}]},{"id":26,"children":[{"id":27,"children":[{"id":28},{"id":29,"children":[{"id":31},{"id":30}]}]}]},{"id":25},{"id":24},{"id":23},{"id":20}]}]}]}]}]}]}]}]},{"id":4},{"id":5}]}] 

 

 

分类:  jquery easyui