Ztree简介
2015-08-30 19:42
351 查看
介绍
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使用的场合还是挺多的,也比较简单,并且网站提供资料也非常丰富,如果工作中需要树形展示,不妨使用一下。
相关文章推荐
- PHP与jquery前后台交互的小程序
- 2012 #5 Gold miner
- Sublime Text 使用方法及其技巧
- 磁盘管理
- Swift入门篇-字符串和字符
- nginx屏蔽ip
- Btrfs
- 2012 #5 History repeat itself
- 使用nginx的proxy_cache做网站缓存
- 程序包管理
- 质数中的质数 SDUT 3305
- Linux学习笔记——Btrfs文件系统的管理及应用
- 别人的确为了别人——价值观
- CentOS虚拟机web服务器实现windows本地实时测试
- 信息论基本公式汇总
- hdu5407CRB and Candies 求逆元
- 什么是大数据?
- 数据结构-线性表
- Swift入门篇-基本类型(3)
- Swift入门篇-基本类型(2)