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

     ③最后顯示效果


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM