在前端開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)遇到需要處理樹形數(shù)據(jù)的場(chǎng)景，這時(shí)就可以使用 Ext JSON 樹來(lái)快速方便地完成數(shù)據(jù)處理。以下是使用 Ext JSON 樹的一些注意點(diǎn)。

首先需要引入 ExtJS 的庫(kù)文件。

<script src="https://cdn.bootcdn.net/ajax/libs/extjs/3.4.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" >

然后創(chuàng)建一個(gè) Ext JSON 樹的容器，并配置數(shù)據(jù)源和處理函數(shù)。

var tree = new Ext.tree.TreePanel({
region: 'west',
title: 'Ext JSON 樹示例',
autoScroll: true,
width: 200,
minSize: 150,
maxSize: 400,
collapsible: true,
split: true,
loader: new Ext.tree.TreeLoader({
dataUrl: 'tree.json',
requestMethod: 'GET',
listeners: {
"beforeload": function(loader, node) {
loader.baseParams = {
parentId: node.id,
level: node.getDepth() + 1
};
}
}
}),
root: new Ext.tree.AsyncTreeNode({
id: '0',
text: '根節(jié)點(diǎn)',
expandable: true,
expanded: true
})
});
tree.render('tree-div');

這里的數(shù)據(jù)源是一個(gè) JSON 文件，通過(guò) TreeLoader 對(duì)象的 dataUrl 屬性設(shè)置。在 beforeload 事件中，我們可以通過(guò) node 參數(shù)獲取當(dāng)前節(jié)點(diǎn)的信息并作為請(qǐng)求參數(shù)傳遞給服務(wù)器。

接著可以根據(jù)自己的實(shí)際需求設(shè)置節(jié)點(diǎn)的屬性和事件。

tree.on("click", function(node) {
console.log(node);
});
tree.on("expandnode", function(node) {
console.log(node);
});
tree.on("collapsenode", function(node) {
console.log(node);
});

在以上代碼中，我們分別為樹節(jié)點(diǎn)的點(diǎn)擊、展開(kāi)和折疊事件綁定了不同的處理函數(shù)。

最后，需要將樹容器渲染到頁(yè)面中。

<div id="tree-div"></div>

在頁(yè)面中添加一個(gè)空的 div 元素，并將樹容器渲染到該元素中。

以上就是使用 Ext JSON 樹的基本流程，開(kāi)發(fā)者可以根據(jù)自己的實(shí)際需求進(jìn)行詳細(xì)配置和處理。