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

最新推荐文章于 2021-03-22 00:28:39 发布

原创最新推荐文章于 2021-03-22 00:28:39 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #tree #loadFilter #数据过滤展示

本文介绍了Easyui Tree的基本使用方法，包括如何加载json数据和利用loadFilter进行数据过滤展示。在loadFilter中，通过查找json数据中text属性值为"Program Files"的节点，实现了自定义的数据显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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; i<data.length; i++){
                if(data[i].text=="Program Files"){
                      // 定义一个数组
                       var newData = new Array();
                       newData.push(data[i]);
                      return newData;
                }
          }
          return data;
    } 
});