JQuery树插件——ztree
API与Demo:http://www.treejs.cn/v3/api.php
使用插件,第一步依然是引入:
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="jquery.ztree.all.js"></script>
//详细的引入请参见API——如果有较多地方需要引入,请将引入部分抽取为专门的JSP页面,使用 <include />,例如,引入的页面:
<link href="${ctxStatic}/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" /> <script src="${ctxStatic}/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>
如何引入:
<%@include file="/WEB-INF/views/include/treeview.jsp" %>
接下来看实例:
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
大致分析:
其中,$.fn.zTree.init为初始化树的方法,它接收三个参数,第一个为ztree的DOM容器,通常为 <ul> 或 <div>,例如:
<ul id="treeDemo" class="ztree"></ul> <div id="ztree" class="ztree"></div>
//请务必设置class为 ztree,以指定为ztree的容器。
第二个参数为ztree的配置,用于显示树的显示样式,例如:
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解) var setting = {};
//详细配置后续补充
第三个参数为ztree的数据源,格式为JSON:
var zNodes = [ {name:"test1", open:true,"checked":"true", children:[ {name:"test1_1","checked":"true"}, {name:"test1_2"}]}, {name:"test2", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ];
这样,一个最简单的树便可以加载了:
<!DOCTYPE html> <HTML><HEAD><TITLE> ZTREE DEMO </TITLE><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet"><script src="js/jquery-1.4.4.min.js"></script><script src="js/jquery.ztree.all.js"></script><SCRIPT LANGUAGE="JavaScript">var zTreeObj;// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)var setting = {};// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)var zNodes = [ {name:"test1111", open:true,"checked":"true", children:[ {name:"test1_1","checked":"true"}, {name:"test1_2"}]}, {name:"test2222", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ]; $(function(){zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);});</SCRIPT></HEAD> <BODY> <div><ul id="treeDemo" class="ztree"></ul> </div> </BODY> </HTML>
View Code
【使用开关函数隐藏与显示】:
$(".a").click(function(){$("p").toggle() })
引用网友的理解:zTree的实现就是用setting把树的模型结构定义好,然后用zNodes当数据源,把数据浇灌到这个树
settings实例:
var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},callback:{onClick:function(event, treeId, treeNode){var id = treeNode.pId == '0' ? '' :treeNode.pId;$('#officeContent').attr("src","${ctx}/sys/office/list?id="+id+"&parentIds="+treeNode.pIds);}}};
查阅API可以得知:(回调函数部分这里暂时不进行展开,可以参见官网API)
其中,simpleData的作用:不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式,这样,我们就可以使用简单的JSON格式,通过在JSON中指定id,pid来确定ztree的结构关系,而不用通过复杂的JSON嵌套来确定树的关系:
var setting = {data: {simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPId: 0}} }; 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"} ];
效果如下:
<!DOCTYPE html> <HTML><HEAD><TITLE> ZTREE DEMO </TITLE><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet"><script src="js/jquery-1.4.4.min.js"></script><script src="js/jquery.ztree.all.js"></script><SCRIPT LANGUAGE="JavaScript">var zTreeObj;// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解) var setting = {data: {simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPId: 0}} }; 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"} ];$(function(){zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, treeNodes);});</SCRIPT></HEAD> <BODY> <div><ul id="treeDemo" class="ztree"></ul> </div> </BODY> </HTML>
View Code
接下来看Web项目中实际使用的Demo:
后台:
/*** 获取机构JSON数据。* @param extId 排除的ID* @param type 类型(1:公司;2:部门/小组/其它:3:用户)* @param grade 显示级别* @param response* @return*/@RequiresPermissions("user")@ResponseBody@RequestMapping(value = "treeData")public List<Map<String, Object>> treeData(@RequestParam(required=false) String extId, @RequestParam(required=false) String type,@RequestParam(required=false) Long grade, @RequestParam(required=false) Boolean isAll, HttpServletResponse response) {List<Map<String, Object>> mapList = Lists.newArrayList();List<Office> list = officeService.findList(isAll);for (int i=0; i<list.size(); i++){Office e = list.get(i);if ((StringUtils.isBlank(extId) || (extId!=null && !extId.equals(e.getId()) && e.getParentIds().indexOf(","+extId+",")==-1))&& (type == null || (type != null && (type.equals("1") ? type.equals(e.getType()) : true)))&& (grade == null || (grade != null && Integer.parseInt(e.getGrade()) <= grade.intValue()))&& Global.YES.equals(e.getUseable())){Map<String, Object> map = Maps.newHashMap();map.put("id", e.getId());map.put("pId", e.getParentId());map.put("pIds", e.getParentIds());map.put("name", e.getName());if (type != null && "3".equals(type)){map.put("isParent", true);}mapList.add(map);}}return mapList;}
View Code
后台返回的是一个mapList ,此Demo中返回的数据如下:
[{id=1, pId=0, name=江西省党总部, pIds=0,}, {id=2, pId=1, name=公司领导, pIds=0,1,}, {id=3, pId=1, name=综合部, pIds=0,1,}, {id=4, pId=1, name=市场部, pIds=0,1,}, {id=5, pId=1, name=技术部, pIds=0,1,}, {id=6, pId=1, name=研发部, pIds=0,1,}, {id=7, pId=1, name=济南市分公司, pIds=0,1,}, {id=8, pId=7, name=公司领导, pIds=0,1,7,}, {id=9, pId=7, name=综合部, pIds=0,1,7,}, {id=10, pId=7, name=市场部, pIds=0,1,7,}, {id=11, pId=7, name=技术部, pIds=0,1,7,}, {id=12, pId=7, name=历城区分公司, pIds=0,1,7,}, {id=13, pId=12, name=公司领导, pIds=0,1,7,12,}, {id=14, pId=12, name=综合部, pIds=0,1,7,12,}, {id=15, pId=12, name=市场部, pIds=0,1,7,12,}, {id=16, pId=12, name=技术部, pIds=0,1,7,12,}, {id=17, pId=7, name=历下区分公司, pIds=0,1,7,}, {id=22, pId=7, name=高新区分公司, pIds=0,1,7,}, {id=18, pId=17, name=公司领导, pIds=0,1,7,17,}, {id=23, pId=22, name=公司领导, pIds=0,1,7,22,}, {id=19, pId=17, name=综合部, pIds=0,1,7,17,}, {id=24, pId=22, name=综合部, pIds=0,1,7,22,}, {id=20, pId=17, name=市场部, pIds=0,1,7,17,}, {id=25, pId=22, name=市场部, pIds=0,1,7,22,}, {id=21, pId=17, name=技术部, pIds=0,1,7,17,}, {id=26, pId=22, name=技术部, pIds=0,1,7,22,}]
View Code
前台通过Ajax请求接收:更多Ajax操作请参见API或之前随笔:http://www.cnblogs.com/jiangbei/p/6880157.html
<script type="text/javascript">var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},callback:{onClick:function(event, treeId, treeNode){var id = treeNode.pId == '0' ? '' :treeNode.pId;$('#officeContent').attr("src","${ctx}/sys/office/list?id="+id+"&parentIds="+treeNode.pIds);}}};function refreshTree(){$.getJSON("${ctx}/sys/office/treeData",function(data){$.fn.zTree.init($("#ztree"), setting, data).expandAll(true);});}refreshTree();
View Code
这样,一棵树就显示出来了!
获取树的节点数据请参见回调函数:
实例参见:http://blog.csdn.net/u013008179/article/details/47680951
简单实例,待更新:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>ztree</title><link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery.ztree.all.js"></script> </head> <body><input type="text" name="area" id="area" readonly="readonly"><a id="loadztree" href="#">点击加载</a><ul id="treeDemo" class="ztree"></ul><script type="text/javascript">// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)var setting = {callback: { onClick: zTreeOnClick}};// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)var zNodes = [ {name:"test1111", open:true,"checked":"true", children:[ {name:"test1_1","checked":"true"}, {name:"test1_2"}]}, {name:"test2222", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ]; function zTreeOnClick(event, treeId, treeNode) {alert(treeNode.name);$("#area").val(treeNode.name);};$("#loadztree").click(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);$("#treeDemo").slideToggle();});$(function(){alert("页面加载完成!");});</script> </body> </html>
View Code
Jeetise实例:
<font size="5">Hello tree!</font><div id="ztree" class="ztree"></div><script type="text/javascript">var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},};function refreshTree(){$.getJSON("${ctx}/po/partyOrganization/treeData",function(data){$.fn.zTree.init($("#ztree"), setting, data);});}refreshTree();
View Code
转载于:https://www.cnblogs.com/jiangbei/p/7149963.html
JQuery树插件——ztree相关推荐
- jQuery 树插件ZTree使用Demo
一.了解ZTree zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.zTree 是开源免费的软件. ...
- zTree 优秀的jquery树插件
zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...
- 树形图html插件,前端树形图 -- zTree -- jQuery 树插件
zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(MIT 许可证).所 ...
- html树插件,推荐8款jQuery轻量级树形Tree插件
由于其拥有庞大,实用的插件库,使得jQuery变得越来越流行.今天将介绍一些最好的jQuery树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的jQuery插件,它将一个无序列表转换为可 ...
- jquery各种插件库
1.http://v3.bootcss.com 2.http://www.jq22.com/ 3.http://tutorialzine.com 4.http://codecanyon.net/ 5. ...
- zTree 一个依靠 jQuery 实现的多功能 “树插件”
http://www.ztree.me/v3/demo.php#_101 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 ...
- ztree 自定义参数_zTree树插件使用方法及自定义控件实践_蓝戒的博客
zTree简介: zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 实践版本:zTree-verso ...
- webpack引入jquery以及插件的方法(如ztree)
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://githu ...
- easyui treegrid php,jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格 | 菜鸟教程
jQuery EasyUI 数据网格与树插件 - Treegrid 树形网格 jQuery EasyUI 插件 扩展自 $.fn.datagrid.defaults.通过 $.fn.treegrid. ...
最新文章
- C#下用P2P技术实现点对点聊天
- Python3身份运算符(比较对象是否相同)
- php获取表单后如何保存到数据库中,php – 如何将数据从HTML表单保存到WordPress中的数据库表?...
- 为什么学Python
- 基于python的个人博客系统的设计开题报告_个人博客设计实现开题报告
- java 缩略图 库_Thumbnailator:一个高质量Java缩略图开发库
- ai驱动数据安全治理_人工智能驱动的Microsoft工具简介
- python docker实战_「docker实战篇」python的docker-docker镜像的创建使用dockerfile(3
- dede手机站对应的php,Dede织梦(手机)移动端访问PC网址自动跳转对应m网址
- 跨域单点登录方案实现
- CSS常见的中属性级,选择符级的Hack
- 关于循环结构 判断月份的两种方法
- Zookeeper是什么
- CAJ文件转PDF的简单方法
- krohne流量计接线图_KROHNE科隆电磁流量计工作原理介绍
- word表格怎么缩小上下间距_word表格间距 在WORD表格中如何将行间距缩小
- postfix(邮件服务器)说明与postconfig命令详解
- LayUI之动态选项卡Tabiframe使用
- 小米生态链企业商米科技完成数亿元C+轮融资,蚂蚁金服投资...
- java动态代理特性学习
热门文章
- pandas string
- SQLAlchemy schema.MetaData
- vcsa上RVC查看vsan状态的命令
- win10系统windows hello无法设置 windows hello设置开启教程
- 在虚拟宿主环境中承载 Active Directory 域控制器时需要考虑的事项
- Java基础学习总结(157)——国产开源JDK来了
- 支付业务与技术架构学习总结(6)——对账系统的设计
- Spring学习总结(26)——Spring事务原理详解
- Ehcache学习总结(3)--Ehcache 整合Spring 使用页面、对象缓存
- python urllib3 post ssl,python post https报错解决方案