实例化。这里增加了三个属性,可以指定idFiled,textFiled和parentField。所以这里的simpleData可以不严格转换成tree的数据格式。
$(function(){
$('#tt3').tree({
checkbox: true,
url: 'tree_data_simp.php',
parentField:"pid",
textFiled:"name",
idFiled:"key"
});
});
tree_data_simp.php 的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#"
}
]
自定义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;
};