Jquery-zTree的用法

Posted 2020-08-11 子鱼

• 【部分函数和属性介绍】

• 核心：zTree(setting, [zTreeNodes])

  这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。

   

• 核心参数：setting

  zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置

  setting 举例:

  Js代码  

  1. var setting = {   
  2.     showLine: true,   
  3.     checkable: true   
  4. };   

   核心参数：zTreeNodes

  zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息

  zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式

  ①带有父子关系的标准 zTreeNodes 举例:

  Js代码  

  1. var zTreeNodes = [   
  2.     {"id":1, "name":"test1", "nodes":[   
  3.       {"id":11, "name":"test11", "nodes":[   
  4.         {"id":111, "name":"test111"}   
  5.       ]},   
  6.       {"id":12, "name":"test12"}   
  7.     ]},   
  8.     ......   
  9. ];   

  ②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例：

  Js代码  

  1. var treeNodes = [                                                                         
  2.     {"id":1, "pId":0, "name":"test1"},   
  3.     {"id":11, "pId":1, "name":"test11"},   
  4.     {"id":12, "pId":1, "name":"test12"},   
  5.     {"id":111, "pId":11, "name":"test111"},   
  6.     ......   
  7. ];   

  ①在页面引用zTree的js和css：

  html代码  

  1. <!-- ZTree树形插件 -->  
  2. <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css">  
  3. <!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css">  -->  
  4. <script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>  

  ②在script脚本中定义setting和zTreeNodes

  Java代码  

  1. var setting = {  
  2.         isSimpleData : true,              //数据是否采用简单 Array 格式，默认false  
  3.         treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性  
  4.         treeNodeParentKey : "pId",        //在isSimpleData格式下，当前节点的父节点id属性  
  5.         showLine : true,                  //是否显示节点间的连线  
  6.         checkable : true                  //每个节点上是否显示 CheckBox  
  7.     };  
  8.   
  9. var treeNodes = [   
  10.     {"id":1, "pId":0, "name":"test1"},   
  11.     {"id":11, "pId":1, "name":"test11"},   
  12.     {"id":12, "pId":1, "name":"test12"},   
  13.     {"id":111, "pId":11, "name":"test111"},   
  14. ];   

   ③在进入页面时生成树结构：

  Js代码  

  1. var zTree;  

  Js代码  

  1. $(function() {  
  2.     zTree = $("#tree").zTree(setting, treeNodes);  
  3.  });  

   ④最后查看效果：

  

  【实例二】(从后台获取简单格式Json数据)

  ①后台代码封装简单格式Json数据：

  Java代码  

  1. public void doGetPrivilegeTree() throws IOException{  
  2.         String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";  
  3.         String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";  
  4.         String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";  
  5.         String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";  
  6.         List<String> lstTree = new ArrayList<String>();  
  7.         lstTree.add(s1);  
  8.         lstTree.add(s2);  
  9.         lstTree.add(s3);  
  10.         lstTree.add(s4);  
  11.         //利用Json插件将Array转换成Json格式  
  12.         response.getWriter().print(JSONArray.fromObject(lstTree).toString());  
  13.     }  

   

  ②页面使用Ajax获取zTreeNodes数据再生成树

  Js代码  

  1. var setting = {  
  2.     isSimpleData : true,              //数据是否采用简单 Array 格式，默认false  
  3.     treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性  
  4.     treeNodeParentKey : "pId",        //在isSimpleData格式下，当前节点的父节点id属性  
  5.     showLine : true,                  //是否显示节点间的连线  
  6.     checkable : true                  //每个节点上是否显示 CheckBox  
  7. };  
  8.   
  9. var zTree;  
  10. var treeNodes;  
  11.   
  12. $(function(){  
  13.     $.ajax({  
  14.         async : false,  
  15.         cache:false,  
  16.         type: ‘POST‘,  
  17.         dataType : "json",  
  18.         url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//请求的action路径  
  19.         error: function () {//请求失败处理函数  
  20.             alert(‘请求失败‘);  
  21.         },  
  22.         success:function(data){ //请求成功后处理函数。    
  23.             alert(data);  
  24.             treeNodes = data;   //把后台封装好的简单Json格式赋给treeNodes  
  25.         }  
  26.     });  
  27.   
  28.     zTree = $("#tree").zTree(setting, treeNodes);  
  29. });  

   ③最后显示效果