JQuery Tree插件——zTree v3.0 beta 发布

资讯频道 → Web前端

37顶
1踩

2011-09-09 11:29 by 正式记者 zTreeAPI 评论(91) 有25273人浏览

ztree js jQuery tree

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

终于可以将 zTree v3.0 beta 发布出来了，在这里首先感谢大家对 zTree 的支持。

    这次 zTree v3.0 改动相当的大，包括 js 的代码架构、 css 调整；当然还有采用了延迟加载技术后，对性能的优化。赶快去下载吧：http://code.google.com/p/jquerytree/downloads/list

    顺便网站也进行了全面改版：http://www.baby666.cn

    当然这次 v3.0 的升级还是有一个比较大的遗憾，就是为了性能、结构等性能的提升，此次升级无法做到向下兼容。但我专门制作了 v2.6 - v3.0 的升级必读，请升级的朋友仔细阅读：http://www.baby666.cn/v3/faq.php#_101

    zTree v3.0 API 文档暂时也只提供在线版本的：http://www.baby666.cn/v3/api.php

   这次升级修改的内容太多了，这里不一一描述，需要的朋友可以去看升级必读，下面简要介绍一下 v3.0 改进的关键部分：

   * 【修改】zTree 的 js 代码架构全面修改，并且拆分

   * 【修改】zTree 的 css 样式全面修改，对浏览器可以更好地兼容，同时解决了以前1个像素差的问题

   * 【优化】采用延迟加载技术，一次性加载大数据量的节点性能飞速提升

   * 【增加】支持多节点同时选中、拖拽

   * 【增加】checkNode、checkAllNodes 等多种方法

   * 【增加】IE6 自动取消动画展开、折叠的功能

   * 【修正】异步加载 & 编辑模式能够更完美的共存

   * 【修正】setting 配置更加合理，并且增加了若干项配置参数

   * 【修正】treeNode 节点数据的属性更加合理，并且增加了一些方法

   * 【修正】拖拽操作更加灵活方便，更容易制定自己的规则

分享到：

37
顶

1
踩

评论共 91 条请登录后发表评论

91 楼 baichixiaozi 2014-05-07 16:05

90 楼 zTreeAPI 2012-01-04 23:27

cloud_zl 写道

请问这个id和pId可以是字符串类型的吗?

完全可以，只要自己统一即可。

89 楼 cloud_zl 2012-01-04 17:48

请问这个id和pId可以是字符串类型的吗?

88 楼 zTreeAPI 2011-12-26 13:31

YDY20082008 写道

同步加载树，树初始化好后想执行一个回调函数来做一些事情。看了API，好像没有提供些函数。只提供了一个onAsyncSuccess(异步方式下)。

不知道你想做哪种事情，对于节点DOM处理成功后会有 onNodeCreated 回调。异步加载完毕就是你看到的onAsyncSuccess

87 楼 YDY20082008 2011-12-25 20:42

同步加载树，树初始化好后想执行一个回调函数来做一些事情。看了API，好像没有提供些函数。只提供了一个onAsyncSuccess(异步方式下)。

86 楼 zTreeAPI 2011-12-23 11:16

w3cweb 写道

...

不知道为什么总是在同一级菜单下显示应该是第二个到第六个是第一个的子菜单的

你犯了一个粗心的错误： simpleDate 应该是 simpleData

85 楼 w3cweb 2011-12-23 10:16

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ZTREE DEMO - async & edit</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="@{'/public/ztree/css/demo.css'}" type="text/css">
	<link rel="stylesheet" href="@{'/public/ztree/css/zTreeStyle/zTreeStyle.css'}" type="text/css">
	<script type="text/javascript" src="@{'/public/ztree/js/jquery-1.4.4.min.js'}"></script>
	<script type="text/javascript" src="@{'/public/ztree/js/jquery.ztree.core-3.0.js'}"></script>
	<script type="text/javascript" src="@{'/public/ztree/js/jquery.ztree.excheck-3.0.js'}"></script>
	<script type="text/javascript" src="@{'/public/ztree/js/jquery.ztree.exedit-3.0.js'}"></script>
	<SCRIPT LANGUAGE="JavaScript">
		var setting = {
			async: {
				enable: true,
				url:"@{Application.getNodes()}",
				autoParam:["id","pId"],
				otherParam:{"otherParam":"zTreeAsyncTest"},
				dataFilter: filter,
			},
			data:{
				key:{
				    childs:"isChilds",
				    name:"name",
				    title:"name"
				},
				simpleDate:{
				 enable:true,
			     idKey:"id",
		         pIdKey:"pId",
	             rootPid:0
				}
			},
			callback: {
				beforeAsync: beforeAsync
			}
		};

		function filter(treeId, parentNode, childNodes) {
			if (!childNodes) return null;
			for (var i=0, l=childNodes.length; i<l; i++) {
				childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
			}
			return childNodes;
		}
		function beforeAsync(treeId, treeNode) {
			return treeNode ? treeNode.level < 5 : true;
		}
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting);
		});
	</SCRIPT>
	<style type="text/css">
.ztree li button.add {margin-left:2px; margin-right: -1px; background-position:-112px 0; vertical-align:top; *vertical-align:middle}
.ztree li button.add2 {margin-left:2px; margin-right: -1px; background-position:-112px -16px; vertical-align:top; *vertical-align:middle}
	</style>
</HEAD>

<BODY>
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</BODY>
</HTML>

FF下看到的返回数据:

 [
{"id":1,"name":"地板","pId":0,"open":true,"isChilds":0},
{"id":101,"name":"菲林格尔地板V322","pId":1,"open":false,"isChilds":1},
{"id":102,"name":"菲林格尔地板","pId":1,"open":false,"isChilds":1},
{"id":103,"name":"菲林格尔地板-005","pId":1,"open":false,"isChilds":1},
{"id":104,"name":"菲林格尔地板-007","pId":1,"open":false,"isChilds":1},
{"id":105,"name":"菲林格尔地板V566","pId":1,"open":false,"isChilds":1},
{"id":2,"name":"地毯","pId":0,"open":true,"isChilds":0},
{"id":3,"name":"瓷砖","pId":0,"open":true,"isChilds":0},
{"id":4,"name":"洁具","pId":0,"open":true,"isChilds":0},
{"id":5,"name":"灯具","pId":0,"open":true,"isChilds":0}
]

不知道为什么总是在同一级菜单下显示应该是第二个到第六个是第一个的子菜单的

84 楼 zTreeAPI 2011-11-29 17:37

k_kid9157 写道

....

的确是低级错误！你需要更加细心了！请记住 js 也是区分大小写的！你定义的是 "pId" 但是你的数据中用的是"PId"

83 楼 k_kid9157 2011-11-29 09:15

代码贴错了应该是

		data : {
			key : {
				childs : "leaf",
				name : "title",
				title : "url"
			},
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "pId",
				rootPId : -1
			}
		},

82 楼 k_kid9157 2011-11-29 09:12

1、css、js文件的路径正确
2、用IE8自带的调试工具，网页没有报错
3、数据格式是否正确？

按照您的提示，我认为问题一定是出在了数据格式上。

我的数据格式如下：
[{"PId":-1,"id":1,"leaf":0,"title":"根节点","url":null},......略]

其中：
PId是父节点编号，id是节点编号，leaf标记是否是叶子节点，title是节点标题，url是提示信息。
在代码中，我用

		data : {
			key : {
				childs : "leaf",
				name : "title",
				title : "url"
			},
			simpleData : {
				enable : true,
				zNodesKey : "id",
				zNodesParentKey : "pId",
				rootPId : -1
			}
		},

指出了上述的信息。
麻烦您看看哪里有问题？
这应该是个低级错误，但也请您再帮我一下！

81 楼 zTreeAPI 2011-11-28 17:00

k_kid9157 写道

略作修改，运行起来不报错了；
ajax函数也表示查询到了初始化根节点需要的数据，可是网页上一片空白，没有正确显示出树，晕！....

1、检查你的css、js 文件的相对路径是否正确。

2、用调试工具调试页面，查看是否有js 报错。

3、检查你server端异步加载得到的数据格式是否正确。

4、我用异步加载的Demo 按照你的code进行，完全正常。

80 楼 k_kid9157 2011-11-28 11:19

略作修改，运行起来不报错了；
ajax函数也表示查询到了初始化根节点需要的数据，可是网页上一片空白，没有正确显示出树，晕！

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>tree3 zTree v3.0</title>
<link rel="stylesheet" href="../JQueryzTreev3.0beta/css/demo.css"
	type="text/css" />
<link rel="stylesheet"
	href="../JQueryzTreev3.0beta/css/zTreeStyle/zTreeStyle.css"
	type="text/css" />
<script type="text/javascript" src="../jsLib/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../jsLib/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript"
	src="../jsLib/jquery.ztree.excheck-3.0.js"></script>
<script type="text/javascript" src="../jsLib/jquery.ztree.exdit-3.0.js"></script>
<script language="JavaScript">
	var zTree;
	var zNodes;
	
	var setting = {
		check : {
			enable : false
		},

		view : {
			showIcon : false,
			dblClickExpand : false
		},

		async : {
			enable : false,
			type : "post",
			dataType : "text",
			url : "jsonData.action",
			error : function(){
				alert('初始化失败');
			},
			success : function(result){
				zNodes = result;
			}
		},

		data : {
			simpleData : {
				enable : true,
				zNodesKey : "id",
				zNodesParentKey : "parentId",
				rootPId : -1
			}
		},
		
		edit: {
			enable: true
		},
		
		callback: {
			beforeDrag: beforeDrag
		}
	}
	
	function beforeDrag(treeId, treeNodes) {
		return false;
	}
	
 	$.ajax({
		url : "jsonData.action",
		dataType : 'text',
		success : function(result) {
			zNodes = result;
			alert(zNodes);
		}
	});

	//页面加载时自动执行的方法
	$(document).ready(function() {
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		zTree = $.fn.zTree.getZTreeObj("treeDemo");
	});
</script>
</head>

<body>
	<h2>zTree v3.0</h2>
	<ul id="treeDemo" class="ztree"></ul>
</body>
</html>

79 楼 k_kid9157 2011-11-28 09:42

消息: 'undefined' 为空或不是对象
请问这个错误是什么意思？我没有查到有用的资料。

78 楼 k_kid9157 2011-11-28 09:13

zTreeAPI 写道

k_kid9157 写道

。。。省略

你的代码
$.ajax({
    url: "jsonData.action",
    dataType: 'text',
    success: function(result) {
        alert(result);
    },
});
success 的 } 后面多了一个逗号，删掉后，我测试一切正常

周末有事外出，今天才看到您的回复。
在贴吧也看到您对大家的帮助，对您的热情深表感谢！
按照您的建议，我删掉了那个逗号，还是报错不能正常运行。
不知是什么问题啊。。。

77 楼 zTreeAPI 2011-11-25 15:44

k_kid9157 写道

。。。省略

76 楼 k_kid9157 2011-11-25 15:28

项目需要用SSH+JQuery创建动态树
运行报错

“网页错误详细信息

用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; MDDR; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.3; InfoPath.2)
时间戳: Fri, 25 Nov 2011 07:25:51 UTC

消息: 'undefined' 为空或不是对象
行: 809
字符: 96
代码: 0
URI: http://localhost:8080/2011.11.17/jsLib/jquery.ztree.core-3.0.js

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>tree3 zTree v3.0</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../JQueryzTreev3.0beta/css/demo.css" type="text/css">
<link rel="stylesheet" href="../JQueryzTreev3.0beta/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../jsLib/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../jsLib/jquery.ztree.core-3.0.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var setting = {
	check : {
		enable : false
	},
	
	view : {
		showIcon : false,
		dblClickExpand : false
	},
	
	async : {
		enable: true,
		url: "jsonData.action",
		dataType: "text",
		type: "post"
	},

	data : {
		simpleData : {
			enable: true,
			idKey: "id",
			pIdKey: "parentId",
			rootPId: -1
		}
	}
}

var zTree;
	//页面加载时自动执行的方法
	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting );
		zTree = $.fn.zTree.getZTreeObj("treeDemo");
	});

$.ajax({
	url: "jsonData.action",
	dataType: 'text',
	success: function(result) {
		alert(result);
	},
}); 
</SCRIPT>
</HEAD>

<BODY>
	<h2>tree3.html</h2>
	<p>zTree v3.0</p>
	<ul id="treeDemo" class="ztree"></ul>
</BODY>
</HTML>

感谢各位！

75 楼 yu505656166 2011-10-31 09:35

我在指定的节点加了checkbox 如果树是未展开的状态2级节点后面有3个checkbox就是对的，但是树一展开那3个 checkbox全都跑到下面去了是怎么回事啊.

[img][/img]

74 楼 tianxiawuren 2011-10-27 16:58

var setting = {
		check: {
			enable: true, 	//是否显示复选框(true:显示,false:不显示)
			chkboxType: { "Y": "ps", "N": "ps" }
		},
		view: {
			showIcon: false,
			dblClickExpand: false
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "pId"
			}
		},
		async: {
			enable: true,
			otherParam: { "model.basic" : "1" },
			type: "post",
			url:"catalogue!showTree.action"
		},
		callback: {
			onRightClick: OnRightClick,
			beforeRename: beforeRename,
			onRename: renameTreeNode
		}
	};
var zTree,rMenu;
	//页面加载时自动执行方法
	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting);
		zTree = $.fn.zTree.getZTreeObj("treeDemo");
		rMenu = $("#rMenu");
		//$("#m_copy").bind("click", copyTreeNode);
	});
/**
	 * 查询所有节点
	 * @return
	 */
	public String showTree(){
		try
		{
			User user = (User)((Map)getSession().getAttribute("userMap")).get("user");
			Map<String, String> param = new HashMap<String, String>();
			
			if (getModel().getBasic()==0) {
				if (user.getAdmin()) {
					param.put("basic", "0");
				} else {
					param.put("basic", getModel().getBasic().toString());
					param.put("operateuser", user.getId().toString());
				}
				
			}
			
			String jsonStore = mgr.getTree(1, param);
			getResponse().setContentType("text/html;charset=utf-8");
			getResponse().getWriter().print(jsonStore);
			getResponse().getWriter().flush();
		} catch (IOException e)
		{
			logger.error(e);
		}
		return NONE;
	}

为什么数据提交之后，页面就刷新的呢？AJAX不是异步的吗？页面不刷新的吗？

73 楼 zTreeAPI 2011-10-18 18:55

tianxiawuren 写道

上面那个问题已解决，请教高手

怎么让它勾选模板一节点下面的节点时，让模板二下面的节点不勾选？

是你的规则限定吗？选了模板一就不能选模板二？那么可以利用beforeCheck 方法自行做校验规则的验证

72 楼 tianxiawuren 2011-10-17 14:59

上面那个问题已解决，请教高手

怎么让它勾选模板一节点下面的节点时，让模板二下面的节点不勾选？

« 上一页 1 2 3 4 5 下一页 »

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

JQuery Tree插件——zTree v3.0 正式版发布

在大家的帮助和关注下，今天 zTree v3.0 正式版可以发布了。 v3.0 正式版在功能、性能方便比 v2.x 版本都有了很多改善，尤其是性能方面。用过 v3.0 beta 版本的朋友应该已经体验到了。但还要再提...

JQuery Tree插件——zTree v3.5.13 版发布

近期由于工作繁忙，所以一直没有发布 v3.5.13 的正式版，只是在 github 上不断更新每次修改后的 beta 版。不过考虑到 2014年开始 google code 将不在支持创建新文件的下载功能，希望大家也都逐渐习惯使用 github ...

JQuery Tree插件——zTree v2.6正式版发布

JQuery Tree插件——zTree v2.6正式版发布！发表于2011-06-01 10:48| 4748次阅读| 来源开源中国社区| 9 条评论| 作者dyhunter 浏览器jquery插件treejqueryztree 摘要：JQuery Tree插件——zTre

jQuery Tree插件-zTree v3.0 beta发布

http://developer.51cto.com/art/201109/289294.htm zTree v3.0 beta(JQuery Tree 插件)发布了!该版本全面调整了js & css 架构，提供了更好的兼容性和易开发性，性能得到了极大提升。 AD

JQuery Tree插件——zTree v2.6 正式版发布(ITeye)

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

zTree v3.0 beta Bug 汇总

同时也在努力争取正式版时推出英文版的 Demo 和 API，所以专门开篇文章，用来发布 v3.0 beta 中已经发现的 bug 和解决方案，帮助这期间遇到 bug 的朋友解决问题。在发布正式版之前，查看 v3.0 beta 的改动计划...

JQUERY树型插件ZTREE小例子

一个做.NET WEB开发的朋友介绍了ZTREE，它是基于JQUERY库开发的树型控件。于是去官方下了一个开发包，看了看DEMO，觉得效果很不错，自己也做了个小例子，也许不太成形，效果倒是展现出来了，把使用方法记录下来，和...

JQuery Tree插件

JQuery Tree插件——zTree v2.6正式版发布！zTree v2.6正式版对比v2.6.beta来说修改的地方不多，主要是修改了几个Bug。另外对于check功能做了一定完善，希望使用checkbox或radio，但部分节点不显示checkbox/radio的...

JQUERY树型插件ZTREE和插件tmpl()

JQUERY树型插件ZTREE小例子一个做.NET WEB开发的朋友介绍了ZTREE，它是基于jQuery库开发的树型控件。于是去官方下了一个开发包，看了看DEMO，觉得效果很不错，自己也做了个小例子，也许不太成形，效果倒是展现出来...

ztree树形根据最底层子节点往上遍历案例

<!... ...<link rel="stylesheet" type="text/css" href="http://libs.cdnjs.net/zTree.v3/3.5.12-beta.2/css/zTreeStyle/zTreeStyle.css"/> ...

jquery插件编写和使用

插件描述：功能强大的Tree控件. 说明： 12320项目原本使用的jquery.treeview插件，此...一、在ThinksKing的Plugins里面找到JQuery zTree v3.0 beta，将Js和Css添加到项目中。二、使用zTree: 1.1 添加...

sblim-gather-provider-2.2.8-9.el7.x64-86.rpm.tar.gz

1、文件内容：sblim-gather-provider-2.2.8-9.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/sblim-gather-provider-2.2.8-9.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持：公众号禅静编程坊

基于pringboot框架的图书进销存管理系统的设计与实现（Java项目编程实战+完整源码+毕设文档+sql文件+学习练手好项目）.zip

本图书进销存管理系统管理员功能有个人中心，用户管理，图书类型管理，进货订单管理，商品退货管理，批销订单管理，图书信息管理，客户信息管理，供应商管理，库存分析管理，收入金额管理，应收金额管理，我的收藏管理。用户功能有个人中心，图书类型管理，进货订单管理，商品退货管理，批销订单管理，图书信息管理，客户信息管理，供应商管理，库存分析管理，收入金额管理，应收金额管理。因而具有一定的实用性。本站是一个B/S模式系统，采用Spring Boot框架，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得图书进销存管理系统管理工作系统化、规范化。本系统的使用使管理人员从繁重的工作中解脱出来，实现无纸化办公，能够有效的提高图书进销存管理系统管理效率。关键词：图书进销存管理系统；Spring Boot框架；MYSQL数据库

2024中国在人工智能领域的创新能力如何研究报告.pdf

安全生产_人脸识别_移动目标跟踪_智能管控平台技术实现与应用_1741777778.zip

人脸识别项目实战

人脸识别_TF2_Facenet_训练预测应用仓库_1741778670.zip

人脸识别项目实战

安全人脸识别_对抗攻击_多模型集成_减少扰动_竞赛方案_Ne_1741779504.zip

人脸识别项目实战

Python实现基于CEEMDAN完全自适应噪声集合经验模态分解时间序列信号分解的详细项目实例（含完整的程序，GUI设计和代码详解）

内容概要：本文档详细介绍了基于CEEMDAN（完全自适应噪声集合经验模态分解）的方法实现时间序列信号分解的具体项目。文中涵盖项目背景介绍、主要目标、面临的挑战及解决方案、技术创新点、应用领域等多方面内容。项目通过多阶段流程（数据准备、模型设计与构建、性能评估、UI设计），并融入多项关键技术手段（自适应噪声引入、并行计算、机器学习优化等）以提高非线性非平稳信号的分析质量。同时，该文档包含详细的模型架构描述和丰富的代码样例（Python代码），有助于开发者直接参考与复用。适合人群：具有时间序列分析基础的科研工作者、高校教师与研究生，从事信号处理工作的工程技术人员，或致力于数据科学研究的从业人员。使用场景及目标：此项目可供那些面临时间序列数据中噪声问题的人群使用，尤其适用于需从含有随机噪音的真实世界信号里提取有意义成分的研究者。具体场景包括但不限于金融市场趋势预测、设备故障预警、医疗健康监控以及环境质量变动跟踪等，旨在提供一种高效的信号分离和分析工具，辅助专业人士进行精准判断和支持决策。其他说明：本文档不仅限于理论讲解和技术演示，更着眼于实际工程项目落地应用，强调软硬件资源配置、系统稳定性测试等方面的细节考量。通过完善的代码实现说明以及GUI界面设计指南，使读者能够全面理解整个项目的开发流程，同时也鼓励后续研究者基于已有成果继续创新拓展，探索更多的改进空间与发展机遇。此外，针对未来可能遇到的各种情况，提出了诸如模型自我调整、多模态数据融合等发展方向，为长期发展提供了思路指导。

37顶1踩