zTree學習筆記

一、zTree的下載

　　官網：http://www.treejs.cn/v3/main.php#_zTreeInfo

　　解壓后的目錄結構為：

　　

二、zTree入門案例

2.1 在頁面中引入相關文件

　　要使用zTree，必須先引入zTree的相關js文件，在下載的開發包里，提供了如下js文件

• jquery.ztree.core.js：是zTree的核心庫，包括基本的展示功能。
• jquery.ztree.excheck.js：是zTree關於復選框/單選框的擴展庫。
• jquery.ztree.exedit.js：是zTree關於編輯操作的擴展庫。
• jquery.ztree.exhide.js：是zTree關於節點隱藏的擴展庫。
• jquery.ztree.all.js：是core+excheck+exedit的組合（不包含exhide）

　　本案例中，我引入的是jquery.ztree.all.js。此外還需要引入一個zTreeStyle.css文件，此文件是ztree需要的css和圖片。因為zTree是基於jQuery開發的，所以還要引入jQuery

<!--引入JQuery-->
<script type="application/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<!--引入jquery.ztree.all.js-->
<script src="${pageContext.request.contextPath}/js/jquery.ztree.all-3.5.js"></script>
<!--引入zTree的樣式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/zTreeStyle.css"/>

2.2 構造zTree

【使用標准json數據構造ztree】（了解）

<div title="面板二">
    <!-- 展示ztree效果 :使用標准json數據構造ztree-->
    <ul id="ztree1" class="ztree"></ul>
    <script type="text/javascript">
        $(function(){
            //頁面加載完成后，執行這段代碼----動態創建ztree
            var setting = {};
            //構造節點數據
            var zNodes = [
                {"name":"節點一","children":[
                        {"name":"節點一_1"},
                        {"name":"節點一_2"}
                    ]},//每個json對象表示一個節點數據
                {"name":"節點二"},
                {"name":"節點三"}
            ];
            //調用API初始化ztree
            $.fn.zTree.init($("#ztree1"), setting, zNodes);
        });
    </script>
</div>

　　效果：

　　

【使用簡單json數據構造ztree】（重點）

<div title="面板三">
    <!-- 展示ztree效果 :使用簡單json數據構造ztree-->
    <ul id="ztree2" class="ztree"></ul>
    <script type="text/javascript">
       $(function () {
           //頁面加載完成后，執行這段代碼----動態創建ztree
           var setting2={
               data:{
                   simpleData:{
                       enable:true //使用簡單json數據構造ztree節點
                   }
               }
           };
           // 構造節點數據
           var zNodes2=[
               {"id":"1","pId":"2","name":"節點一"},//每個json對象表示一個節點數據
               {"id":"2","pId":"3","name":"節點二"},
               {"id":"3","pId":"0","name":"節點三"}
           ];
           //調用API初始化ztree
           $.fn.zTree.init($("#ztree2"), setting2, zNodes2);

       })
    </script>
</div>

　　效果：

　　

【發送ajax請求獲取json數據構造ztree】

　　准備json數據：

<div title="面板四">
    <!-- 展示ztree效果 :發送ajax請求獲取簡單json數據構造ztree-->
    <ul id="ztree3" class="ztree"></ul>
    <script type="text/javascript">
        $(function () {
            //頁面加載完成后，執行這段代碼----動態創建ztree
            var setting3 = {
                data:{
                    simpleData:{
                        enable:true //使用簡單json數據構造ztree節點
                    }
                },
                callback:{
                    //為ztree節點綁定單擊事件
                    onClick: function (even, treeId, treeNode) {
                        if (treeNode.page != undefined) {
                            // 判斷選項卡是否存在
                            var e = $("#mytabs").tabs("exists", treeNode.name);
                            if (e) {
                                // 如果存在,選中
                                $("#mytabs").tabs("select", treeNode.name);
                            } else {
                                // 動態添加一個選項卡
                                $("#mytabs").tabs("add",{
                                    title:treeNode.name,
                                    closable:true
                                });
                            }
                        }

                    }
                }
            };
            //發送ajax請求，獲取json數據
            //jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
            var url="${pageContext.request.contextPath}/json/menu.json";
            $.post(url, {}, function (data) {
                //調用API初始化ztree
                $.fn.zTree.init($("#ztree3"), setting3, data);

            },'json');
        });
    </script>
</div>

 　　效果如下：