EasyUI Tree是一款常用的樹形結(jié)構(gòu)展示插件，我們可以利用它來展示各種樹形數(shù)據(jù)，如菜單樹、組織結(jié)構(gòu)樹等。默認情況下，EasyUI Tree會將我們的數(shù)據(jù)轉(zhuǎn)換成固定的JSON格式進行展示，但是有時候我們需要根據(jù)自己的業(yè)務(wù)需求自定義JSON數(shù)據(jù)格式，此時我們可以通過EasyUI Tree提供的一些API來實現(xiàn)。

首先，我們需要將EasyUI Tree的data屬性設(shè)置為false，這樣EasyUI Tree就不會自己生成JSON數(shù)據(jù)了，而是等待我們通過JavaScript代碼來自定義JSON數(shù)據(jù)。

$('#tree').tree({
url: '',
data: false
});

然后，我們可以利用EasyUI Tree提供的loadData方法來實現(xiàn)數(shù)據(jù)的加載，在方法中傳入我們自定義的JSON數(shù)據(jù)即可。

var data = [{
id: 1,
text: 'Node1',
children: [{
id: 11,
text: 'Node11'
},{
id: 12,
text: 'Node12'
}]
}, {
id: 2,
text: 'Node2'
}];
$('#tree').tree('loadData', data);

通過上面的示例代碼，我們就可以將自定義的JSON數(shù)據(jù)展示在EasyUI Tree插件中了。如果我們的JSON數(shù)據(jù)中存在異步加載的子節(jié)點，可以通過將節(jié)點的state屬性設(shè)置為'closed'來實現(xiàn)，當(dāng)節(jié)點被展開時利用EasyUI Tree提供的onBeforeExpand事件來異步加載子節(jié)點的數(shù)據(jù)。

var data = [{
id: 1,
text: 'Node1',
children: [{
id: 11,
text: 'Node11',
state: 'closed'
}]
}];
$('#tree').tree({
url: '',
data: false,
onBeforeExpand: function(node) {
if (node.children && node.children.length == 0) {
$.ajax({
url: 'getChildren.php',
dataType: 'json',
data: {
id: node.id
},
success: function(data) {
$('#tree').tree('append', {
parent: node.target,
data: data
});
}
});
}
}
});
$('#tree').tree('loadData', data);

總之，通過以上的方法，我們就可以輕松地將自定義的JSON數(shù)據(jù)展示在EasyUI Tree插件中了。更多EasyUI相關(guān)的內(nèi)容，請關(guān)注我們的博客。