资讯频道 → Web前端
阅读更多

59顶
0踩

Web前端

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

2012-02-14 10:39 by 正式记者 zTreeAPI 评论(74) 有20197人浏览
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 写道
   您好，现在我在使用的是v3.1 的版本，总体感觉不错，但是我的树形控件在点击关闭父节点的时候会出现伸缩延迟，看起来有闪烁的效果出现，是不是css的问题啊，麻烦有时间看一下


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

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

如果目前动画效果有影响，就请关闭 动画效果： setting.view.expandSpeed = ""; 即可
59 楼 yelangking 2012-03-09 17:22
   您好，现在我在使用的是v3.1 的版本，总体感觉不错，但是我的树形控件在点击关闭父节点的时候会出现伸缩延迟，看起来有闪烁的效果出现，是不是css的问题啊，麻烦有时间看一下
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
有个问题指教一下，我在同一页面里要加载两棵树，如Tree1和Tree2，但是，Tree2是根据Tree1来生成的。也就是说要等Tree1加载完了再加载Tree2.请问一下要怎么控制呢？是用onAsyncSuccess来控制么？有没有整棵树渲染完后的回调接口啊？

发表评论

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

相关推荐

  • Jquery zTree V3.1

    一款很强大的Jquery树形插件,内部还有api，dome,js,css等一些文件，api很详细，dome很多哦...

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

    选在情人节发布 zTree v3.1，希望 zTree 能够拥有更多的“粉丝”。  这次 v3.1 整体改动不大，但因为修改了 css 和 图片，所以升级时需要注意了！  另外，应不少朋友的要求，我把 API 的页面抽取出来，做了...

  • JQuery zTree v3.1 API

    JQuery zTree v3.1 API

  • JQuery zTree v3.1

    JQuery zTree v3.1

  • zTree(JQuery Tree) v3.1.rar

    zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器（对于IE 6的兼容问题将不做特殊维护） 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持...

  • java-zTree(JQuery Tree) v3.1.zip.zip

    java_zTree(JQuery Tree) v3.1.zip.zip

  • JQuery zTree v3.1 API.chm

    这是我整理的ztree树形插件的API，其版本是V3.1，希望对大家有所帮助

  • JQuery zTree v3.1完整API完整demo

    JQuery zTree v3.1完整API完整demo

  • archive_zTree(JQuery Tree) v3.1.zip.zip

    archive_zTree(JQuery Tree) v3.1.zip.zip

  • JQuery-zTree-v3.1.rar_ztree

    JQuery的相关代码，尤其是树的功能，已经封闭为API，可直接使用。

  • JQuery_zTree_v3.1

    JQuery zTree中英文API + 中英文demo + css + js, 版本：JQuery zTree v3.1

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

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

  • jQuery zTree插件使用简单教程

    本文实例为大家分享了jQuery zTree插件使用简单教程，供大家参考，具体内容如下 首先说一下，在web开发过程中会有很多的地方需要到树形的插件，JQuery 就有树的插件，本次简单教程讲的是zTree的使用教程。 官方下载...

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

    由于国庆之后一直忙于公司的项目，因此将 zTree 闲置了1个月左右。  这次升级继续以修正 bug 为主，这里要非常感谢各位用户的支持，这次修改的很多 bug 都是大家在使用过程中反映给我的。      zTree ...

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

    zTree v3.2 API : http://www.baby666.cn/v3/api.php zTree v3.2 Demo : http://www.baby666.cn/v3/demo.php#_101 zTree v3.2 FAQ : http://www.baby666.cn/v3/faq.php#_101  * 【增加】setting.data.key....

  • 分享：JQuery Tree插件——zTree v3.5.01 版 发布

    分享：JQuery Tree插件——zTree v3.5.01 版 发布 JQuery Tree插件——zTree v3.5.01 版 发布 http://www.oschina.net/news/36016 ...

  • jQuery插件zTree实现单独选中根节点中第一个节点示例

    主要介绍了jQuery插件zTree实现单独选中根节点中第一个节点的方法,结合实例形式分析了jQuery树形插件zTree的具体使用技巧,需要的朋友可以参考下

  • JQuery Tree插件——zTree v2.6正式版发布

    JQuery Tree插件——zTree v2.6正式版发布！ 发表于2011-06-01 10:48| 4748次阅读| 来源开源中国社区| 9 条评论| 作者dyhunter 浏览器jquery插件treejqueryztree 摘要：JQuery Tree插件——zTre

  • node-v4.9.0-linux-armv7l.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

  • node-v4.8.4-linux-armv6l.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

Global site tag (gtag.js) - Google Analytics