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