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

 

  这次 v3.4 主要还是修改一些细节 bug，同时新增了 destroy 方法用于一些特殊需求中执行树的销毁操作，并且这次在制作 destroy 方法的时候无意间发现了 IE9 的内存泄漏问题，并且针对这个问题对 zTree 内部的 zId 和 节点cache的存储方式 进行了适当修改，以减少 IE9 的内存泄漏问题。

  请注意：jquery.ztree.all 文件中 仅仅包含 core、excheck、exedit 这三个 js 包； 对于 exhide 以及以后推出的 扩展包都不会包含在 jquery.ztree.all 文件中。

  如果需要使用，请自行添加。

 

 

  在线操作演示：http://www.ztree.me/v3/demo.php#_101

  快速下载地址：http://code.google.com/p/jquerytree/downloads/list

下面是 v3.4 的修改记录：

   * 【增加】Demo —— OutLook 样式的左侧菜单 (http://www.ztree.me/v3/demo.php#_513)

   * 【增加】清空 zTree 的方法 $.fn.zTree.destory(treeId) & zTree.destory()

   * 【修改】core核心文件内 _eventProxy 方法中获取 tId 的方法，提高 DOM 的灵活性

   * 【修改】初始化时 多层父节点的 checkbox 半选状态计算错误的 bug

   * 【修改】同时选中父、子节点后，利用 getSelectedNodes 获取选中节点并利用 removeNode 删除时报错的 bug

   * 【修改】treeNode.chkDisabled / nocheck 属性，支持字符串格式的 "false"/"true"

   * 【修改】异步加载模式下无法利用 server 返回 xml 并且 在 dataFilter 中继续处理的 bug

   * 【修改】title 只允许设置为 string 类型值的问题。 修正后允许设置为 number 类型的值

   * 【修改】zId 计数规则 & Cache 保存，减少 IE9 的 bug 造成的内存泄漏

   * 【修改】API 页面搜索功能导致 IE 崩溃的 bug

 

评论

28 楼 jackyrong 2012-10-11  

HI,想问下，加入用simpledata的形式，不用json的话，
能否实现如下的结构：

attachment:"
{attachmentId:1,attachmentname:"f6e71004-8487-41f7-ac18-b6fac9860753.pdf"},

{attachmentId:2,attachmentname:"1e40868d-0d7a-41f4-8018-9c2f29ad716c.pdf"}

"

?就是一个结点中，嵌套了多个？

27 楼 jackyrong 2012-09-29  

是的，我后来发现了！谢谢，处理办法为，根据
check_count.html(demo中的例子）

	function onCheck(e, treeId, treeNode) {
			count();
				//获得当前结点的父结点
		var halfCheck = treeNode.getParentNode().getCheckStatus();
   

	//alert(halfCheck.half);
	   var fullCheck=treeNode.getParentNode().checked;
		if (halfCheck.half==false&&halfCheck.checked==true)
		{
		alert("父亲结点被勾选"+treeNode.getParentNode().name);
		}
			
		}

26 楼 zTreeAPI 2012-09-29  

jackyrong 写道

请教下一个ztree中，checkbox的问题，比如想实现如下效果：
开发部这个结点下，有A,B,C三个人，A,B,C三个人前都有checkbox，当
分别勾选a,b,c三个人的后，并且点保存，这时候，因为全选了开发部下的三个人了，所以这个时候，要返回值是“开发部”这个值，但如果只选a,b两个人，则不用返回
开发部这个值，因为不是全选；我的思路是这样，但发现有问题：

1） 在开发部前面加一个全选的checkbox，当点这个checkbox后，则自然全选了下面的,A,B,C三个人了，这个时候很好办；但问题是，好像加入全选后，假如用户又去掉b的这个人前面的checkbox，则开发部这个前面的checkbox好像不会自动去掉。


2） 我目前是在oncheck事件中判断的，问题化归为：如果判断某个结点下的所有子结点已经勾选？如果都勾选，则返回其父结点的值。如果用javascript+ztree本身的API去实现，有什么思路么？

首先你可以利用 半勾选状态去判断，默认情况下只有子节点全部取消勾选后才会自动取消父节点的勾选。 参考：treeNode.getCheckStatus

25 楼 jackyrong 2012-09-28  

请教下一个ztree中，checkbox的问题，比如想实现如下效果：
开发部这个结点下，有A,B,C三个人，A,B,C三个人前都有checkbox，当
分别勾选a,b,c三个人的后，并且点保存，这时候，因为全选了开发部下的三个人了，所以这个时候，要返回值是“开发部”这个值，但如果只选a,b两个人，则不用返回
开发部这个值，因为不是全选；我的思路是这样，但发现有问题：

1） 在开发部前面加一个全选的checkbox，当点这个checkbox后，则自然全选了下面的,A,B,C三个人了，这个时候很好办；但问题是，好像加入全选后，假如用户又去掉b的这个人前面的checkbox，则开发部这个前面的checkbox好像不会自动去掉。


2） 我目前是在oncheck事件中判断的，问题化归为：如果判断某个结点下的所有子结点已经勾选？如果都勾选，则返回其父结点的值。如果用javascript+ztree本身的API去实现，有什么思路么？

24 楼 zTreeAPI 2012-09-28  

落落的月 写道

请问怎么指定加载菜单的层级？比如菜单json一共三层，我只需要显示一级、二级，不需要三级的，该怎么做啊？

你说的不需要是什么意思？ 完全不显示吗？ 那么只需要不要生成3级的数据就是了

23 楼 落落的月 2012-09-28  

请问怎么指定加载菜单的层级？比如菜单json一共三层，我只需要显示一级、二级，不需要三级的，该怎么做啊？

22 楼 zTreeAPI 2012-09-25  

cngolon 写道

请教个问题：
火狐报：TypeError: $.fn.zTree is undefined [在此错误处中断]
...

请对照 demo 的初始化方式查找错误，调整代码

21 楼 cngolon 2012-09-20  

请教个问题：
火狐报：TypeError: $.fn.zTree is undefined [在此错误处中断]
$.fn.zTree.init($("#tree"), setting, zNodes);//初始化树对象
在IE上提示：$.fn.zTree为空或不是对象，
js的加载顺序：zTreeStyle.css，jquery-1.7.2.min.js，jquery.ztree.core-3.4.js
请指点一下
**********************************************************
$(function(){
//单位树
var setting;
var zNodes =[
{name:"知识帮助导航栏", id:"-1", isParent:true} //初始化一个顶层默认节点
];
setting = {
async: { //异步加载
enable: true,
url: "${path}/callcenter/listNextKN.html",//异步加载URL
autoParam: ["id=0"]//需要传递的参数
},
expandSpeed: ""
};
$.fn.zTree.init($("#tree"), setting, zNodes);//初始化树对象
})

20 楼 zTreeAPI 2012-09-11  

jackyrong 写道

jackyrong 写道

jackyrong 写道

请教下，我的一个异步加载的TREE已经搞好了，但发现一个奇怪的问题，在一个SITEMESH修饰的页面中（一个模板页，由SITEMESH管理），是展开收缩树是沒问题的，但如果
不用SITEMESH修饰，单独的一个页面，一个下拉框（有A,B项目），当点A的时候，树的某个结点的展开和关闭也是沒问题的，但当点B项目下拉时，出现的B树中，发现展开某个结点后，会发现一闪地展开了这个结点下的子结点，但又突然很块地关闭了这些子结点，瞬间变成收缩状态，我的版本是3.1，请问大概会是什么问题？

补充一下，CHROME发现，
468event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

已解决！是FORMVALIDATOR这个不错的插件用到的JQUERY和ZTREE用到的冲突了

19 楼 jackyrong 2012-09-11  

jackyrong 写道

jackyrong 写道

请教下，我的一个异步加载的TREE已经搞好了，但发现一个奇怪的问题，在一个SITEMESH修饰的页面中（一个模板页，由SITEMESH管理），是展开收缩树是沒问题的，但如果
不用SITEMESH修饰，单独的一个页面，一个下拉框（有A,B项目），当点A的时候，树的某个结点的展开和关闭也是沒问题的，但当点B项目下拉时，出现的B树中，发现展开某个结点后，会发现一闪地展开了这个结点下的子结点，但又突然很块地关闭了这些子结点，瞬间变成收缩状态，我的版本是3.1，请问大概会是什么问题？

补充一下，CHROME发现，
468event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

已解决！是FORMVALIDATOR这个不错的插件用到的JQUERY和ZTREE用到的冲突了

18 楼 jackyrong 2012-09-11  

jackyrong 写道

请教下，我的一个异步加载的TREE已经搞好了，但发现一个奇怪的问题，在一个SITEMESH修饰的页面中（一个模板页，由SITEMESH管理），是展开收缩树是沒问题的，但如果
不用SITEMESH修饰，单独的一个页面，一个下拉框（有A,B项目），当点A的时候，树的某个结点的展开和关闭也是沒问题的，但当点B项目下拉时，出现的B树中，发现展开某个结点后，会发现一闪地展开了这个结点下的子结点，但又突然很块地关闭了这些子结点，瞬间变成收缩状态，我的版本是3.1，请问大概会是什么问题？

补充一下，CHROME发现，
468event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

17 楼 jackyrong 2012-09-11  

请教下，我的一个异步加载的TREE已经搞好了，但发现一个奇怪的问题，在一个SITEMESH修饰的页面中（一个模板页，由SITEMESH管理），是展开收缩树是沒问题的，但如果
不用SITEMESH修饰，单独的一个页面，一个下拉框（有A,B项目），当点A的时候，树的某个结点的展开和关闭也是沒问题的，但当点B项目下拉时，出现的B树中，发现展开某个结点后，会发现一闪地展开了这个结点下的子结点，但又突然很块地关闭了这些子结点，瞬间变成收缩状态，我的版本是3.1，请问大概会是什么问题？

16 楼 zTreeAPI 2012-09-09  

jackyrong 写道

...这个时候，onchange事件那个获得B的值得了，但问题沒有传入到后台的ACTION中，
那么想问下，
   otherParam:这个参数中，能否传入动态的值呢？比如只写一次ASYNC的异步加载代码，而otherParam能根据下拉框传入不同的值而设置，我现在是在ONCHANGE和
documentready中，都写了两次ASYNC的代码片段了

otherParam 的确没有扩展支持动态获取，但初始化 zTree 之后可以随意修改这个参数，只需要 zTreeObj.setting.async.otherParam 就可以修改了

15 楼 jackyrong 2012-09-09  

我现在还是用异步加载的方法了，但有个问题，因为页面初始化的时候，
默认是加载下拉框中A值对应的树(下拉框有A,B两个值），这个时候能正确加载了，
但如果我在下拉框中的onchange事件中，指定一个方法，比如：

onchange="change();"

然后change()中：

	
//获得B的值
var measurementname=$("#measurementtypeId").find("option:selected").text();


 async: {  
                enable: true,  
                url:"<%=basePath%>surveyquestionjson/getsurveyquestioncontroltree.action",  
                otherParam:["measurementname", measurementname],  
                dataFilter: filter
            }  
};

  这个时候，onchange事件那个获得B的值得了，但问题沒有传入到后台的ACTION中，
那么想问下，
   otherParam:这个参数中，能否传入动态的值呢？比如只写一次ASYNC的异步加载代码，而otherParam能根据下拉框传入不同的值而设置，我现在是在ONCHANGE和
documentready中，都写了两次ASYNC的代码片段了

14 楼 zTreeAPI 2012-09-08  

jackyrong 写道

补充下，
  用的是ztree 3.1，后台已经正确看到JSON返回的,字符串为：
[{.....},{......} .....],但前台提示：
Uncaught TypeError: Cannot call method 'replace' of undefined

错误代码行为：jquery.ztree.core-3.1.min.js

如果你一定要用自己的ajax 加载 nodes 后，再使用 init 初始化树也是完全木有问题的。
但是目前的问题是你两种方法的结果都是输出的数据无法被正常使用，所以请你检查一下数据所需要的字段是否都满足？ 比如默认的 name 属性？ id属性、pId 属性等。

另外调试代码时建议使用 未压缩的 zTree 版本，这样可以准确知道是哪一行代码出了问题，你也就知道什么原因了

13 楼 jackyrong 2012-09-07  

补充下，
  用的是ztree 3.1，后台已经正确看到JSON返回的,字符串为：
[{.....},{......} .....],但前台提示：
Uncaught TypeError: Cannot call method 'replace' of undefined

错误代码行为：jquery.ztree.core-3.1.min.js

12 楼 jackyrong 2012-09-07  

zTreeAPI 写道

jackyrong 写道

想请教下，比如我的页面中有一个下拉框列表，要求的是，当页面加载时，不显示树，
当用户选择下拉框的比如选项A时，则通过ajax到后台查询A对应的树的结点，显示在前台；
同理查询B的对应的树的结点，显示在前台，那么请教一下，这个功能的实现一定要用到
ZTREE中的异步加载去实现么？我的期望结构代码如下，但没报错，结点不能出来，请指教
...

你这种需求只需要 做一个 异步加载的 tree 即可；每次选择了 下拉框内容以后，就修改 异步加载的参数，init 初始化 zTree 即可！

我现在代码如下

var setting = {
	callback: {
				//beforeClick: beforeClick,
				//onClick: onClick
				
			},

		data: {
		simpleData: {
			enable: true,
			idKey: "id",
			pIdKey: "pId",	
			rootPId: 0
		}
	},
	 async: {  
                enable: true,  
                url:"<%=basePath%>surveyquestionjson/getsurveyquestioncontroltree.action",  
                otherParam:["measurementname", measurementnameinit],  
                dataFilter: filter
            }  
};
				
function filter(treeId, parentNode, childNodes) {
		
			if (childNodes) {
				alert("count"+ childNodes.length);
      for(var i =0; i < childNodes.length; i++) {
        childNodes[i].name += "_filter"; 
		//alert(childNodes[i].name);
      }
    }
	 
	  		return childNodes;
		}

		$(document).ready(function(){
			
			$.fn.zTree.init($("#treeDemo"), setting);
					
				
		});

  用的是ztree 3.1，后台已经正确看到JSON返回的,字符串为：
[{.....},{......} .....],但前台提示：
Uncaught TypeError: Cannot call method 'replace' of undefined

11 楼 jackyrong 2012-09-07  

zTreeAPI 写道

jackyrong 写道

想请教下，比如我的页面中有一个下拉框列表，要求的是，当页面加载时，不显示树，
当用户选择下拉框的比如选项A时，则通过ajax到后台查询A对应的树的结点，显示在前台；
同理查询B的对应的树的结点，显示在前台，那么请教一下，这个功能的实现一定要用到
ZTREE中的异步加载去实现么？我的期望结构代码如下，但没报错，结点不能出来，请指教
...

你这种需求只需要 做一个 异步加载的 tree 即可；每次选择了 下拉框内容以后，就修改 异步加载的参数，init 初始化 zTree 即可！

其实用我之前的方法是不能实现么？

10 楼 zTreeAPI 2012-09-07  

jackyrong 写道

想请教下，比如我的页面中有一个下拉框列表，要求的是，当页面加载时，不显示树，
当用户选择下拉框的比如选项A时，则通过ajax到后台查询A对应的树的结点，显示在前台；
同理查询B的对应的树的结点，显示在前台，那么请教一下，这个功能的实现一定要用到
ZTREE中的异步加载去实现么？我的期望结构代码如下，但没报错，结点不能出来，请指教
...

你这种需求只需要 做一个 异步加载的 tree 即可；每次选择了 下拉框内容以后，就修改 异步加载的参数，init 初始化 zTree 即可！

9 楼 jackyrong 2012-09-07  

想请教下，比如我的页面中有一个下拉框列表，要求的是，当页面加载时，不显示树，
当用户选择下拉框的比如选项A时，则通过ajax到后台查询A对应的树的结点，显示在前台；
同理查询B的对应的树的结点，显示在前台，那么请教一下，这个功能的实现一定要用到
ZTREE中的异步加载去实现么？我的期望结构代码如下，但没报错，结点不能出来，请指教

		function getmeasurementcontrol()
		{
			
var treeNodes;
	var zTreeObj;
var setting = {
	callback: {
				//beforeClick: beforeClick,
				//onClick: onClick
				
			},

		data: {
		simpleData: {
			enable: true,
			idKey: "id",
			pIdKey: "pId",	
			rootPId: 0
		}
	}
};
				var measurementname=$("#measurementtypeId").find("option:selected").text();
				var datastring;
				alert("measurement name"+measurementname);
				$.ajax({
				type:"POST",
				url:"<%=basePath%>surveyquestionjson/getsurveyquestioncontroltree.action",
				data:"measurementname=" + measurementname,
				dataType:"json",
				success:function(data){

				    alert("data is"+data);
				 treeNodes = data; 
				
	alert("treenodes "+treeNodes );
				}	
					
				});
					zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
					
		}

   其中getmeasurementcontrol是当用户点下拉框时的onchange事件