`

Jquery Ztree树型插件总结

阅读更多
最近在使用树型插件的时候知道了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 树型js插件** jQuery zTree是一款基于JavaScript的开源树形插件,广泛应用于网页中实现各种树形结构的展示与交互功能。它轻量级、易于集成,提供了丰富的API和多种自定义配置选项,使得开发者能够...

    zTree树型菜单+Dom4j解析XML+struts2+spring整合_完整树型菜单权限管理案例(附源代码+API学习文档)

    前台页面展示用zTree插件,后台数据用XML保存,利用Dom4j进行解析,涉及到了对XML的增、删、改等等特别需求的技术,并用struts2+spring进行整合项目,源代码中有非常完整的注释,导入myEclipse部署运行,即可从...

    zTree树型菜单+Dom4j解释XML+struts2+spring整合_完整案例(附源代码+API学习文档)

    前台页面展示用zTree插件,后台数据用XML保存,利用Dom4j进行解析,涉及到了对XML的增、删、改等等特别需求的技术,并用struts2+spring进行整合项目,源代码中有非常完整的注释,导入myeclipse部署运行,即可从...

    JQUERY ZTREE 动态树代码

    JQUERY ZTREE是一款基于jQuery的高效、轻量级的树形插件,广泛应用于数据展示、文件管理、权限控制等多种场景。它的核心特性在于支持动态加载、丰富的节点操作和交互效果,以及自定义的样式和图标。在本技术资料中,...

    jQuery 树形结构插件 zTree

    **jQuery zTree 插件...总结来说,zTree 是一个强大的jQuery树形插件,它的特性、灵活性和易用性使其在Web开发中占据一席之地。通过学习和掌握zTree的使用,开发者可以轻松构建出各种复杂的树形结构,提升用户体验。

    zTree树形菜单展开收缩插件

    zTree是一款广泛应用于Web开发中的树形菜单插件,它具有丰富的功能和高度的自定义性,能够帮助开发者轻松创建出交互性强、视觉效果良好的树形结构。在本项目中,"zTree树形菜单展开收缩插件"是其核心应用,主要特性...

    jQuery+bootstrap+ztree多选下拉树

    事先声明下(代码非常杂乱,并未写成插件,方法都是非常low的方法),这个是模拟bootstrap的插件select-picker插件完成的多选下拉树,类似picker中,这个也可以输入进行查询,因为项目特殊需要,里面都是直接id命名...

    JQuery zTree源代码

    zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器(对于IE 6的兼容问题将不做特殊维护)在一个页面内可同时生成多个 Tree 实例支持 JSON 数据支持一次...

    ztree树形菜单、ztree树形菜单demo

    zTree是一款基于JavaScript的开源树形插件,广泛应用于网页中的数据展示和交互操作。它以其轻量级、高性能和丰富的配置选项而受到开发者的青睐。zTree的核心功能是将JSON数据转换为交互式的树形结构,适用于文件目录...

    HTML树型控件.zip_html格式目录树

    - `Jquery插件 ztree.js 最好用的开源免费树形插件,没有之一.url`可能是一个链接,指向关于zTree的详细文档或教程,帮助开发者快速上手。 - `Java的授权与认证-java教程-PHP中文网.url`可能是提供有关Java安全...

    zTree实现多选下拉框

    zTree是一款强大的树形插件,广泛应用于网页中展示层次结构数据,如组织结构、文件目录等。本文将详细介绍如何借助zTree实现这一功能,并深入探讨相关技术点。 首先,理解zTree的基本概念和使用方法是关键。zTree的...

    结合ztree的下拉框树形结构数据多选,单选

    zTree是一个强大的jQuery插件,它提供了丰富的树形操作功能,如节点的增删改查、多选和单选等。 首先,我们来看"下拉框"。在网页设计中,下拉框(Dropdown)是一种节省空间且易于使用的表单元素,它允许用户从预...

    bootstrap风格的zTree树形菜单代码.zip

    Bootstrap风格的zTree树形菜单代码是一款结合了流行的前端框架Bootstrap和强大的jQuery树形插件zTree的解决方案。zTree是一款轻量级的JavaScript组件,它能够帮助开发者快速构建出功能丰富的树形结构,适用于网站...

    Select 下拉树 Ztree

    ZTree是一款非常流行的JavaScript插件,专门用于构建交互式的树状视图,它在网页中广泛应用,特别是在需要处理多级分类或者层级关系的数据时。 ZTree的核心功能是通过JSON数据格式来展示树形结构,并支持多种操作,...

    多个简单漂亮的树型菜单JS代码

    jQuery Treeview插件则专门用于创建树型菜单,提供了一套完整的解决方案,包括CSS样式和JavaScript函数。 使用jQuery Treeview的步骤通常包括以下几步: 1. **引入依赖**:在HTML文件中引入jQuery库和jQuery ...

    zTree下拉插件

    在这个“zTree下拉插件”的案例中,我们看到它被用作一个下拉树型菜单选择器,这在用户界面设计中常见于例如地区选择、组织架构浏览等场景。 zTree的核心特性包括: 1. **数据驱动**:zTree的数据模型基于JSON格式...

    活字格-菜单和树型图.zip

    6. Resources\zTree\jquery.ztree.core.js:这是zTree库的主要JavaScript文件,包含了实现树型图的基本功能和方法,如加载数据、节点操作、事件监听等。 7. Resources\StyleTemplate\ForguncyMenu.js:这可能是一个...

    asp.net树形结构菜单demo/无限级分类/zTree

    jquery的一个插件zTree.此demo是用vs08+sql2005写的 可任意修改 像样更多的功能和外观 就去zTree官网下一个 我写的这个是动态的 就是说是连接数据库的 class表 必须的字段 ID 父ID 还有类别名称。 不懂的可以随时问...

    dtree树型资源及实例

    dtree以其简洁的API和良好的性能,与其他树型组件(如jQuery UI的treeview、zTree等)相比,具有一定的优势。然而,具体选择哪款组件,还需根据项目需求和团队熟悉度来决定。 总结,dtree作为一款优秀的JavaScript...

    bootstrap树形下拉框 下拉框树形菜单

    之后,通过JavaScript或者jQuery来初始化这个树形下拉框,例如: ```javascript $(document).ready(function() { $('#treeview-select').treeview({ expandIcon: 'glyphicon glyphicon-chevron-right', ...

Global site tag (gtag.js) - Google Analytics