最近在使用树型插件的时候知道了ZTree,总体了解了一下,功能非常强大,在此进行总结。
1.插件的下载和API地址
官方网站:http://www.ztree.me/v3/main.php#_zTreeInfo
演示地址:http://www.ztree.me/v3/demo.php
API:http://www.ztree.me/v3/api.php
需要引用的类和样式
jquery.ztree.all-3.4.min.js
zTreeStyle.css
jquery-1.4.4.min.js
2.使用习惯上的总结
初始加载,一股我们使用树型插件的时候都习惯给树插件设置一个AJAX获取地址,然后让树插件自己去获取,但是在ZTree中有点不一样,
ZTree中的AJAX地址不会在初始加载时生效,而是在有子项的节点才会触发。
例子1:
HTML部分
<div id="bxzb" class="ztree"></div><!--记住引用ztree样式-->
var setting = {
isSimpleData: true,
treeNodeKey: "id", //设置节点唯一标识属性名称
treeNodeParentKey: "pId", //设置节点的父节点唯一标识属性名称
nameCol: "name", //设置 zTree 显示节点名称的属性名称,此处默认为Name
showLine: true, //在树型中是否显示线条样式
root: { //zTree数据节点的根,全部节点数据都处于 root.nodes 内
isRoot: true,
nodes: []
},
async: {
enable: true,
url:"<%=path%>/common/dataInfo/getBmDataDB2.jsp?RETURNTYPE=DFKPI_FOR_ST&TYPE=<%=type%>",
autoParam:["id","pId","name"]//这里设置在AJAX请求的时候,在请求地址后会自动追加的节点项
},
callback:{//设置事件
beforeAsync: zTreeOnAsyncSuccess
},
view: {//设置字体样式调用方法getFontCss是一个返回样式的方法,具体使用参照API
fontCss: getFontCss
}
};
$.ajax({//初始化的时候,需要自行获取第一次数据
async : true,
cache:false,
type: 'POST',
dataType : "json",
url: "<%=path%>/common/dataInfo/getBmDataDB2.jsp?RETURNTYPE=DFKPI_FOR_ST&TYPE=<%=type%>",//请求的action路径
error: function () {//请求失败处理函数
alert('请求失败');
},
success:function(data){ //请求成功后处理函数。
//alert(data);
zTree = $.fn.zTree.init($("#bxzb"), setting, data);
}
});
服务器端的组合JAVA
List<Map<String,Object>> lst = queryQueryUtil.getQueryData(s);//获取需要的数据列
List<String> nodeArray = new ArrayList<String>();
nodeArray.add("{ \"id\":0, \"pId\":-1, \"name\":\"指标信息\",\"url\":\"\"}");
int index=1;
for (Map<String,Object> m : lst) {
nodeArray.add("{ \"id\":"+m.get("id")+", \"pId\":0, \"name\":\""+m.get("text")+"\",\"url\":\"\"}");
}
ret = JSONArray.fromObject(nodeArray).toString();//使用转换工具把对象转换成JSON
3.其它简便树型插件推荐
如果是简要的树应用(不涉及太多的节点选中等操作)推荐使用SimpleTree,这是一个比较老的控件,下载地址已经失效,下载地址见我上传的附件。
例子:
需要引用的类和样式
jquery.simple.tree.js
simpleTree.css
jquery-1.4.4.min.js
重点:SimpleTree主要是通过标签来决定是否有子项如果是用<ul>标签包住然后里面的<li>有相应请求地址的,这种就代表是有子项的,不然就代码已经到子项了。
HTML部分
<ul class="simpleTree">
<li class="root" id='0'><span>人员树</span>
<ul>
<li id='GROUP_00'><span>人员</span>
<ul class="ajax">
<li id='ALL'>{url:wtjlAction!getRyListForAjax.action?userType=1}</li>
</ul>
</li>
</ul>
</li>
</ul>
服务器端:
public void getRyListForAjax(){
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
RequestParametersUtil rpu = new RequestParametersUtil(request);
int userType = rpu.getInteger("userType",1);
try {
ryList = zhManager.getRyList(userType);
StringBuffer str = new StringBuffer();
for (TXtRy ry : ryList) {
str.append("<li id='" + ry.getJlid() + "' >");
str.append(ry.getUserName());
str.append("</li>");
}
// response 输出文本信息
response.setContentType("html/txt");
response.setCharacterEncoding("utf-8");
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache, must-revalidate");
response.setHeader("Pragma", "no-cache");
response.getWriter().write(str.toString());
response.getWriter().flush();
response.getWriter().close();
} catch (Exception e) {
// TODO: handle exception
}
}
分享到:
相关推荐
**jQuery zTree 树型js插件** jQuery zTree是一款基于JavaScript的开源树形插件,广泛应用于网页中实现各种树形结构的展示与交互功能。它轻量级、易于集成,提供了丰富的API和多种自定义配置选项,使得开发者能够...
前台页面展示用zTree插件,后台数据用XML保存,利用Dom4j进行解析,涉及到了对XML的增、删、改等等特别需求的技术,并用struts2+spring进行整合项目,源代码中有非常完整的注释,导入myEclipse部署运行,即可从...
前台页面展示用zTree插件,后台数据用XML保存,利用Dom4j进行解析,涉及到了对XML的增、删、改等等特别需求的技术,并用struts2+spring进行整合项目,源代码中有非常完整的注释,导入myeclipse部署运行,即可从...
JQUERY ZTREE是一款基于jQuery的高效、轻量级的树形插件,广泛应用于数据展示、文件管理、权限控制等多种场景。它的核心特性在于支持动态加载、丰富的节点操作和交互效果,以及自定义的样式和图标。在本技术资料中,...
**jQuery zTree 插件...总结来说,zTree 是一个强大的jQuery树形插件,它的特性、灵活性和易用性使其在Web开发中占据一席之地。通过学习和掌握zTree的使用,开发者可以轻松构建出各种复杂的树形结构,提升用户体验。
zTree是一款广泛应用于Web开发中的树形菜单插件,它具有丰富的功能和高度的自定义性,能够帮助开发者轻松创建出交互性强、视觉效果良好的树形结构。在本项目中,"zTree树形菜单展开收缩插件"是其核心应用,主要特性...
事先声明下(代码非常杂乱,并未写成插件,方法都是非常low的方法),这个是模拟bootstrap的插件select-picker插件完成的多选下拉树,类似picker中,这个也可以输入进行查询,因为项目特殊需要,里面都是直接id命名...
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器(对于IE 6的兼容问题将不做特殊维护)在一个页面内可同时生成多个 Tree 实例支持 JSON 数据支持一次...
zTree是一款基于JavaScript的开源树形插件,广泛应用于网页中的数据展示和交互操作。它以其轻量级、高性能和丰富的配置选项而受到开发者的青睐。zTree的核心功能是将JSON数据转换为交互式的树形结构,适用于文件目录...
- `Jquery插件 ztree.js 最好用的开源免费树形插件,没有之一.url`可能是一个链接,指向关于zTree的详细文档或教程,帮助开发者快速上手。 - `Java的授权与认证-java教程-PHP中文网.url`可能是提供有关Java安全...
zTree是一个强大的jQuery插件,它提供了丰富的树形操作功能,如节点的增删改查、多选和单选等。 首先,我们来看"下拉框"。在网页设计中,下拉框(Dropdown)是一种节省空间且易于使用的表单元素,它允许用户从预...
zTree是一款强大的树形插件,广泛应用于网页中展示层次结构数据,如组织结构、文件目录等。本文将详细介绍如何借助zTree实现这一功能,并深入探讨相关技术点。 首先,理解zTree的基本概念和使用方法是关键。zTree的...
Bootstrap风格的zTree树形菜单代码是一款结合了流行的前端框架Bootstrap和强大的jQuery树形插件zTree的解决方案。zTree是一款轻量级的JavaScript组件,它能够帮助开发者快速构建出功能丰富的树形结构,适用于网站...
ZTree是一款非常流行的JavaScript插件,专门用于构建交互式的树状视图,它在网页中广泛应用,特别是在需要处理多级分类或者层级关系的数据时。 ZTree的核心功能是通过JSON数据格式来展示树形结构,并支持多种操作,...
jQuery Treeview插件则专门用于创建树型菜单,提供了一套完整的解决方案,包括CSS样式和JavaScript函数。 使用jQuery Treeview的步骤通常包括以下几步: 1. **引入依赖**:在HTML文件中引入jQuery库和jQuery ...
在这个“zTree下拉插件”的案例中,我们看到它被用作一个下拉树型菜单选择器,这在用户界面设计中常见于例如地区选择、组织架构浏览等场景。 zTree的核心特性包括: 1. **数据驱动**:zTree的数据模型基于JSON格式...
6. Resources\zTree\jquery.ztree.core.js:这是zTree库的主要JavaScript文件,包含了实现树型图的基本功能和方法,如加载数据、节点操作、事件监听等。 7. Resources\StyleTemplate\ForguncyMenu.js:这可能是一个...
jquery的一个插件zTree.此demo是用vs08+sql2005写的 可任意修改 像样更多的功能和外观 就去zTree官网下一个 我写的这个是动态的 就是说是连接数据库的 class表 必须的字段 ID 父ID 还有类别名称。 不懂的可以随时问...
dtree以其简洁的API和良好的性能,与其他树型组件(如jQuery UI的treeview、zTree等)相比,具有一定的优势。然而,具体选择哪款组件,还需根据项目需求和团队熟悉度来决定。 总结,dtree作为一款优秀的JavaScript...
之后,通过JavaScript或者jQuery来初始化这个树形下拉框,例如: ```javascript $(document).ready(function() { $('#treeview-select').treeview({ expandIcon: 'glyphicon glyphicon-chevron-right', ...