jQuery mtree是一個基于jQuery的樹形結(jié)構(gòu)插件，可以輕松地創(chuàng)建交互式的目錄和菜單。它提供了可定制的選項和事件回調(diào)，并允許使用JSON數(shù)據(jù)源構(gòu)建樹形結(jié)構(gòu)。

使用jQuery mtree很簡單。首先，確保先在頁面中導入jQuery和jquery.mtree.min.js：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mtree/1.4.0/jquery.mtree.min.js"></script>

接下來，創(chuàng)建一個空的div使用作為mtree的容器，然后調(diào)用mtree函數(shù)并傳入一些配置選項來初始化：

<div id="tree"></div>
<script>
$('#tree').mtree({
data: [{
label: '節(jié)點1',
children: [{
label: '節(jié)點1.1'
}, {
label: '節(jié)點1.2'
}]
}, {
label: '節(jié)點2'
}],
collapsed: true,
closedIcon: 'fa fa-plus-square-o',
openedIcon: 'fa fa-minus-square-o'
});
</script>

在上面的例子中，我們使用了一個帶有兩個節(jié)點的JSON數(shù)據(jù)源。collapsed選項表示樹形結(jié)構(gòu)是否默認折疊，closedIcon和openedIcon則分別表示關(guān)閉和打開狀態(tài)下的圖標樣式。

如果需要響應節(jié)點的事件，可以指定相應的回調(diào)函數(shù)，如下所示：

$('#tree').mtree({
data: [{
label: '節(jié)點1',
children: [{
label: '節(jié)點1.1',
onSelect: function() {
alert('節(jié)點1.1被選中了');
}
}, {
label: '節(jié)點1.2'
}]
}, {
label: '節(jié)點2'
}],
onSelect: function() {
alert('該節(jié)點被選中了');
}
});

這里為每個節(jié)點指定了一個onSelect回調(diào)函數(shù)以及一個全局的onSelect回調(diào)函數(shù)。

除了以上所提到的功能，jQuery mtree還支持許多其他的選項和方法，如定制節(jié)點的渲染、重新加載樹形結(jié)構(gòu)、更新現(xiàn)有節(jié)點等。更多信息請參閱官方文檔。