zTree v3.1 正式版发布，优秀的JQuery Tree插件

59顶
0踩

2012-02-14 10:39 by 正式记者 zTreeAPI 评论(74) 有20532人浏览

ztree jQuery tree 树 javascript

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

选在情人节发布 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（在IE6/7/8中出现）。CSS 中 filter:alpha(opacity=80) 造成的，应该是 IE 的 bug，需要更新 css 文件。
【修改】title 设置后，如果属性不存在，则默认 title 为空，便于数据容错和用户灵活使用。
【修改】editName 方法如果针对尚未展开的父节点，会导致该父节点自动展开的 bug。
【修改】title 中存在标签时导致 title 显示异常的bug（例如：蓝色字22%"'<input/>）。

分享到：

59
顶

0
踩

评论共 74 条请登录后发表评论

74 楼 zTreeAPI 2013-05-23 21:53

chengzanda 写道

你好，我想问一个问题，是否可以实现
一个车辆列表树，首先是异步加载，我加载的子节点分为组织和车辆，如果子节点是组织，那么有继续异步加载的打开图标，如果是车辆的话，那么就没有这个图标，而不是所有的子节点都有，请问这应该怎么区分？

1. 看看 setting.view.showIcon 可以设置为 function，针对每一个节点设置是否显示图标
2. 看看 treeNode.iconSkin 可以针对每一个节点配置个性化的图标

3. 看看 zTree.updateNode 方法，可以让节点更新名称以及图标等视图

73 楼 chengzanda 2013-05-22 17:45

72 楼 zqb666kkk 2012-05-14 14:02

哦知道了谢谢

71 楼 zTreeAPI 2012-05-14 14:00

zqb666kkk 写道

嗯这个问题知道了，可是如果加上双引号当做字符来处理我发现有时候级别会错乱比如 a是b下的自己别有时候会跳到其他级别去

id、pId 都要添加双引号的！！ id 和 pId 的对象类型一定要统一

70 楼 zqb666kkk 2012-05-14 13:56

嗯这个问题知道了，可是如果加上双引号当做字符来处理我发现有时候级别会错乱比如 a是b下的自己别有时候会跳到其他级别去

69 楼 zTreeAPI 2012-05-14 13:49

zqb666kkk 写道

得出来的是 10,8，19 这是怎么回事怎么js自动处理成了一个值？

我给你回复了3点，为何只看第1点？

68 楼 zqb666kkk 2012-05-14 13:45

得出来的是 10,8，19 这是怎么回事怎么js自动处理成了一个值？

67 楼 zTreeAPI 2012-05-14 13:12

zqb666kkk 写道

我发现了 ztree3.1一个问题加入id是0开头的那么....希望官方给出合理解释

你好，官方解释来了

1、请你首先运行下面 js 的简单代码，看看结果如何：

alert(10);alert(010);alert(019);

2、请你去看一下 js 对于数字进制方面的处理，如果前面有 0 和前面有 0x 的是什么情况？

3、对于 zTree 中用到的 id 和 pId，如果你必须要使用这种数值，那么请用双引号包上，当做 string 处理即可

66 楼 zqb666kkk 2012-05-14 12:43

我发现了 ztree3.1一个问题加入id是0开头的那么 function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("ydjwtree"),
nodes = zTree.getCheckedNodes(true),
v = "";
var nodes = zTree.getSelectedNodes();
if (nodes.length>0) {
zTree.reAsyncChildNodes(nodes[0], "refresh");
}
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
alert(nodes[i].id);
document.getElementById('deptDmSearch').value=nodes[i].id;
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
}

这里alert(nodes[i].id);
取到的值就会错误

希望官方给出合理解释

65 楼 zqb666kkk 2012-05-14 11:29

你好我明明数据库的节点id是10025 在页面上获取的 function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("ydjwtree"),
nodes = zTree.getCheckedNodes(true),
v = "";
var nodes = zTree.getSelectedNodes();
if (nodes.length>0) {
zTree.reAsyncChildNodes(nodes[0], "refresh");
}
for (var i=0, l=nodes.length; i<l; i++) {
v += nodes[i].name + ",";
alert(nodes[i].id);
document.getElementById('deptDmSearch').value=nodes[i].id;
}
if (v.length > 0 ) v = v.substring(0, v.length-1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
}

这个alert(nodes[i].id);
获取的却跟实际的值不一样这个获取的一个值根本就不存在
请问这个问题怎么解决

64 楼 zTreeAPI 2012-03-11 19:19

yelangking 写道

...关闭动画效果是可以去掉这个bug，但是我的浏览器是ie8的，而且父节点下有很多的子节点，在点击关闭父节点时会出现树的延迟问题在折叠的时候，使用firefox 和chrome 浏览器均没有任何问题

不知道你的子节点能有多少？浏览我提供的Demo（包括大数据量加载），是否也出现这种异常呢？我目前用 IE8 并没有发现如此明显的停顿。

63 楼 zTreeAPI 2012-03-11 19:16

yelangking 写道

您好，我在使用simpleData 生成树的时候，生成的json名字是不是类似{id:1, pId:0, name:"父节点1 - 展开", open:true}这种格式的，名字只能取id ，不支持重新命名

肯定是可以重新命名的，请参考 setting.data.key属性下面的全部属性说明；另外还有 setting.data.simple.idKey/pIdKey

62 楼 yelangking 2012-03-11 18:33

您好，我在使用simpleData 生成树的时候，生成的json名字是不是类似{id:1, pId:0, name:"父节点1 - 展开", open:true}这种格式的，名字只能取id ，不支持重新命名

61 楼 yelangking 2012-03-11 16:16

zTreeAPI 写道

yelangking 写道

您好，现在我在使用的是v3.1 的版本，总体感觉不错，但是我的树形控件在点击关闭父节点的时候会出现伸缩延迟，看起来有闪烁的效果出现，是不是css的问题啊，麻烦有时间看一下

目前我已经修复了下面这个bug：
* 【修改】IE7的环境下无子节点的父节点反复展开出现多余空行的bug

是不是你说的？ v3.2 发布时会修正这个bug

如果目前动画效果有影响，就请关闭动画效果： setting.view.expandSpeed = ""; 即可

关闭动画效果是可以去掉这个bug，但是我的浏览器是ie8的，而且父节点下有很多的子节点，在点击关闭父节点时会出现树的延迟问题在折叠的时候，使用firefox 和chrome 浏览器均没有任何问题

60 楼 zTreeAPI 2012-03-09 18:33

yelangking 写道

59 楼 yelangking 2012-03-09 17:22

58 楼 beisicao 2012-03-01 12:06

很不错，支持！

57 楼 osacar 2012-02-20 14:17

谢谢，上次的问题已经解决。
楼主啊，抽空再做个treeTable吧。

56 楼 zTreeAPI 2012-02-19 13:33

osacar 写道

有个问题指教一下，我在同一页面里要加载两棵树，如Tree1和Tree2，但是，Tree2是根据Tree1来生成的。也就是说要等Tree1加载完了再加载Tree2.请问一下要怎么控制呢？是用onAsyncSuccess来控制么？有没有整棵树渲染完后的回调接口啊？

如果使用异步加载，那么肯定要利用onAsyncSuccess 来捕获异步加载完毕的情况；所有zTree 方法都是在 zTree init 之后即可使用的。捕获事件回调函数请参考 setting.callback 下面的全部 callback 事件回调函数。
v3.1 的 zip 内就有离线 API 文档；在线文档：http://www.baby666.cn/v3/api.php

55 楼 osacar 2012-02-19 11:00

发表评论

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

59顶0踩