當前位置：
首頁 >
ztree树形菜单demo
發布時間：2025/6/15
37
豆豆
生活随笔
收集整理的這篇文章主要介紹了
ztree树形菜单demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
閱讀目錄
- zTree樹形菜單
zTree樹形菜單
樹形菜單使用方式如下：
HTML引入的方式如下：
注意：
1. css需要引入：
2. JS需要引入如下：
<script src='libs/jquery.min.js'></script> <script src='libs/jquery.ztree.core.js'></script> <script src='libs/jquery.ztree.exedit.js'></script> <script src='libs/remodal.js'></script> <script src='libs/ztree.js'></script> <script src='js/index.js'></script>3. 在id為ztreeId 添加4個屬性，
? ? 3-1： data-add-url 為添加菜單的接口（數據返回的格式和成本中心的 /catalog/addAccCatalog 的格式字段一樣）。
? ? 3-2： data-del-url 為刪除菜單接口(數據返回的格式和成本中心的 /catalog/delAccCatalog 格式字段一樣)。
? ? 3-3: data-img-url: 圖片的相對路徑，比如圖片的路徑為 xxx/yyy/images/xx.png 因此 data-img-url = 'xxx/yyy' 就可以了。
? ? 3-4: data-tree: 樹形目錄的數據.
4. 彈窗樹形菜單 模糊匹配
配置如下：
在頁面上放一個隱藏域input 設置id為 ztreeId， data-img-url 和上面一樣，是圖片前綴路徑， data-tree 是 樹形菜單的數據。如下代碼：
<input type='hidden' id="ztreeId" data-img-url='.' data-tree = '' />
github查看demo
注意：
1. 添加菜單，刪除菜單，需要發ajax請求成功后才能生效。
2. 返回的json數據需要支持我上面的數據格式即可。
總結
以上是生活随笔為你收集整理的ztree树形菜单demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android首次启动时间长优化之预编译
- 下一篇： 使用java底层实现邮件的发送(含测试，