Ztree简介

介绍

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件 • 兼容 IE、FireFox、Chrome 等浏览器 • 在一个页面内可同时生成多个 Tree 实例 • 支持 JSON 数据 • 支持一次性静态生成 和 Ajax 异步加载 两种方式 • 支持多种事件响应及反馈 • 支持 Tree 的节点移动、编辑、删除 • 支持任意更换皮肤 / 个性化图标（依靠css） • 支持极其灵活的 checkbox 或 radio 选择功能 • 简单的参数配置实现 灵活多变的功能 在官网能够下载到zTree的源码、实例和API，其中作者pdf的API写得非常详细。 

参数介绍

下面简单介绍一下比较重要的两个参数 一个是setting，zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置 

var setting = { showLine: true, checkable: true }; 

第二个为zTreeNodes，zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息 zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式 第一种-带有父子关系的标准 zTreeNodes 

var zTreeNodes = [ { 
  "id":1, "name":"test1", "nodes":[ { 
  "id":11, "name":"test11", "nodes":[ { 
  "id":111, "name":"test111"} ]}, { 
  "id":12, "name":"test12"} ]}, ...... ]; 

第二种-带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 

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

还有很多属性在ztree官网上有非常详细的介绍，在这里不再赘言。 

举例

下面举个例子，就是通过后台数据获取，在前端使用ztree拼接成一棵树。 在页面引入ztree的js和css 

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

前端ztree的js使用： 

var setting = { isSimpleData : true, //数据是否采用简单 Array 格式，默认false  treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性  treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性  showLine : true, //是否显示节点间的连线  checkable : true //每个节点上是否显示 CheckBox  }; var zTree; var treeNodes; $(function(){ 
    $.ajax({ async : false, cache:false, type: 'POST', dataType : "json", url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//请求的action路径  error: function () { 
   //请求失败处理函数  alert('请求失败'); }, success:function(data){ 
    //请求成功后处理函数。  alert(data); treeNodes = data; } }); zTree = $("#tree").zTree(setting, treeNodes); }); 

后台逻辑： 

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

最后显示结果： 

总结

Ztree使用的场合还是挺多的，也比较简单，并且网站提供资料也非常丰富，如果工作中需要树形展示，不妨使用一下。