jQuery EasyUI Tree是一款基于jQuery的樹形控件。該控件能夠輕松地構(gòu)建樹形列表，同時(shí)也支持節(jié)點(diǎn)的折疊和展開、節(jié)點(diǎn)的拖拽等常見功能。下面將介紹如何使用jQuery EasyUI Tree。

首先，需要引入jQuery和jQuery EasyUI的庫(kù)文件。在頁(yè)面中添加如下代碼：

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

接著，在頁(yè)面中添加一個(gè)id為tree的DIV，用于顯示樹形列表。如下所示：

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

然后，在JavaScript代碼中定義樹形列表的數(shù)據(jù)。可以采用以下方式定義數(shù)據(jù)：

var data = [{
"id": 1,
"text": "節(jié)點(diǎn)1",
"children": [{
"id": 11,
"text": "節(jié)點(diǎn)11"
}, {
"id": 12,
"text": "節(jié)點(diǎn)12"
}]
}, {
"id": 2,
"text": "節(jié)點(diǎn)2"
}];

在定義完成數(shù)據(jù)后，可以使用如下代碼將數(shù)據(jù)渲染到樹形列表中：

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

通過上述代碼，就可以在頁(yè)面上顯示一顆帶有兩個(gè)父節(jié)點(diǎn)的樹形列表了。如果想要為節(jié)點(diǎn)添加事件處理函數(shù)，可以使用onLoadSuccess屬性。例如，為所有的節(jié)點(diǎn)添加一個(gè)單擊事件處理函數(shù)，可以使用如下代碼：

$('#tree').tree({
data: data,
onLoadSuccess: function (node, data) {
$('.tree-node').on('click', function () {
alert('節(jié)點(diǎn)被單擊了');
});
}
});

通過上述代碼，當(dāng)樹形列表加載完成后，所有的節(jié)點(diǎn)都將有了一個(gè)單擊事件處理函數(shù)。在該事件處理函數(shù)中，可以執(zhí)行任意自定義的JavaScript代碼。

最后，還可以通過各種屬性來(lái)進(jìn)一步增強(qiáng)樹形列表的功能。例如，可以使用checkbox屬性來(lái)為節(jié)點(diǎn)添加復(fù)選框。具體用法可以參考jQuery EasyUI Tree官方文檔。