閱讀目錄
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>目錄結構</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> <!-------------------------------下面是右側的內容 -----------------------> <div class='ztree-content'> 右側的內容放在這里 </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個屬性，
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 = '' />
注意：
1. 添加菜單，刪除菜單，需要發ajax請求成功后才能生效。
2. 返回的json數據需要支持我上面的數據格式即可。