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/>）

 

评论

105 楼 jackyrong 2012-04-11  

zTreeAPI 写道

jackyrong 写道

zTreeAPI 写道

jackyrong 写道

jackyrong 写道

想问下，ztree能否做到这个效果：

 
管理中心
  －－－－项目部       选择 编辑
  －－－－建设部        选择  编辑

就是在树中，每个节点后，能有自定的URL连接，这样可以实现么？

就是能实现lumandtree当初的这个功能

http://www.baby666.cn/v3/demo.php#_504 这个Demo 是否能满足你的需求？

good!，原来ztree的前身就是lumandtree呀，不错，你的树我也用了好多年咯，功能很好，但可惜最近发现在jquery 高版本下搭配kendoo ui有点问题，所以用了ztree

呵呵，很高兴你能喜欢 zTree ，不过很遗憾，zTree 前身根本不是什么 lumandtree，因为它从一开始就是 zTree 

   呵呵，不好意思，我在lumand的论坛里卡到ZTREE的推荐，误会了，呵呵

104 楼 zTreeAPI 2012-04-11  

jackyrong 写道

zTreeAPI 写道

jackyrong 写道

jackyrong 写道

想问下，ztree能否做到这个效果：

 
管理中心
  －－－－项目部       选择 编辑
  －－－－建设部        选择  编辑

就是在树中，每个节点后，能有自定的URL连接，这样可以实现么？

就是能实现lumandtree当初的这个功能

http://www.baby666.cn/v3/demo.php#_504 这个Demo 是否能满足你的需求？

good!，原来ztree的前身就是lumandtree呀，不错，你的树我也用了好多年咯，功能很好，但可惜最近发现在jquery 高版本下搭配kendoo ui有点问题，所以用了ztree

呵呵，很高兴你能喜欢 zTree ，不过很遗憾，zTree 前身根本不是什么 lumandtree，因为它从一开始就是 zTree 

103 楼 jackyrong 2012-04-11  

zTreeAPI 写道

jackyrong 写道

jackyrong 写道

想问下，ztree能否做到这个效果：

 
管理中心
  －－－－项目部       选择 编辑
  －－－－建设部        选择  编辑

就是在树中，每个节点后，能有自定的URL连接，这样可以实现么？

就是能实现lumandtree当初的这个功能

http://www.baby666.cn/v3/demo.php#_504 这个Demo 是否能满足你的需求？

good!，原来ztree的前身就是lumandtree呀，不错，你的树我也用了好多年咯，功能很好，但可惜最近发现在jquery 高版本下搭配kendoo ui有点问题，所以用了ztree

102 楼 zTreeAPI 2012-04-11  

jackyrong 写道

jackyrong 写道

想问下，ztree能否做到这个效果：

 
管理中心
  －－－－项目部       选择 编辑
  －－－－建设部        选择  编辑

就是在树中，每个节点后，能有自定的URL连接，这样可以实现么？

就是能实现lumandtree当初的这个功能

http://www.baby666.cn/v3/demo.php#_504 这个Demo 是否能满足你的需求？

101 楼 jackyrong 2012-04-11  

jackyrong 写道

想问下，ztree能否做到这个效果：

 
管理中心
  －－－－项目部       选择 编辑
  －－－－建设部        选择  编辑

就是在树中，每个节点后，能有自定的URL连接，这样可以实现么？

就是能实现lumandtree当初的这个功能

100 楼 jackyrong 2012-04-11  

想问下，ztree能否做到这个效果：

 
管理中心
  －－－－项目部       选择 编辑
  －－－－建设部        选择  编辑

就是在树中，每个节点后，能有自定的URL连接，这样可以实现么？

99 楼 zTreeAPI 2012-04-09  

wx_hello 写道

zTreeAPI 写道

wx_hello 写道

2.我设置了URL，每次点击节点的时候去执行$("frame").attr("src",treeNode.url)这段代码，但是会另外再打开一个窗口，怎么把那个targer屏蔽呢？

2、对于这种比较灵活的点击操作，建议不要使用url 的功能。 建议你利用 onClick 进行控制

是每击一次节点，就要请求节点对应的URL，然后在进行请求跳转吗？
这样存在性能问题：
1.每点击一次就要去数据库请求一次与之对应的URL
2.数据一次性全部加载到界面，每点击一次，进行过滤一次。

不知道是否还有其他办法。

让你使用 onClick 进行控制，并没有让你每次去数据库请求呀。
你只需要把 url 的属性保存在  _url、或 xUrl 等属性内即可，只要不使用 url 这个属性就是了。 然后在 onClick 回调中，根据 你定义的 url （例如：_url）进行跳转即可。基本上和现在你生成url 是同样的。

98 楼 zTreeAPI 2012-04-09  

jackyrong 写道

...我在

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

});
   中，企图在$.fn.zTree.init($("#treeDemo"), setting, treeNodes);
后，加入expandall，是不行的呀，我没用异步，一次过用简单数据模式的

不知道你是否有其他代码在干扰？  我直接在 simpleData.html 和 standardData.html 这两个 Demo 上这么使用一点儿问题都没有呀。

建议你屏蔽掉多余代码，再查找一下错误原因

97 楼 wx_hello 2012-04-09  

zTreeAPI 写道

wx_hello 写道

2.我设置了URL，每次点击节点的时候去执行$("frame").attr("src",treeNode.url)这段代码，但是会另外再打开一个窗口，怎么把那个targer屏蔽呢？

2、对于这种比较灵活的点击操作，建议不要使用url 的功能。 建议你利用 onClick 进行控制

是每击一次节点，就要请求节点对应的URL，然后在进行请求跳转吗？
这样存在性能问题：
1.每点击一次就要去数据库请求一次与之对应的URL
2.数据一次性全部加载到界面，每点击一次，进行过滤一次。

不知道是否还有其他办法。

96 楼 jackyrong 2012-04-09  

.fn.zTree.init($("#treeDemo"), setting, treeNodes);

});

zTreeAPI 写道

jackyrong 写道

问下，如果想在加载树的时候，一次全部展开所有节点，按文档的说法，是：

var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.expandAll(true);

但在document.ready中，是要先初始化数据的，即：
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, treeNodes);

});

在DEMO中，是通过按钮的CLICK事件去触发的，那个好理解，问题是如何在数据加载完毕后，就展开所有节点呢？

如果没有任何异步过程，那么直接使用文档的说法即可。
如果你使用了 异步加载，那么有两种情况：
1、一次性生成全部节点，进行异步加载。
   这样只需要利用 onAsyncSuccess 回调就可以捕获到异步加载的完毕，并且使用 expandAll 方法
2、异步加载时，每次只能生成某一级的节点数据
   这样无法使用 expandAll 方法进行全部展开。 这种情况建议你直接生成全部数据。因为利用 简单数据模式，生成全部数据还是比较容易的。 如果你觉得数据很多无法一下子全部加载，那么你也就不要对大数据量使用 全部展开的功能了。 本身使用异步加载功能和 全部展开的功能就是矛盾的。 利用算法逐步异步加载只会耗费更多的性能和时间。

  但我在

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

});
   中，企图在$.fn.zTree.init($("#treeDemo"), setting, treeNodes);
后，加入expandall，是不行的呀，我没用异步，一次过用简单数据模式的

95 楼 zTreeAPI 2012-04-09  

wx_hello 写道

我现在有两个问题
1.就是异步加载的时候，我设置子节点的open：true，反馈到前台的数据均正常。。为什么子节点不展开呢（需要点击才展开）？
2.我设置了URL，每次点击节点的时候去执行$("frame").attr("src",treeNode.url)这段代码，但是会另外再打开一个窗口，怎么把那个targer屏蔽呢？

1、这个设置了 open 为 true 的子节点是否为父节点？ 是否同时已经加载其子节点？？
2、对于这种比较灵活的点击操作，建议不要使用url 的功能。 建议你利用 onClick 进行控制

94 楼 zTreeAPI 2012-04-09  

jackyrong 写道

问下，如果想在加载树的时候，一次全部展开所有节点，按文档的说法，是：

var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.expandAll(true);

但在document.ready中，是要先初始化数据的，即：
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, treeNodes);

});

在DEMO中，是通过按钮的CLICK事件去触发的，那个好理解，问题是如何在数据加载完毕后，就展开所有节点呢？

如果没有任何异步过程，那么直接使用文档的说法即可。
如果你使用了 异步加载，那么有两种情况：
1、一次性生成全部节点，进行异步加载。
   这样只需要利用 onAsyncSuccess 回调就可以捕获到异步加载的完毕，并且使用 expandAll 方法
2、异步加载时，每次只能生成某一级的节点数据
   这样无法使用 expandAll 方法进行全部展开。 这种情况建议你直接生成全部数据。因为利用 简单数据模式，生成全部数据还是比较容易的。 如果你觉得数据很多无法一下子全部加载，那么你也就不要对大数据量使用 全部展开的功能了。 本身使用异步加载功能和 全部展开的功能就是矛盾的。 利用算法逐步异步加载只会耗费更多的性能和时间。

93 楼 wx_hello 2012-04-09  

我现在有两个问题
1.就是异步加载的时候，我设置子节点的open：true，反馈到前台的数据均正常。。为什么子节点不展开呢（需要点击才展开）？
2.我设置了URL，每次点击节点的时候去执行$("frame").attr("src",treeNode.url)这段代码，但是会另外再打开一个窗口，怎么把那个targer屏蔽呢？

92 楼 jackyrong 2012-04-09  

问下，如果想在加载树的时候，一次全部展开所有节点，按文档的说法，是：

var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.expandAll(true);

但在document.ready中，是要先初始化数据的，即：
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, treeNodes);

});

在DEMO中，是通过按钮的CLICK事件去触发的，那个好理解，问题是如何在数据加载完毕后，就展开所有节点呢？

91 楼 zTreeAPI 2012-04-07  

jackyrong 写道

...因为用的是simpledata,所以：
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getSelectedNodes();
   var data =nodes[0].description;
就可以了

  问下ZTREEAPI兄，是我这样解决的办法么？有其他简单办法么

不知道你的具体需求如何，而且到底想简单到什么地步？ ：）

90 楼 jackyrong 2012-04-06  

jackyrong 写道

jackyrong 写道

zTreeAPI 写道

jackyrong 写道

问下，ZTREE能象之前的dtree那样，后台把树数据表的记录传到前台，
前台自己递归组合成树么？那就不用在后台递归搞成树的格式了

你的几个问题一起回答了：

1、利用简单数据模式即可(看来你已经找到了)
2、对于 treeNode的其他自定义属性，获取起来so easy。 因为数据是json 的，所以只需要 treeNode.xxx 即可，例如 treeNode.description 就可以了

  例如 treeNode.description 就可以了 ,但我试验过了，怎么不行的呢？undefiend
哦

已解决，谢谢了。因为用的是simpledata,所以：
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getSelectedNodes();
   var data =nodes[0].description;
就可以了

  问下ZTREEAPI兄，是我这样解决的办法么？有其他简单办法么

89 楼 zTreeAPI 2012-04-06  

zithan 写道

非常敬佩作者，非常给力，也感谢作者

呵呵，过奖了

88 楼 zithan 2012-04-06  

非常敬佩作者，非常给力，也感谢作者

87 楼 jackyrong 2012-04-06  

jackyrong 写道

zTreeAPI 写道

jackyrong 写道

问下，ZTREE能象之前的dtree那样，后台把树数据表的记录传到前台，
前台自己递归组合成树么？那就不用在后台递归搞成树的格式了

你的几个问题一起回答了：

1、利用简单数据模式即可(看来你已经找到了)
2、对于 treeNode的其他自定义属性，获取起来so easy。 因为数据是json 的，所以只需要 treeNode.xxx 即可，例如 treeNode.description 就可以了

  例如 treeNode.description 就可以了 ,但我试验过了，怎么不行的呢？undefiend
哦

已解决，谢谢了。因为用的是simpledata,所以：
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getSelectedNodes();
   var data =nodes[0].description;
就可以了

86 楼 jackyrong 2012-04-06  

zTreeAPI 写道

jackyrong 写道

问下，ZTREE能象之前的dtree那样，后台把树数据表的记录传到前台，
前台自己递归组合成树么？那就不用在后台递归搞成树的格式了

你的几个问题一起回答了：

1、利用简单数据模式即可(看来你已经找到了)
2、对于 treeNode的其他自定义属性，获取起来so easy。 因为数据是json 的，所以只需要 treeNode.xxx 即可，例如 treeNode.description 就可以了

  例如 treeNode.description 就可以了 ,但我试验过了，怎么不行的呢？undefiend
哦