介绍
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使用的场合还是挺多的，也比较简单，并且网站提供资料也非常丰富，如果工作中需要树形展示，不妨使用一下。 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232099.html原文链接：https://javaforall.net
