dtree jquery是一個(gè)基于jquery的樹(shù)形菜單插件，具有簡(jiǎn)單易用、靈活定制、支持異步加載等特點(diǎn)。

在使用dtree jquery之前，需要先引入jquery庫(kù)和dtree jquery插件。可以從官方網(wǎng)站或Github倉(cāng)庫(kù)下載最新版。引入方式如下：

<!-- 引入jquery庫(kù) -->
<script src="jquery.min.js"></script>
<!-- 引入dtree jquery插件 -->
<link href="dtree.css" rel="stylesheet">
<script src="dtree.js"></script>

dtree jquery提供了兩種初始化方式，分別是靜態(tài)初始化和動(dòng)態(tài)初始化。

靜態(tài)初始化方式需要在HTML頁(yè)面中添加一個(gè)ul標(biāo)簽，并通過(guò)js代碼將ul標(biāo)簽轉(zhuǎn)化為樹(shù)形菜單。代碼如下：

<!-- HTML代碼 -->
<ul id="tree">
<li data-id="1" data-pid="0">節(jié)點(diǎn)1</li>
<li data-id="2" data-pid="1">節(jié)點(diǎn)2</li>
<li data-id="3" data-pid="1">節(jié)點(diǎn)3</li>
</ul>
<!-- js代碼 -->
<script>
layui.use('dtree', function(){
var dtree = layui.dtree;
dtree.render({
elem: "#tree",
dataFormat: "list",
data: [{
id: 1,
title: "節(jié)點(diǎn)1",
parentId: 0,
spread: true,
children: [{
id: 2,
title: "節(jié)點(diǎn)2",
parentId: 1,
spread: true,
},{
id: 3,
title: "節(jié)點(diǎn)3",
parentId: 1,
spread: true,
}]
}]
});
});
</script>

動(dòng)態(tài)初始化方式需要通過(guò)ajax請(qǐng)求獲取數(shù)據(jù)，并將獲取到的數(shù)據(jù)轉(zhuǎn)化為樹(shù)形菜單。代碼如下：

<!-- HTML代碼 -->
<div id="tree"></div>
<!-- js代碼 -->
<script>
layui.use('dtree', function(){
var dtree = layui.dtree;
$.ajax({
type: "get",
url: "/getTreeData",
success: function(res){
dtree.render({
elem: "#tree",
dataFormat: "list",
data: res.data
});
}
});
});
</script>

以上是dtree jquery的一些基本用法，通過(guò)修改配置項(xiàng)和樣式可以實(shí)現(xiàn)更多的定制化效果。具體使用方法可以參考官方文檔。