jQuery-------zTree树形插件-jQuery插件

1. 1. 解压zTree_v3-master，查看demo

1. 1. 使用浏览器访问\zTree_v3-master\demo\cn的index.html页面

 

1. 1. 案例：最简单的树-标准json数据
2. 步骤

1. 查看/demo/cn/index.html的源代码

2. 把zTreeStyle文件夹和jquery.ztree.all.js文件导入项目

 

3.在jsp页面中导入上图的两个js和css文件，jquery.js文件也要导入，如果导入则不用导

4.依照/demo/cn/index.html源码，在jsp添加ztree的div

<ul id="tree" class="ztree" style="width:150px; overflow:auto;"></ul>

 

5.在文档加载完成后，初始化ztree的数据

$(function() {          //1.节点数据          var nodes = [              {name: "用户管理", children: [                   {name: "用户添加"},                   {name: "用户管理"}              ]},              {name:"系统管理"},              {name:"权限管理"},          ];                   //2.节点配置          var setting = {};                   //3.初始化节点内容          $.fn.zTree.init($("#tree"), setting, nodes);

6.效果

 

 

1. 1. 案例：最简单的树-简单json数据
2. Js代码

//1.节点数据           //顶级节点的pid设置为0           var nodes = [                {id:1, pId:0, name: "用户管理"},                {id:11, pId:1, name: "用户添加"},                {id:12, pId:1, name: "用户修改"},                {id:2, pId:0, name: "系统管理"},                {id:3, pId:0, name: "权限管理"},                {id:31, pId:3, name: "快递员工"},                {id:32, pId:3, name: "代理商"}           ];                     //2.节点配置           var setting = {                data: {                     simpleData: {                          enable: true//使用简单树形json数据                     }                }           };                     //3.初始化节点内容           $.fn.zTree.init($("#tree"), setting, nodes);      });

 

1. 效果

1. 1. 标准和简单json数据的区别
2. 其实他们只是树形结构的数据格式不一样而已
3. 建议说使用简单json数据来构建树型数据
   1. 发送ajax网络请求获取菜单数据

1. 把事先准备好的json数据导入到项目中,导在webcontent目录下

 

1. Js代码

$(function() {                     //1.节点配置           var setting = {                data: {                     simpleData: {                          enable: true//使用简单树形json数据                     }                }           };                     //2.通过发送网络请求来获取树型菜单的数据           var url = "${pageContext.request.contextPath}/json/menu.json"           /* 1.post网络请求最后一个参数为dataType              2.可选。规定预期的服务器响应的数据类型。                默认执行智能判断（xml、json、script 或 html）*/           $.post(url,function(data){                //3.初始化节点内容                $.fn.zTree.init($("#tree"), setting, data);           },"json");                });

 

1. 1. 监听树形菜单的点击事件
2. 监听菜单的点击事件通过在setting中添加callback即可
3. Callback中可以写beforeClick、onClick等事件（查看首页源码）
4. treeNode.name是获取菜单标题、treeNode.isParent是判断当前是否有子菜单
5. 注意如何不重复添加选项卡【掌握】
6. 代码

$(function() {             //1.节点配置             var setting = {                   data: {                        simpleData: {                              enable: true//使用简单树形json数据                        }                   },                   callback:{                        onClick:function(event, treeId, treeNode){                              /* 在内容中添加tabbar */                              //获取tabs中是否存在当前要展开的内容                              if(!treeNode.isParent){                                    var tab = $("#tt").tabs("exists",treeNode.name);                                    if(tab){                                          //如果已经存在tabs中了，就打开选中                                          $("#tt").tabs("select",treeNode.name);                                    }else{                                          $('#tt').tabs('add',{                                                title: treeNode.name,                                                content: '<div >Content测试</div>',                                                closable: true                                          });                                    }                                                                 }                        }                   }             };                         //2.通过发送网络请求来获取树型菜单的数据             var url = "${pageContext.request.contextPath}/json/menu.json"             /* 1.post网络请求最后一个参数为dataType                2.可选。规定预期的服务器响应的数据类型。                   默认执行智能判断（xml、json、script 或 html）*/             $.post(url,function(data){                   //3.初始化节点内容                   $.fn.zTree.init($("#tree"), setting, data);             },"json");                   });

 

效果图