Easyui-tree 加載json數據及loadFilter的使用

一、easyui tree基本使用

首先定義一個<ul>

 

Html代碼  

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

 

 

easyui tree 加載json數據：

 

Js代碼  

$('tt').tree({
   lines:true,//是否顯示樹線
   url:'tree.json'
});

json數據要求的格式：

Json代碼  下載 

[{
    "id":1,
    "text":"My Documents",
    "children":[{
        "id":11,
        "text":"Photos",
        "state":"closed",
        "children":[{
            "id":111,
            "text":"Friend"
        },{
            "id":112,
            "text":"Wife"
        },{
            "id":113,
            "text":"Company"
        }]
    },{
        "id":12,
        "text":"Program Files",
        "state":"closed",
        "children":[{
            "id":121,
            "text":"Intel"
        },{
            "id":122,
            "text":"Java"
        },{
            "id":123,
            "text":"Microsoft Office"
        },{
            "id":124,
            "text":"Games"
        }]
    },{
        "id":16,
        "text":"Actions",
        "children":[{
            "text":"Add",
            "iconCls":"icon-add"
        },{
            "text":"Remove",
            "iconCls":"icon-remove"
        },{
            "text":"Save",
            "iconCls":"icon-save"
        },{
            "text":"Search",
            "iconCls":"icon-search"
        }]
    },{
        "id":13,
        "text":"index.html"
    },{
        "id":14,
        "text":"about.html"
    },{
        "id":15,
        "text":"welcome.html"
    }]
}]

 其中iconCls表示的圖標，這樣數據就加載出來了。

 

二、loadFilter使用 下載      

loadFilter可以返回過濾後的數據進行展示

其使用格式：

Js代碼  

$('tt').tree({
    url:'tree.json'
    loadFilter:function(data){
          //過濾操作
         return newData;
    }
});

 例：我們從json數據查找text屬性值爲"Program Files"的樹返回展示：

Js代碼  下載 

$('tt').tree({
    url:'tree.json'
    loadFilter:function(data){
          for(var i=0; i<data.length; i++){
                if(data[i].text=="Program Files"){
                      // 定義一個數組
                       var newData = new Array();
                       newData.push(data[i]);
                      return newData;
                }
          }
          return data;
    }
});

  這裏我們可以看到我們使用了數組Array來存放過濾後的數據，這是因爲easyui-tree加載json格式的原因，否則加載不出。