DWZ是一種基于jQuery的開(kāi)源Web應(yīng)用程序開(kāi)發(fā)框架，它提供了底層的Web應(yīng)用開(kāi)發(fā)架構(gòu)和所需的豐富的組件插件，其中包括了根據(jù)JSON數(shù)據(jù)動(dòng)態(tài)生成樹(shù)的組件。

根據(jù)JSON動(dòng)態(tài)生成樹(shù)是DWZ框架中非常常用的功能，可以將一個(gè)JSON數(shù)據(jù)集合樹(shù)形的展示在頁(yè)面上。通常情況下，DWZ會(huì)將JSON數(shù)據(jù)抽象為一種類似于二叉樹(shù)的數(shù)據(jù)結(jié)構(gòu)，其中一條數(shù)據(jù)可能會(huì)作為多個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)，也可能會(huì)作為多個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)。來(lái)看一段代碼：

// 其中tree可以看作是一棵樹(shù)的數(shù)據(jù)結(jié)構(gòu)
var tree = {
text: "根節(jié)點(diǎn)",
isExpanded: true,
children: [
{
text: "子節(jié)點(diǎn)1",
isExpanded: true,
children: [
{
text: "子節(jié)點(diǎn)11"
},
{
text: "子節(jié)點(diǎn)12"
}
]
},
{
text: "子節(jié)點(diǎn)2",
isExpanded: true,
children: [
{
text: "子節(jié)點(diǎn)21"
},
{
text: "子節(jié)點(diǎn)22"
}
]
}
]
};
// 使用DWZ的樹(shù)形組件動(dòng)態(tài)生成樹(shù)
$("#tree").dwzTree({
tree: tree
});

在上面的代碼中，我們首先定義了JSON數(shù)據(jù)的樹(shù)形結(jié)構(gòu)，接著使用DWZ的樹(shù)形組件動(dòng)態(tài)生成了一個(gè)樹(shù)。其中，id為“tree”的元素就是我們要展示的樹(shù)形數(shù)據(jù)所對(duì)應(yīng)的HTML元素。

需要注意的是，DWZ的樹(shù)形組件并不會(huì)自動(dòng)對(duì)數(shù)據(jù)進(jìn)行排序，如果我們需要自定義排序規(guī)則的話，可以通過(guò)數(shù)組的sort()方法進(jìn)行排序然后再向組件中傳遞數(shù)據(jù)。