easyui是一款非常流行的jQuery插件。使用easyui可以快捷地實(shí)現(xiàn)各種界面組件，其中樹(shù)形控件尤為常用。easyui樹(shù)形控件除了支持靜態(tài)數(shù)據(jù)外，還支持動(dòng)態(tài)從后臺(tái)返回的JSON數(shù)據(jù)參加加載，下面我們就來(lái)看看如何使用easyui樹(shù)形控件遍歷JSON數(shù)據(jù)。

首先，我們需要準(zhǔn)備一份格式正確的JSON數(shù)據(jù)，例如：

{
"id": 1,
"text": "Node1",
"children": [
{
"id": 2,
"text": "Node11",
"children": [
{
"id": 3,
"text": "Node111"
},
{
"id": 4,
"text": "Node112"
}
]
},
{
"id": 5,
"text": "Node12"
}
]
}

該JSON數(shù)據(jù)包含了一個(gè)根節(jié)點(diǎn)和兩個(gè)子節(jié)點(diǎn)，其中第二個(gè)子節(jié)點(diǎn)又包含了兩個(gè)子節(jié)點(diǎn)。我們可以通過(guò)以下代碼將該JSON數(shù)據(jù)加載到easyui樹(shù)形控件中：

$('#tree').tree({
data: [{
"id": 1,
"text": "Node1",
"children": [{
"id": 2,
"text": "Node11",
"children": [{
"id": 3,
"text": "Node111"
}, {
"id": 4,
"text": "Node112"
}]
}, {
"id": 5,
"text": "Node12"
}]
}]
});

接下來(lái)，我們需要編寫(xiě)遍歷JSON數(shù)據(jù)的代碼。easyui提供了tree控件的方法，包括getChildren，getParent，getParents等。我們可以利用這些方法來(lái)遍歷JSON數(shù)據(jù)。以下是示例代碼：

function traverse(node) {
console.log(node.text);
var children = $('#tree').tree('getChildren', node.target);
if (children.length >0) {
for (var i = 0; i< children.length; i++) {
traverse(children[i]);
}
}
}

該代碼使用了遞歸方式遍歷JSON數(shù)據(jù)，從根節(jié)點(diǎn)開(kāi)始逐級(jí)訪(fǎng)問(wèn)子節(jié)點(diǎn)。每訪(fǎng)問(wèn)一個(gè)節(jié)點(diǎn)，就將該節(jié)點(diǎn)的text屬性輸出到瀏覽器控制臺(tái)中。使用方式如下：

var root = $('#tree').tree('getRoot');
traverse(root);

以上就是使用easyui樹(shù)形控件遍歷JSON數(shù)據(jù)的全部步驟。通過(guò)這種方式，我們可以在不破壞easyui控件功能的前提下，方便地遍歷和操作JSON數(shù)據(jù)。