Original address: http://my.oschina.net/acitiviti/blog/349377
Reference article:http://www.jeasyuicn.com/demo/treeloadfilter.html
One, the reason for expansion
Ztree uses a flat method of data loading, that is, the ID (self-ID), PID (parent ID) way, referring to http://www.ztree.me/v3/demo.php#_102, so the extension Easyui tree also use this way of the people;
Ii. Basic Methods
1, Loading extension files
2, instantiate the tree in JS
Third, the specific method (easyui1.4.1 test is available)
1, Load Extension JS
?
123456789101112131415161718192021222324252627282930313233343536 |
//作者孙宇
//自定义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 < l; i++) {
tmpMap[data[i][idFiled]] = data[i];
}
for (i = 0, l = data.length; i < l; 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, instantiation
?
12345678910 |
//实例化。这里增加了三个属性,可以指定idFiled,textFiled和parentField。所以这里的simpleData可以不严格转换成tree的数据格式。
$(
function
(){
$(
‘#tt3‘
).tree({
checkbox:
true
,
url:
‘tree_data_simp.json‘
,
parentField:
"pid"
,
textFiled:
"name"
,
idFiled:
"key"
});
});
|
JSON file:
?
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
[
{
"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, Effect:
[Turn]easyui tree mimic ztree use flatten to load JSON