ztree樹形菜單demo


閱讀目錄

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 = '' />

github查看demo

注意:

1. 添加菜單,刪除菜單,需要發ajax請求成功后才能生效。

2. 返回的json數據需要支持我上面的數據格式即可。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM