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

资讯频道 → Web前端

37顶
1踩

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

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 下一页 »

发表评论

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

37顶1踩