easyui tree json php,easyui tree 模仿ztree 使用扁平化加载json

一、扩展原因

ztree使用了一种扁平化的数据加载方式，就是id(自身id),pid(父id)的方式，参考http://www.ztree.me/v3/demo.php#_102，于是扩展easyui tree 也使用这种亲民的方式；

二、基本方法

1，载入扩展文件

2，在JS中实例化TREE

三、具体方法(easyui1.4.1下测试可用)

1，载入扩展JS

//作者孙宇

//自定义loadFilter的实现

$.fn.tree.defaults.loadFilter = function (data, parent) {

var opt = $(this).data().tree.options;

var idFiled,

textFiled,

parentField;

if (opt.parentField) {

idFiled = opt.idFiled || 'id';

textFiled = opt.textFiled || 'text';

parentField = opt.parentField;

var i,

l,

treeData = [],

tmpMap = [];

for (i = 0, l = data.length; i 

tmpMap[data[i][idFiled]] = data[i];

}

for (i = 0, l = data.length; i 

if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {

if (!tmpMap[data[i][parentField]]['children'])

tmpMap[data[i][parentField]]['children'] = [];

data[i]['text'] = data[i][textFiled];

tmpMap[data[i][parentField]]['children'].push(data[i]);

} else {

data[i]['text'] = data[i][textFiled];

treeData.push(data[i]);

}

}

return treeData;

}

return data;

};

2，实例化

//实例化。这里增加了三个属性，可以指定idFiled，textFiled和parentField。所以这里的simpleData可以不严格转换成tree的数据格式。

$(function(){

$('#tt3').tree({

checkbox: true,

url: 'tree_data_simp.json',

parentField:"pid",

textFiled:"name",

idFiled:"key"

});

});

json文件：

[

{

"key": 1,

"name": "Folder1",

"iconCls": "icon-ok"

},

{

"key": 2,

"pid": 1,

"name": "File1",

"checked": true

},

{

"key": 3,

"pid": 1,

"name": "Folder2",

"state": "open"

},

{

"key": 4,

"pid": 3,

"name": "File3",

"attributes": {

"p1": "value1",

"p2": "value2"

},

"checked": true,

"iconCls": "icon-reload"

},

{

"key": 8,

"pid": 3,

"name": "Async Folder"

},

{

"key": 9,

"name": "language",

"state": "closed"

},

{

"key": "j1",

"pid": 9,

"name": "Java"

},

{

"key": "j2",

"pid": 9,

"name": "C#"

}

]

3，效果：