通常用來儲存樹數據的數據庫表都含有兩個整型字段: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的數據格式,ui
可是若是遇到一次所有加載的需求,咱們就必須將後臺查詢出來的serverList轉換成符合easyui tree 數據格式的treeList,爲此我寫了以下轉換的JS方法:this
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);
測試:spa
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}]}]