jQuery MiniUI 是一套簡單易用的前端UI庫，其中的Tree組件可以方便地構(gòu)建樹狀結(jié)構(gòu)。下面介紹Tree組件的基本使用。

首先，在HTML頁面中引入jQuery和jQuery MiniUI的css和js文件。

<link href="jquery.min.css" rel="stylesheet" type="text/css" />
<link href="miniui.css" rel="stylesheet" type="text/css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="miniui.js" type="text/javascript"></script>

然后，在HTML頁面中加入一個(gè)空的div元素作為Tree容器。

<div id="tree1"></div>

接著，在js代碼中初始化Tree控件。

<script type="text/javascript">
$(function(){
$("#tree1").tree({
url:"tree_data.json"
});
});
</script>

其中，url屬性指定Tree的數(shù)據(jù)來源。數(shù)據(jù)格式如下：

[
{
"id": "1",
"text": "根節(jié)點(diǎn)",
"children": [
{
"id": "2",
"text": "節(jié)點(diǎn)1"
},
{
"id": "3",
"text": "節(jié)點(diǎn)2"
}
]
}
]

可以通過設(shè)置queryParams屬性傳遞額外的參數(shù)，如下所示：

$("#tree1").tree({
url:"tree_data.json",
queryParams:{id:"1"}
});

以上代碼指定了id為1的節(jié)點(diǎn)作為根節(jié)點(diǎn)顯示。

通過調(diào)用tree方法可以獲取Tree對(duì)象，進(jìn)而調(diào)用其方法，如下所示：

var tree1 = $("#tree1").tree("getTree");

以上代碼獲取了Tree對(duì)象tree1，接著可以使用tree方法調(diào)用一些內(nèi)置方法，如下所示：

var node = tree1.getNodeByParam("id", "2");

以上代碼根據(jù)id查找節(jié)點(diǎn)，并將結(jié)果賦值給變量node。

最后，要注意添加css樣式以美化Tree的顯示效果。

<style type="text/css">
.tree-folder,.tree-file {background-image:none;}
.tree-folder .tree-icon,.tree-file .tree-icon{background-image:url("tree_icons.gif");}
</style>