由於最近在邊學邊做一些前端的內容，公司用到了easyui ，裡面需要實現一顆目錄樹（如下圖）

組織樹的json格式如圖

那麼後臺如果是要拼接成這樣的資料格式給前端，資料量一大，使用者一多，就麻煩了，所以現在要通過後臺的資料，前端進行相應的處理，封裝成這種格式

一， 關於樹的一個想法

傳統的資料庫儲存資料是這樣儲存的

這樣通過parentId 關聯到id 來確立一個層級，這樣可以通過父節點迴圈找到每一層的子節點。
這樣可以實現到目標，但是如果子樹比較多的層級巢狀，那麼效率就會比較低下。

改進的方法（這個當然不是原創的啦）

item欄位說明
一 ，層級
使用了自身和父關係節點，通過”.” 的方式分隔開來，這樣我們在查詢的時候，通過 “.”+前面的內容，來得到子樹的內容
例如 :
父 節點 item 是 6
要得到所有的子孫節點 item like “.6”
單單得到自己的子節點 item 匹配正則表示式 是 “+[0-9].[“+6+”]{1}”

二 ，逆序
指的是這裡的層級的數字不是從小到大的，（例如 1.2.3 這樣），
而是從大到小的（例如，3.2.1 這樣），
這樣做的好處在於可以在sql裡使用排序

PS : 如果你想要得到一個升序的形式，你可以在sql裡使用排序，便於其他的查詢時使用

select item from test1 ORDER BY CAST(item AS signed) ASC
//這裡使用CAST 這個函式的目的是為了自然數排序，不清楚的同學自行上百度查

數字從大到小

數字從小到大是做不出來這樣的效果的

二 程式碼的實現

/**
 * 這是你要封裝的物件，可以改成你需要的資料結構
 * */
 

function Datas(id,name,text,children){
    this.id = id ;
    this.name = name ;
    this.text = text ;
    this.children = children ;//這是子樹
}
/**
 * 修改你請求的路徑
 * */
var apiUrl = "TreeTest.json";
var dataUpdate ;
var arris ; //用於記錄節點是否被使用來減少遍歷

/*獲取目標樹的方式*/
function getTree(){
    $.ajax({
        url : apiUrl,
        type : 'get'
 
,
        success:function(msg){
            //請求成功
            dataUpdate = msg ; 
            arris = new Array(msg.length);
            loadTree(getTreeFather(0,arris.length));
        },error:function(msg){
            //請求失敗
        },timeout:function(msg){
            //請求超時
        }
    })  
}

/*頂級的節點*/
function getTreeFather(index,length){
    var lst = new Array();
    // 迴圈判斷
    while(index < length){
        // 控制下標
        if(typeof(arris[index]) != "undefined" && arris[index] == 0){
            index++;
            continue;
        }
        //列印能夠匹配正則的內容
        var s = "[0-9]{1}$";
        var s1 =new RegExp(s);
        //得到下標
        var code =  dataUpdate[index].userCode;

        if(code.search(s1)==0){
            current++;
            // 列印當前下標的內容
            //console.log(dataUpdate[index].userCode);
            //改成0，之後都不會再遍歷這個節點
            arris[index] = 0;
            var m = new Datas(dataUpdate[index].id,
                dataUpdate[index].name,
                dataUpdate[index].userCode,
                getTreeSon(index+1,length,"\."+s,code));
            lst.push(m);
        }
        index++;            
    }
    console.log("結束迴圈,列印樹");
    console.log(lst);
    return lst;     
};

/*頂級的節點下的所有層級節點*/
function getTreeSon(index2,length,stringCode,scode){
    var lst2 = new Array();
    // 跳出迴圈判斷
    while(index2 < length){

        // 控制下標
        if(typeof(arris[index2]) != "undefined" && arris[index2] == 0){
            index2++;
            continue;
        }

        //列印能夠匹配正則的內容
        var s = "[0-9]{1}"+stringCode;
//          console.log(s);
        var s1 =new RegExp(s);
        //得到下標
        var code =  dataUpdate[index2].userCode;

        if(code.search(s1)==0 
            && code.indexOf(scode)>=0){
            current++;
            // 列印當前下標的內容
//              console.log(dataUpdate[index2].userCode);
            //之後都不能再列印這個下標的內容
            arris[index2] = 0;
            var m = new Datas(dataUpdate[index2].id,
                dataUpdate[index2].name,
                dataUpdate[index2].userCode,
                getTreeSon(index2+1,length,"\."+s,code));

            lst2.push(m);
        }
        index2++;

    }
    return lst2;

};

最終出來的資料格式

把它丟進easyui的效果