無限級目錄樹資料結構前端實現
阿新 • • 發佈:2019-02-05
由於最近在邊學邊做一些前端的內容,公司用到了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的效果