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格式的原因，否则加载不出。