ztree

待我称王封你为后i 2022-05-17 22:29 123阅读 0赞

一、概述

官网介绍说，zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件（MIT 许可证）。官网可以下载。

二、ztree插件的使用

将下载的软件包解压，放到webapp的js目录下。在jsp页面引入css和js。

两种方式构造ztree。

1. 使用标准json数据构造ztree

<div title="面板3">
    
                                         <ul id="ztree1" class="ztree">
    
                                                  
    
                                         </ul>
    
                                         <script type="text/javascript">
    
                                                   $(function(){
    
                                                            var setting = {};
    
                                                            var zNodes = [
    
                                                                     {"name":"节点1","children":[
    
                                                                               {"name":"节点11"},
    
                                                                               {"name":"节点12"}
    
                                                                     ]},
    
                                                                     {"name":"节点2"},
    
                                                                     {"name":"节点3"}
    
                                                            ];
    
                                                            $.fn.zTree.init($("#ztree1"), setting, zNodes);
    
                                                   });
    
                                                  
    
                                         </script>
    
                                </div>

2. 使用简单json数据构造ztree

<div title="面板4">
    
                                         <ul id="ztree2" class="ztree">
    
                                                  
    
                                         </ul>
    
                                         <script type="text/javascript">
    
                                                   $(function(){
    
                                                            var setting = {
    
                                                                      data: {
    
                                                                               simpleData: {
    
                                                                                        enable: true
    
                                                                               }
    
                                                                     }
    
                                                                              
    
                                                            };
    
                                                            var zNodes = [
    
                                                                     {id:1,pId:0,"name":"节点1"},
    
                                                                     {id:2,pId:1,"name":"节点2"},
    
                                                                     {id:3,pId:2,"name":"节点3"}
    
                                                            ];
    
                                                            $.fn.zTree.init($("#ztree2"), setting, zNodes);
    
                                                   });
    
                                                  
    
                                         </script>
    
                                </div>

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

<div title="面板5">
    
                                         <ul id="ztree3" class="ztree">
    
                                                  
    
                                         </ul>
    
                                         <script type="text/javascript">
    
                                                   $(function(){
    
                                                            var setting3 = {
    
                                                                     data: {
    
                                                                               simpleData: {
    
                                                                                        enable: true
    
                                                                               }
    
                                                                     }
    
                                                                              
    
                                                            };
    
                                                            var url = "${pageContext.request.contextPath }/json/menu.json";
    
                                                            $.post(url,{},function(data){
    
                                                                     $.fn.zTree.init($("#ztree3"), setting3, data);
    
                                                            },'json');
    
                                                   });
    
                                                  
    
                                         </script>
    
                                </div>

4. ztree节点绑定事件动态添加选项卡

<div title="面板5">
    
                                         <ul id="ztree3" class="ztree">
    
                                                  
    
                                         </ul>
    
                                         <script type="text/javascript">
    
                                                   $(function(){
    
                                                            var setting3 = {
    
                                                                     data: {
    
                                                                               simpleData: {
    
                                                                                        enable: true
    
                                                                               }
    
                                                                     },
    
                                                                     callback: {
    
                                                                               onClick: function(event, treeId, treeNode){
    
                                                                                        if(treeNode.page != undefined){
    
                                                                                                 if($("#center_tab").tabs("exists",treeNode.name)){
    
                                                                                                           $("#center_tab").tabs("select",treeNode.name)
    
                                                                                                 }else{
    
                                                                                                           $("#center_tab").tabs("add",{
    
                                                                                                                    title:treeNode.name,
    
                                                                                                                    closable:true,
    
                                                                                                                    content:'<iframe height="100%" width="100%" frameborder="0" src='+treeNode.page+'></iframe>'
    
                                                                                                           });
    
                                                                                                 }
    
                                                                                        }
    
                                                                               }
    
                                                                     }
    
                                                                              
    
                                                            };
    
                                                            var url = "${pageContext.request.contextPath }/json/menu.json";
    
                                                            $.post(url,{},function(data){
    
                                                                     $.fn.zTree.init($("#ztree3"), setting3, data);
    
                                                            },'json');
    
                                                   });
    
                                                  
    
                                         </script>
    
                                </div>