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

一、easyui tree基本使用

首先定义一个ul标签

<ul id="tt">ul> 

easyui tree 加载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可以返回过滤后的数据进行展示
其使用格式：

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

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

$('tt').tree({
    url:'tree.json'
    loadFilter:function(data){
          for(var i=0; iif(data[i].text=="Program Files"){
                      // 定义一个数组
                       var newData = new Array();
                       newData.push(data[i]);
                      return newData;
                }
          }
          return data;
    } 
});

这里我们可以看到我们使用了数组Array来存放过滤后的数据，这是因为easyui-tree加载json格式的原因，否则加载不出。
笔者是第一次写博客，不足之处请见谅，有什么异议可以互相讨论。