jquery ztree插件使用

官网：ztree.me，下载插件

1. 在页面中引入ztree相关的文件：

2. <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">

3.  <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>

     <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>

4. 2.使用标准json数据构造ztree

5. <!-- 展示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>

6. 效果：

7. 

8. 3.使用简单json数据构造ztree

9. <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>

10. 效果：

11. 

12. 4.发送ajax请求获取json数据构造ztree

13. 写一个menu.json：

14. [
            { "id":"11", "pId":"0", "name":"基础数据"},
            { "id":"112", "pId":"11", "name":"取派员设置",  "page":"page_base_staff.action"},
            { "id":"113", "pId":"11", "name":"区域设置","page":"page_base_region.action"},
            { "id":"114", "pId":"11", "name":"管理分区", "page":"page_base_subarea.action"},
            { "id":"115", "pId":"11", "name":"管理定区/调度排班","page":"page_base_decidedzone.action"},
            { "id":"12", "pId":"0", "name":"受理"},
            { "id":"121", "pId":"12", "name":"业务受理" ,"page":"page_qupai_noticebill_add.action"},
            { "id":"122", "pId":"12", "name":"工作单快速录入" ,"page":"page_qupai_quickworkorder.action"},
            { "id":"124", "pId":"12", "name":"工作单导入" ,"page":"page_qupai_workorderimport.action"},
            { "id":"13", "pId":"0", "name":"调度"},
            { "id":"131", "pId":"13", "name":"查台转单","page":""},
            { "id":"132", "pId":"13", "name":"人工调度","page":"page_qupai_diaodu.action"}
    ]

15. 在jsp页面中写：

16.  <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节点
                                        }
                                    }
                            };
                            
                            //发送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>

17. 效果：

18. 

19. 5.使用ztree提供的API为节点绑定事件

20.  <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(event, 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,
                                                        content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
                                                    });
                                                }
                                            }
                                        }
                                    }

                            };
                            
                            //发送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>

21.  

22.