Easyui-tree 加载json数据及loadFilter的使用

一、easyui tree基本使用

首先定义一个<ul>

 

Html代码  

1. <ul id="tt"></ul>  

 

 

easyui tree 加载json数据：

 

Js代码  

1. $('tt').tree({  
2.    lines:true,//是否显示树线  
3.    url:'tree.json'  
4. });  

json数据要求的格式：下载

Json代码  

1. [{  
2.     "id":1,  
3.     "text":"My Documents",  
4.     "children":[{  
5.         "id":11,  
6.         "text":"Photos",  
7.         "state":"closed",  
8.         "children":[{  
9.             "id":111,  
10.             "text":"Friend"  
11.         },{  
12.             "id":112,  
13.             "text":"Wife"  
14.         },{  
15.             "id":113,  
16.             "text":"Company"  
17.         }]  
18.     },{  
19.         "id":12,  
20.         "text":"Program Files",  
21.         "state":"closed",  
22.         "children":[{  
23.             "id":121,  
24.             "text":"Intel"  
25.         },{  
26.             "id":122,  
27.             "text":"Java"  
28.         },{  
29.             "id":123,  
30.             "text":"Microsoft Office"  
31.         },{  
32.             "id":124,  
33.             "text":"Games"  
34.         }]  
35.     },{  
36.         "id":16,  
37.         "text":"Actions",  
38.         "children":[{  
39.             "text":"Add",  
40.             "iconCls":"icon-add"  
41.         },{  
42.             "text":"Remove",  
43.             "iconCls":"icon-remove"  
44.         },{  
45.             "text":"Save",  
46.             "iconCls":"icon-save"  
47.         },{  
48.             "text":"Search",  
49.             "iconCls":"icon-search"  
50.         }]  
51.     },{  
52.         "id":13,  
53.         "text":"index.html"  
54.     },{  
55.         "id":14,  
56.         "text":"about.html"  
57.     },{  
58.         "id":15,  
59.         "text":"welcome.html"  
60.     }]  
61. }]  

 其中iconCls表示的图标，这样数据就加载出来了。

 

二、loadFilter使用

loadFilter可以返回过滤后的数据进行展示

其使用格式：下载

Js代码  

1. $('tt').tree({  
2.     url:'tree.json'  
3.     loadFilter:function(data){  
4.           //过滤操作  
5.          return newData;  
6.     }   
7. });  

 例：我们从json数据查找text属性值为"Program Files"的树返回展示：下载

Js代码  

1. $('tt').tree({  
2.     url:'tree.json'  
3.     loadFilter:function(data){  
4.           for(var i=0; i<data.length; i++){  
5.                 if(data[i].text=="Program Files"){  
6.                       // 定义一个数组  
7.                        var newData = new Array();  
8.                        newData.push(data[i]);  
9.                       return newData;  
10.                 }  
11.           }  
12.           return data;  
13.     }   
14. });  

  这里我们可以看到我们使用了数组Array来存放过滤后的数据，这是因为easyui-tree加载json格式的原因，否则加载不出。