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}]}]