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. });  

     ③最后显示效果

posted @ 2016-09-28 11:47  markchuan  阅读(33008)  评论(5编辑  收藏  举报