资讯频道 → Web前端
阅读更多

37顶
1踩

Web前端

原创新闻 JQuery Tree插件——zTree v3.0 beta 发布

2011-09-09 11:29 by 正式记者 zTreeAPI 评论(91) 有25164人浏览
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
var setting = {
data: {
simpleData: {
enable: true
},key: {
title:"t"
}
},

callback: {
beforeClick: beforeClick
},
view: {
fontCss: getFontCss,
nameIsHTML: true
}
};
$(function() {
     var treeNodes;
     var treeNodesFile;
     $.ajax({ 
     async : false, 
     cache:false, 
     type: 'POST', 
     contentType:"application/json",
     url: "<%=basePath%>pages/ajaxChangeTree.do//请求的action路径 
     error: function () {//请求失败处理函数 
     alert('请求失败'); 
     }, 
     success:function(data){ //请求成功后处理函数。   
     treeNodes = eval(data);
     allTreeNode = treeNodes;
     } 
     });
  
     $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
     var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.expandAll(false);
       });
json大概是这样的
[{"id":"00000000-0000-0000-0000-000000000000CCE7AED4","open":"false","pId":-1,"t":"测试1","name":"测试1"},
{"id":"X5gAAAAKKazM567U","open":"false","pId":"00000000-0000-0000-0000-000000000000CCE7AED4","t":"测试2","name":"测试2"},
{"id":"a65iOpeaSdWvnJHurLpv+cznrtQ=","open":"false","pId":"00000000-0000-0000-0000-000000000000CCE7AED4","t":"测试3","name":"测试3"},
{"id":"X5gAAAANsNvM567U","open":"false","pId":"00000000-0000-0000-0000-000000000000CCE7AED4","t":"测试4","name":"测试4"}]
有2000左右的节点，速度非常慢，IE很容易崩溃，请高手解惑
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 写道
。。。省略

你的代码
$.ajax({ 
    url: "jsonData.action", 
    dataType: 'text', 
    success: function(result) { 
        alert(result); 
    }, 
}); 
success 的 } 后面多了一个逗号，删掉后，我测试一切正常
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
上面那个问题已解决，请教高手

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

发表评论

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

相关推荐

Global site tag (gtag.js) - Google Analytics