Jquery-zTree的基本用法

【简介】

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件

•  兼容 IE、FireFox、Chrome 等浏览器
•  在一个页面内可同时生成多个 Tree 实例
•  支持 JSON 数据
•  支持一次性静态生成 和 Ajax 异步加载 两种方式
•  支持多种事件响应及反馈
•  支持 Tree 的节点移动、编辑、删除
•  支持任意更换皮肤 / 个性化图标（依靠css）
•  支持极其灵活的 checkbox 或 radio 选择功能
•  简单的参数配置实现 灵活多变的功能

   

  】(从后台获取简单格式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. });  

   

   ③最后显示效果