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

一、easyui tree基本使用

首先定义一个<ul>

 

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

 

 

easyui tree 加载json数据：

 

$('tt').tree({
   lines:true,//是否显示树线
   url:'tree.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可以返回过滤后的数据进行展示

其使用格式：

$('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;
    } 
});

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

  笔者是第一次写博客，不足之处请见谅，有什么异议可以互相讨论。