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

 

  这次 zTree v3.3 继续修改一些细节 bug，同时尝试推出 exhide 扩展包，主要是为了实现一些扩展功能。 

  

  因为隐藏节点的功能 与 编辑功能（尤其是拖拽操作）结合使用的时候势必会产生许多需求方面的细节问题，因此 exhide 扩展请不要与 exedit 功能同时使用。

  针对 隐藏节点 与 checkbox / radio 功能同时使用时的策略如下：

 

1.   被隐藏的节点（包括其全部子节点）不会与父节点的勾选状态有任何关联（包括半勾选状态），即相当于被删除，除非被重新显示。
2.   isFirstNode 和 isLastNode 属性只针对显示的节点处理，被隐藏的节点这两个属性都被设置为 false
3.   隐藏节点 不会影响 getPreNode() 和 getNextNode() 方法

   这应该是能够满足大部分需求，如果你的实际需求的确与这个策略不同，那么请根据实际情况去修改 exhide 即可。

  请注意：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.3 的修改记录：

   * 【增加】扩展库 exhide -- 节点隐藏功能

   * 【修改】getNodesByFilter 方法，添加 invokeParam 自定义参数

   * 【修改】拖拽中测试代码未删除，导致出现黄颜色的 iframe 遮罩层的 bug

   * 【修改】延迟加载方法 对于使用 expandAll 进行全部展开时，导致 onNodeCreated 回调 和 addDiyDom 方法触发过早的 bug

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

    抱歉，刚发现这个bug 被漏掉了，下次版本时进行修正吧。

   * 【修改】使用 moveNode 移动尚未生成 DOM 的节点时，视图会出现异常的 bug

   * 【修改】删除节点后，相关节点的 isFirstNode 属性未重置的 bug

   * 【修改】getPreNode(),getNextNode() 方法在对于特殊情况时计算错误的 bug

   * 【修改】设置 title 之后，如果重新将 title 内容设置为空后，会导致无法更新 title 的 bug

   * 【修改】针对 setting.check.chkStyle=="radio" && setting.check.radioType=="all" 的情况时，getTreeCheckedNodes方法优化，找到一个结果就 break

   * 【修改】zTreeObj.getCheckedNodes(false) 在 radioType = "all" 时计算错误的 bug

   * 【修改】完善 API 中 beforeDrop / onDrop 的关于 treeId 的说明

 

评论

66 楼 jackyrong 2012-09-02  

已解决，谢谢

65 楼 zTreeAPI 2012-09-02  

jackyrong 写道

..重新COPY onclick事件的代码呀

function onClick() {......}
setting.callback.onClick = onClick;

上面是你初始化zTree 时做的定义； 当你用js 代码 selectNode 之后，你可以用js 执行 onClick 这个 function 就可以了
例如： zTreeObj.selectNode(treeNode);
onClick(...);

64 楼 zTreeAPI 2012-09-02  

biner 写道

楼主能否把样式不单独加载啊
比如这样:
<script type='text/javascript' src='js/jquery.ztree.core-3.3.js?skin=default'></script>

你这个相当于把 css 或 js 做成动态发布了。。。需要你自己加工一下，满足你自己的需求就可以了吧。

63 楼 jackyrong 2012-09-02  

我的情况是，比如一颗树在左边，对应的CRUD界面在右边（现在我是把树的所有结点和每个结点的对应详细数据，以JSON形式一次加载的，所以在点树的某个结点时，右边的表格会自动加载结点的详细信息），那么比如修改树中的某个结点后，当重新架载页面时，会树自动展开到刚才修改的结点，并且同时激发onclick事件，这个应该如何做呢？我现在是这样：

$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, treeNodes);
				var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes = treeObj.getNodesByParam("tId", "treeDemo_30", null);
				var nodes1 = treeObj.getNodesByParam("id", "pos_72", null);
				if (nodes.length>0) {
					alert("ok");
	treeObj.expandNode(nodes[0], true, true, true);
		treeObj.selectNode(nodes1[0]).onClick();

  上面已经可以实现重新加载时，默认选中修改过的结点（展开到这个层次），但我期望时，能同事默认调用onclick事件（onclick事件的方法已经写好的了），但我不想又在ready方法中，重新COPY onclick事件的代码呀

62 楼 jackyrong 2012-08-31  

HI,想请教下，有什么办法可以实现，在ZTREE中当比如在树中点某个结点时，同步AJAX在右边显示某个结点的详细信息，然后修改这些信息后，如果更新后，要求左边的树继续展开
到所修改的某个结点的树的层次，请问有什么本身ZTREE设置的方法能实现么？

61 楼 biner 2012-08-31  

楼主能否把样式不单独加载啊
比如这样:
<script type='text/javascript' src='js/jquery.ztree.core-3.3.js?skin=default'></script>

60 楼 zTreeAPI 2012-08-31  

foxinmy 写道

你好,我又来问啦,请问有没有树形build完成的回调函数,就有点类似于onAsyncSuccess,
是这样的,我第一次是异步加载的,数据量较大,加载完成后我在onAsyncSuccess函数里面用一个全局变量保存下来,然后下次我直接init(zNodes),现在貌似不能马上获取到zTree对象里面的nodes,不知是不是数据量大的缘故,我的数据量在几百条左右.

抱歉，目前没有这种设计，但你提出的这个问题是非常合理的，我正在构想下一个大版本的结构调整。 现在你只能是利用 onAsyncSuccess 回调来得到异步加载结束的事件，因为这时候节点已经加载完毕了。

59 楼 foxinmy 2012-08-30  

你好,我又来问啦,请问有没有树形build完成的回调函数,就有点类似于onAsyncSuccess,
是这样的,我第一次是异步加载的,数据量较大,加载完成后我在onAsyncSuccess函数里面用一个全局变量保存下来,然后下次我直接init(zNodes),现在貌似不能马上获取到zTree对象里面的nodes,不知是不是数据量大的缘故,我的数据量在几百条左右.

58 楼 zTreeAPI 2012-08-29  

foxinmy 写道

zTreeAPI 写道

foxinmy 写道

....希望能解鄙人的疑惑,谢谢~

补充一下， 另外请检查是否浏览器兼容问题？

经过验证是我的代码有点问题,还有一个问题请教下,比如我init后马上调用
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
貌似得不到对象,获取的数据(nodes)也是空的

init 后应该是能够立刻得到 zTree 对象的，其实init 方法本身也会返回 zTree 对象； 另外如果你用了异步加载，那么一定要在 onAsyncSuccess 中获取数据，因为这时候异步加载才完毕的。

57 楼 foxinmy 2012-08-29  

zTreeAPI 写道

foxinmy 写道

....希望能解鄙人的疑惑,谢谢~

补充一下， 另外请检查是否浏览器兼容问题？

经过验证是我的代码有点问题,还有一个问题请教下,比如我init后马上调用
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
貌似得不到对象,获取的数据(nodes)也是空的

56 楼 zTreeAPI 2012-08-29  

foxinmy 写道

....希望能解鄙人的疑惑,谢谢~

补充一下， 另外请检查是否浏览器兼容问题？

55 楼 zTreeAPI 2012-08-29  

foxinmy 写道

你好,工具很好用,有一疑问,当我这样选中某个节点时,样式似乎有点问题

var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var obj = zTree.getNodeByParam("id", goodsCategoryValue.val(), null);
if(obj){
  zTree.selectNode(obj,false);
}else{
  zTree.cancelSelectedNode();
}

这是未用上面代码的正常图

这是用了上面代码后的图



希望能解鄙人的疑惑,谢谢~

这个有点儿奇怪，按道理 selectNode 的效果应该是和 鼠标点上去完全一样的呀。 代码也是同样的一个方法。 请检查一下是否css 异常？ 直接用我提供的Demo 这么使用是否会出现异常？ 另外如果的确发现问题，请把 代码做成 demo 那种 html 发给我，以便于查找问题，谢谢。

54 楼 foxinmy 2012-08-29  

你好,工具很好用,有一疑问,当我这样选中某个节点时,样式似乎有点问题

var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var obj = zTree.getNodeByParam("id", goodsCategoryValue.val(), null);
if(obj){
  zTree.selectNode(obj,false);
}else{
  zTree.cancelSelectedNode();
}

这是未用上面代码的正常图

这是用了上面代码后的图



希望能解鄙人的疑惑,谢谢~

53 楼 zTreeAPI 2012-08-21  

64595711 写道

id和pid 为32位的uuid字符串 ztree无法支持‘’格式！！！

zTree支持 字符串格式的 id、pId，单请务必看清楚，默认的是 pId 不是 pid

52 楼 64595711 2012-08-21  

   var zNodes =[
        { id:'1', pid:'0', name:"父节点1 - 展开", open:true, isParent:true},
        { id:'11', pid:'1', name:"父节点11 - 折叠"},
        { id:'111', pid:'11', name:"叶子节点111"},
        { id:'112', pid:'11', name:"叶子节点112"},
        { id:'113', pid:'11', name:"叶子节点113"},
        { id:'114', pid:'11', name:"叶子节点114"},
        { id:'12', pid:'1', name:"父节点12 - 折叠"},
        { id:'121', pid:'12', name:"叶子节点121"},
        { id:'122', pid:'12', name:"叶子节点122"},
        { id:'123', pid:'12', name:"叶子节点123"},
        { id:'124', pid:'12', name:"叶子节点124"},
        { id:'13', pid:'1', name:"父节点13 - 没有子节点", isParent:true},
        { id:'2', pid:'0', name:"父节点2 - 折叠"},
        { id:'21', pid:'2', name:"父节点21 - 展开", open:true},
        { id:'211', pid:'21', name:"叶子节点211"},
        { id:'212', pid:'21', name:"叶子节点212"},
        { id:'213', pid:'21', name:"叶子节点213"},
        { id:'214', pid:'21', name:"叶子节点214"},
        { id:'22', pid:'2', name:"父节点22 - 折叠"},
        { id:'221', pid:'22', name:"叶子节点221"},
        { id:'222', pid:'22', name:"叶子节点222"},
        { id:'223', pid:'22', name:"叶子节点223"},
        { id:'224', pid:'22', name:"叶子节点224"},
        { id:'23', pid:'2', name:"父节点23 - 折叠"},
        { id:'231', pid:'23', name:"叶子节点231"},
        { id:'232', pid:'23', name:"叶子节点232"},
        { id:'233', pid:'23', name:"叶子节点233"},
        { id:'234', pid:'23', name:"叶子节点234"},
        { id:'3', pid:'0', name:"父节点3 - 没有子节点", isParent:true}
    ]; 数据父子目录关系无法显示！！！！！求解决！！！！

51 楼 64595711 2012-08-21  

id和pid 为32位的uuid字符串 ztree无法支持‘’格式！！！

50 楼 zTreeAPI 2012-08-20  

nuoheng 写道

简单的说在 .js 文件里面赋值，不行

请区分 json 对象 和 json 格式的 字符串

49 楼 nuoheng 2012-08-20  

简单的说在 .js 文件里面赋值，不行

48 楼 nuoheng 2012-08-20  

{"id":0, "pId":0, "name":"大分类", "open":true},{"id":1, "pId":0, "name":"系统管理", "open":true ,"checked":true},{"id":9, "pId":0, "name":"财务管理", "open":true ,"checked":true}

kjj 写道

nuoheng 写道

kjj 写道

还有一个原因就是你组装的json语法格式不正确,在firebug中调试一下!!

我保证，格式一定OK，因为在那 aa.val 里面复制过去是可以的

现在是在js里面赋值就不行，jsp或servlet赋值就可以

用$.get获取一下,然后挨个把你的list用js打印到页面试试!!

{"id":0, "pId":0, "name":"大分类", "open":true},{"id":1, "pId":0, "name":"系统管理", "open":true ,"checked":true},{"id":9, "pId":0, "name":"财务管理", "open":true ,"checked":true}

下面就说过，这就是列出来数据。。。

47 楼 kjj 2012-08-18  

nuoheng 写道

kjj 写道

还有一个原因就是你组装的json语法格式不正确,在firebug中调试一下!!

我保证，格式一定OK，因为在那 aa.val 里面复制过去是可以的

现在是在js里面赋值就不行，jsp或servlet赋值就可以

用$.get获取一下,然后挨个把你的list用js打印到页面试试!!