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>

　　效果如下：