• Jquery-zTree的用法


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

    • 核心: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. });  

       ③最后显示效果

  • 相关阅读:
    20165208 2017-2018-2 《Java程序设计》第三周学习总结
    20165208 预备作业3 Linux安装及学习
    20155315 2016-2017-2《Java程序设计》课程总结
    20155315 2016-2017-2 《Java程序设计》第十周学习总结
    20155315 2016-2017-2 《Java程序设计》第九周学习总结
    20155315 2016-2017-2 《Java程序设计》第八周学习总结
    20155315 2016-2017-2 《Java程序设计》第七周学习总结
    2017-2018-2 20165330 实验四《Android程序设计》实验报告
    第十周课堂实践总结
    2017-2018-2 20165330 实验三《敏捷开发与XP实现》实验报告
  • 原文地址:https://www.cnblogs.com/AutumnRhyme/p/5915769.html
Copyright © 2020-2023  润新知