生活随笔
收集整理的這篇文章主要介紹了
ztree树形菜单demo
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
閱讀目錄
回到頂部
zTree樹形菜單
樹形菜單使用方式如下：
HTML引入的方式如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ztree樹形菜單demo
</title><link rel='stylesheet' href='libs/zTreeStyle.css' /><link rel='stylesheet' href='libs/remodal.css' /><link rel='stylesheet' href='libs/remodal-default-theme.css' /><link rel='stylesheet' href='css/index.css' /></head><body><!-- 彈窗 --><div class="remodal w360" data-remodal-id="modal2" id='data-modal2'> <div class="remodal-wrap"> <div class='m-title'>新增賬戶
</div><div class="m-center-modal"><div class='directory'> <label>目錄結(jié)構(gòu)
</label> <span></span></div><div class="account-name"> <label>賬戶名稱
</label><input type="text" maxlength="16" /></div><div class="modal-tips hidden"></div></div></div><div class='m-btn'><button class="remodal-cancel">取消
</button><button class="remodal-confirm">確定
</button></div></div><div class="container" id="container"><div class="account_page content"><div class='ztree-container' style='border-right:none'><div class="add-btn" id="add-btn"></div><ul id="ztreeId" class="ztree" data-add-url='' data-del-url='' data-img-url='' data-tree=''></ul></div><!-------------------------------下面是右側(cè)的內(nèi)容 -----------------------><div class='ztree-content'>右側(cè)的內(nèi)容放在這里</div><div class="catalog-line"></div></div></div><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></body>
</html> 注意：
1. css需要引入：
<link rel='stylesheet' href='libs/zTreeStyle.css' />
<link rel='stylesheet' href='libs/remodal.css' />
<link rel='stylesheet' href='libs/remodal-default-theme.css' />
<link rel='stylesheet' href='css/index.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個(gè)屬性，
? ? 3-1： data-add-url 為添加菜單的接口（數(shù)據(jù)返回的格式和成本中心的 /catalog/addAccCatalog 的格式字段一樣）。
? ? 3-2： data-del-url 為刪除菜單接口(數(shù)據(jù)返回的格式和成本中心的 /catalog/delAccCatalog 格式字段一樣)。
? ? 3-3: data-img-url: 圖片的相對(duì)路徑，比如圖片的路徑為 xxx/yyy/images/xx.png 因此 data-img-url = 'xxx/yyy' 就可以了。
? ? 3-4: data-tree: 樹形目錄的數(shù)據(jù).
4. 彈窗樹形菜單 模糊匹配
配置如下：
在頁面上放一個(gè)隱藏域input 設(shè)置id為 ztreeId， data-img-url 和上面一樣，是圖片前綴路徑， data-tree 是 樹形菜單的數(shù)據(jù)。如下代碼：
<input type='hidden' id="ztreeId" data-img-url='.' data-tree = '' />
github查看demo
注意：
1. 添加菜單，刪除菜單，需要發(fā)ajax請(qǐng)求成功后才能生效。
2. 返回的json數(shù)據(jù)需要支持我上面的數(shù)據(jù)格式即可。
總結(jié)
以上是生活随笔為你收集整理的ztree树形菜单demo的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
