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

    选在情人节发布 zTree v3.1，希望 zTree 能够拥有更多的“粉丝”。

    这次 v3.1 整体改动不大，但因为修改了 css 和 图片，所以升级时需要注意了！

    另外，应不少朋友的要求，我把 API 的页面抽取出来，做了一个简易版的 API 离线文档，方便大家使用。

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

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

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

   * 【增加】ajax 的参数 setting.async.contentType ，让提交参数适用于 json 数据提交 （主要适用于 .Net 的开发）。

   * 【增加】setting.edit.editNameSelectAll, 用于设定编辑节点名称时初次显示 input 后 text 内容为全选

   * 【修改】异步加载 规则，不再仅仅依靠父节点的子节点数来判定，增加内部属性 zAsync，保证默认状态下父节点及时无子节点也只能异步加载一次，除非使用 reAsyncChildNodes 方法强行控制异步加载。

   * 【修改】放大浏览器后导致 界面出现多余连接线的bug （需要更新：icon 图标和 css ）

   * 【修改】在编辑状态，如果节点名超过编辑框宽度，左右键在框内不起作用的bug（IE 6 7 8 出现）

      CSS 中 filter:alpha(opacity=80) 造成的，应该是 ie 的 bug，需要更新 css 文件

   * 【修改】title 设置后，如果属性不存在，则默认为 title 为空，便于数据容错和用户灵活使用

   * 【修改】editName 方法如果针对尚未展开的 父节点，会导致该父节点自动展开的 bug

   * 【修改】title 中存在标签时导致 title 显示异常的bug（例如：蓝色字22%"'<input/>）

 

评论

45 楼 zTreeAPI 2012-02-29  

teng315 写道

....

关键是 $("a[target=navTab]", $p) 这个不区分哪一级的呀，只要满足要求的 DOM 都会获取到的。今天比较忙，请你先自己调试一下，看看你each 中是不是应该找到的全部DOM 集合

44 楼 hanxiaoyidi 2012-02-29  

teng315 写道

zTreeAPI 写道

原来你要捕获点击节点的操作呀，为何要这么操作？？？？ 请看 setting.callback.beforeClick 和 onClick 两个回调函数

不是啊，我要把ztree整合到DWZ富框架中，因为他原来那个左侧树很不喜欢。所以就折腾了这么一晚上。他的左侧树需要扑捉A标签的target="navTab"和rel="tabid"，查看了下他的dwz.ui.js，发现他是用我说的那样方法捕获target="navtab"的，然后会在右侧打开。

teng315 写道

zTreeAPI 写道

原来你要捕获点击节点的操作呀，为何要这么操作？？？？ 请看 setting.callback.beforeClick 和 onClick 两个回调函数

不是啊，我要把ztree整合到DWZ富框架中，因为他原来那个左侧树很不喜欢。所以就折腾了这么一晚上。他的左侧树需要扑捉A标签的target="navTab"和rel="tabid"，查看了下他的dwz.ui.js，发现他是用我说的那样方法捕获target="navtab"的，然后会在右侧打开。

我也在整合dwz和ztree，也碰到了同样的问题，求解。。。

43 楼 teng315 2012-02-29  

// navTab
$("a[target=navTab]", $p).each(function() {
  $(this).click(function(event) {
    var $this = $(this);
    var title = $this.attr("title") || $this.text();
    var tabid = $this.attr("rel") || "_blank";
    var fresh = eval($this.attr("fresh") || "true");
    var external = eval($this.attr("external") || "false");
    var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first"));
    DWZ.debug(url);
    if (!url.isFinishedTm()) {
      alertMsg.error($this.attr("warn") || DWZ.msg("alertSelectMsg"));
      return false;
    }
    navTab.openTab(tabid, url, {
      title: title,
      fresh: fresh,
      external: external
    });

    event.preventDefault();
  });
});

这是他的捕获方法，可以只能扑捉到一级菜单的target="navTab"

42 楼 teng315 2012-02-29  

zTreeAPI 写道

原来你要捕获点击节点的操作呀，为何要这么操作？？？？ 请看 setting.callback.beforeClick 和 onClick 两个回调函数

不是啊，我要把ztree整合到DWZ富框架中，因为他原来那个左侧树很不喜欢。所以就折腾了这么一晚上。他的左侧树需要扑捉A标签的target="navTab"和rel="tabid"，查看了下他的dwz.ui.js，发现他是用我说的那样方法捕获target="navtab"的，然后会在右侧打开。

41 楼 zTreeAPI 2012-02-29  

teng315 写道

zTreeAPI 写道

teng315 写道

请教一下，有多级菜单，我给所有的子节点增加了一个属性：target="navTab"，请问如何用jquery找出带这个属性值的节点？或者可以说是遍历吧？
我用了$("a[target=navTab]", $p).each(function(){}来变量，但找出来的只是一级节点，以下的都没有了，用firebug查看了代码，发现没问题啊！
请指点，初学jquery，有不对的地方请海涵。谢谢啦 

一看时间居然是 临晨四点！！！ 你好厉害呀！！大家互相沟通，交流，不用客气，只不过别有了问题自己不去思考直接问人就是了。
关于你的问题：请你确认是否真的给所有节点都加上了这个 target="navTab" 的标签。 单传看语法，我觉得没什么问题

谢谢回复！
是这样的，我在core/simpleData.html这个例子的叶子节点中加了target="navTab"，然后在$.fn.zTree.init($("#treeDemo"), setting, zNodes);的下面增加了

  $("a[target=navTab]").each(function(){
    $(this).click(function(event){
      alert('点击了我!');
    });
  });

这样问题就来了，点击叶子节点的时候都不会弹出，这是什么问题呢？

原来你要捕获点击节点的操作呀，为何要这么操作？？？？ 请看 setting.callback.beforeClick 和 onClick 两个回调函数

40 楼 teng315 2012-02-29  

zTreeAPI 写道

teng315 写道

请教一下，有多级菜单，我给所有的子节点增加了一个属性：target="navTab"，请问如何用jquery找出带这个属性值的节点？或者可以说是遍历吧？
我用了$("a[target=navTab]", $p).each(function(){}来变量，但找出来的只是一级节点，以下的都没有了，用firebug查看了代码，发现没问题啊！
请指点，初学jquery，有不对的地方请海涵。谢谢啦 

一看时间居然是 临晨四点！！！ 你好厉害呀！！大家互相沟通，交流，不用客气，只不过别有了问题自己不去思考直接问人就是了。
关于你的问题：请你确认是否真的给所有节点都加上了这个 target="navTab" 的标签。 单传看语法，我觉得没什么问题

谢谢回复！
是这样的，我在core/simpleData.html这个例子的叶子节点中加了target="navTab"，然后在$.fn.zTree.init($("#treeDemo"), setting, zNodes);的下面增加了

  $("a[target=navTab]").each(function(){
    $(this).click(function(event){
      alert('点击了我!');
    });
  });

这样问题就来了，点击叶子节点的时候都不会弹出，这是什么问题呢？

39 楼 zTreeAPI 2012-02-29  

teng315 写道

请教一下，有多级菜单，我给所有的子节点增加了一个属性：target="navTab"，请问如何用jquery找出带这个属性值的节点？或者可以说是遍历吧？
我用了$("a[target=navTab]", $p).each(function(){}来变量，但找出来的只是一级节点，以下的都没有了，用firebug查看了代码，发现没问题啊！
请指点，初学jquery，有不对的地方请海涵。谢谢啦 

一看时间居然是 临晨四点！！！ 你好厉害呀！！大家互相沟通，交流，不用客气，只不过别有了问题自己不去思考直接问人就是了。
关于你的问题：请你确认是否真的给所有节点都加上了这个 target="navTab" 的标签。 单传看语法，我觉得没什么问题

38 楼 teng315 2012-02-29  

请教一下，有多级菜单，我给所有的子节点增加了一个属性：target="navTab"，请问如何用jquery找出带这个属性值的节点？或者可以说是遍历吧？
我用了$("a[target=navTab]", $p).each(function(){}来变量，但找出来的只是一级节点，以下的都没有了，用firebug查看了代码，发现没问题啊！
请指点，初学jquery，有不对的地方请海涵。谢谢啦 

37 楼 zTreeAPI 2012-02-25  

_mjhx 写道

不知可否能制作一个 zTableTree ?
如果这套树控件能应用于表格中，将更好！

目前这个 zTree 的HTML结构不太容易制作表格了。。。等 zTree 基本完成后，我会在这套代码的架构上制作 table 的。不过肯定不是最近的事情了。不好意思

36 楼 _mjhx 2012-02-25  

不知可否能制作一个 zTableTree ?
如果这套树控件能应用于表格中，将更好！

35 楼 howgoo 2012-02-23  

感谢提供这么好的树，从2.x到3.0beat，现在又升级了，看来我要升级了。

34 楼 Kidwind 2012-02-20  

zTreeAPI 写道

Kidwind 写道

....异步的优势在于大数据量，如果数据量较大，比如全国的省市县所有数据的话，都会有上百KB，会导致初次加载很慢。相反如果使用异步的话应该会更快，我觉得应该把选择权交给用户会更好，Thanks~

我很同意你的观点“应该把选择权交给用户会更好”，所以 zTree 在制作时是以数据为核心，并且尽量避免干扰用户初始化的数据，同时尽量提供更多的接口以及灵活的配置方案来实现各种需求。

和你探讨这些没有别的意思，也为了再进一步去反思自己的决策，只有不断的在不同意见中思考才能得到更有价值的想法。

对于 zTree 在v3.x中做的延迟加载，就是为了对于 全国省市县这种数据一次性加载提升速度的。 你的例子算是一种折中需求，曾经有朋友提到用 异步加载的方式，但又要用 expandAll 方法一下子展开全部节点。。。这种矛盾就会凸现出来。 这也是为何 zTree 的 expandAll 并没有专门去实现逐步自动异步加载全部节点功能的原因。

至于选择何种实现方式，的确是要在 性能、开发便捷性、合理性上去找到一个平衡点。我不否认，有时候也会出现鱼与熊掌不可兼得的冲突发生，这种时候就只能进行取舍。

就像你觉得 exedit 有点儿庞大一样，我现在也需要认真考虑这个问题，不能随随便便任意添加功能，让 zTree 继续臃肿下去，这是在自杀。 所以我是要在和你探讨的过程中来挖掘这种需求的必要性以及适用范围，并且要考虑是否可以利用已有的功能轻易实现。

所以，如果最终 并没有如你所愿添加这种更加灵活的 callback，也希望你能谅解，但我肯定会继续认真思考这个问题的，还包括那个 addNodes 和 removeNode 的问题。

再次感谢。

感谢作者的用心，每次问问题都能很快得到答复，非常感谢，我提出的方式也只是参考，因为没有对源码进行深入研究，无法从全局性角度去思考，只是根据自己遇到的问题所期望有更合理的解决方法，也相信作者能够综合各方面的考虑，把zTree做得更好。

33 楼 zTreeAPI 2012-02-20  

Kidwind 写道

....异步的优势在于大数据量，如果数据量较大，比如全国的省市县所有数据的话，都会有上百KB，会导致初次加载很慢。相反如果使用异步的话应该会更快，我觉得应该把选择权交给用户会更好，Thanks~

我很同意你的观点“应该把选择权交给用户会更好”，所以 zTree 在制作时是以数据为核心，并且尽量避免干扰用户初始化的数据，同时尽量提供更多的接口以及灵活的配置方案来实现各种需求。

和你探讨这些没有别的意思，也为了再进一步去反思自己的决策，只有不断的在不同意见中思考才能得到更有价值的想法。

对于 zTree 在v3.x中做的延迟加载，就是为了对于 全国省市县这种数据一次性加载提升速度的。 你的例子算是一种折中需求，曾经有朋友提到用 异步加载的方式，但又要用 expandAll 方法一下子展开全部节点。。。这种矛盾就会凸现出来。 这也是为何 zTree 的 expandAll 并没有专门去实现逐步自动异步加载全部节点功能的原因。

至于选择何种实现方式，的确是要在 性能、开发便捷性、合理性上去找到一个平衡点。我不否认，有时候也会出现鱼与熊掌不可兼得的冲突发生，这种时候就只能进行取舍。

就像你觉得 exedit 有点儿庞大一样，我现在也需要认真考虑这个问题，不能随随便便任意添加功能，让 zTree 继续臃肿下去，这是在自杀。 所以我是要在和你探讨的过程中来挖掘这种需求的必要性以及适用范围，并且要考虑是否可以利用已有的功能轻易实现。

所以，如果最终 并没有如你所愿添加这种更加灵活的 callback，也希望你能谅解，但我肯定会继续认真思考这个问题的，还包括那个 addNodes 和 removeNode 的问题。

再次感谢。

32 楼 Kidwind 2012-02-20  

zTreeAPI 写道

Kidwind 写道

zTreeAPI 写道

Kidwind 写道

zTreeAPI 写道

Kidwind 写道

异步树初始时和展开时都会触发 onAsyncSuccess，reAsyncChildNodes同样会触发，如果我想在 reAsyncChildNodes后执行特定的操作，这样应该如何实现好？

只要是异步加载都会触发 onAsyncSuccess 的，你可以考虑对 treeNode 添加特殊属性标识 是否是  reAsyncChildNodes 对其进行的操作。

不知道你的实际情况，做这种操作请注意避免由于多个异步导致的一些同步问题。

如果 reAsyncChildNodes 允许传递 callback 函数就好了。

这个想法不错，但是否确定要增加这种功能，我还需要考虑，请你先曲线救国吧

其实个人觉得callback方式很实用，包括expandNode方法，如果有一个callback方式的话，能够解决很多问题，如一棵异步树，我要初始选择指定项，这样我可以用callback里继续expandNode节点，直到展开到我需要选中的节点即可，而现在都是通过 onAsyncSuccess，根本无从知道触发加载的源始意图。

1、对于 callback 具体如何实现需要考虑，而且 onExpand 也是针对 expandNode 的回调。感觉你这里最大的问题是针对异步加载时 如何区分 是自动异步加载 还是 js 强行异步加载 还是 由于 js 展开导致的异步加载。

2、对于你举得例子，为何不能直接一次性把节点都加载呢？ 对于异步加载如果还要自动不断展开再次异步加载。。。这样的时候，效率反倒会降低的。
   如果能够一次性加载全部节点，你只需要用 selectNode 方法，就能立刻实现你需要的功能。

异步的优势在于大数据量，如果数据量较大，比如全国的省市县所有数据的话，都会有上百KB，会导致初次加载很慢。相反如果使用异步的话应该会更快，我觉得应该把选择权交给用户会更好，Thanks~

31 楼 zTreeAPI 2012-02-20  

Kidwind 写道

zTreeAPI 写道

Kidwind 写道

zTreeAPI 写道

Kidwind 写道

异步树初始时和展开时都会触发 onAsyncSuccess，reAsyncChildNodes同样会触发，如果我想在 reAsyncChildNodes后执行特定的操作，这样应该如何实现好？

只要是异步加载都会触发 onAsyncSuccess 的，你可以考虑对 treeNode 添加特殊属性标识 是否是  reAsyncChildNodes 对其进行的操作。

不知道你的实际情况，做这种操作请注意避免由于多个异步导致的一些同步问题。

如果 reAsyncChildNodes 允许传递 callback 函数就好了。

这个想法不错，但是否确定要增加这种功能，我还需要考虑，请你先曲线救国吧

其实个人觉得callback方式很实用，包括expandNode方法，如果有一个callback方式的话，能够解决很多问题，如一棵异步树，我要初始选择指定项，这样我可以用callback里继续expandNode节点，直到展开到我需要选中的节点即可，而现在都是通过 onAsyncSuccess，根本无从知道触发加载的源始意图。

1、对于 callback 具体如何实现需要考虑，而且 onExpand 也是针对 expandNode 的回调。感觉你这里最大的问题是针对异步加载时 如何区分 是自动异步加载 还是 js 强行异步加载 还是 由于 js 展开导致的异步加载。

2、对于你举得例子，为何不能直接一次性把节点都加载呢？ 对于异步加载如果还要自动不断展开再次异步加载。。。这样的时候，效率反倒会降低的。
   如果能够一次性加载全部节点，你只需要用 selectNode 方法，就能立刻实现你需要的功能。

30 楼 zTreeAPI 2012-02-20  

Kidwind 写道

还有一个问题就是没有 destroy 方法，直接remove掉节点，又怕资源释放不完全

请用 removeNode 方法删除单独节点；如果清空子节点可以利用 removeChildNodes 方法，如果让树全部清空，那么用空节点重新初始化一下即可。

29 楼 Kidwind 2012-02-20  

zTreeAPI 写道

Kidwind 写道

zTreeAPI 写道

Kidwind 写道

异步树初始时和展开时都会触发 onAsyncSuccess，reAsyncChildNodes同样会触发，如果我想在 reAsyncChildNodes后执行特定的操作，这样应该如何实现好？

只要是异步加载都会触发 onAsyncSuccess 的，你可以考虑对 treeNode 添加特殊属性标识 是否是  reAsyncChildNodes 对其进行的操作。

不知道你的实际情况，做这种操作请注意避免由于多个异步导致的一些同步问题。

如果 reAsyncChildNodes 允许传递 callback 函数就好了。

这个想法不错，但是否确定要增加这种功能，我还需要考虑，请你先曲线救国吧

其实个人觉得callback方式很实用，包括expandNode方法，如果有一个callback方式的话，能够解决很多问题，如一棵异步树，我要初始选择指定项，这样我可以用callback里继续expandNode节点，直到展开到我需要选中的节点即可，而现在都是通过 onAsyncSuccess，根本无从知道触发加载的源始意图。

28 楼 Kidwind 2012-02-20  

还有一个问题就是没有 destroy 方法，直接remove掉节点，又怕资源释放不完全

27 楼 zTreeAPI 2012-02-20  

Kidwind 写道

zTreeAPI 写道

Kidwind 写道

异步树初始时和展开时都会触发 onAsyncSuccess，reAsyncChildNodes同样会触发，如果我想在 reAsyncChildNodes后执行特定的操作，这样应该如何实现好？

只要是异步加载都会触发 onAsyncSuccess 的，你可以考虑对 treeNode 添加特殊属性标识 是否是  reAsyncChildNodes 对其进行的操作。

不知道你的实际情况，做这种操作请注意避免由于多个异步导致的一些同步问题。

如果 reAsyncChildNodes 允许传递 callback 函数就好了。

这个想法不错，但是否确定要增加这种功能，我还需要考虑，请你先曲线救国吧

26 楼 zTreeAPI 2012-02-20  

Kidwind 写道

请问在不加载exedit包的情况下，异步树如何手动添加节点？因为 exedit包感觉有点大。

这个问题值得探讨，是否需要把  addNodes() 和  removeNode() 以及 removeChildNodes() 这几个方法都提到 core 的核心包中呢？ 貌似添加、删除节点还是比较常用的，并不是一定要用来编辑树的。

exedit 体积大主要是实现了更灵活的拖拽、移动、复制、编辑等功能。