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

 

评论

125 楼 jiemy 2012-04-18  

zTree，你好啊。你从百度贴吧搬到这来了啊。呵呵。我是百度zTree吧里的jiemyonline。你可能都忘记了。
说说我的问题，请教一下你，我升级了你的3.1以后，发现子节点不能拖拽为根节点了，根节点本身也不能前后拖动来达到排序效果了。现在有需求对根节点第一层节点进行排序。可是你的api不允许根节点拖拽到prev和next，请问这个有什么办法解决吗？急切盼望回复。

124 楼 zTreeAPI 2012-04-17  

lifengit 写道

你的邮箱是多少，我给你的263那个邮箱发邮件了，你能收到吗？我的邮箱是[e-mail],如果可以请把最新的版本发给我好吗？

ok，肯定能收到的 ：）

123 楼 lifengit 2012-04-17  

你的邮箱是多少，我给你的263那个邮箱发邮件了，你能收到吗？我的邮箱是[e-mail],如果可以请把最新的版本发给我好吗？

122 楼 zTreeAPI 2012-04-16  

lifengit 写道

在Ie9下的问题

灰常感谢，IE8 同样出错，是因为拖拽时对于无子节点的父节点处理异步加载中漏掉的判断，因为没有设置需要进行异步加载，就不应该去执行异步加载的。 目前已经修正此 bug，会跟随 v3.2 发布。  如果你着急，可以留给我email，我会把 目前为止修改的 v3.2 版本的js 代码发给你，也算是帮我测试了。

121 楼 zTreeAPI 2012-04-16  

dennislee414 写道

我还有个问题,当一次加载时  路径0-1-2-3-4 中的 1,2,3,4 都是处于第一次加载  那么 zTree怎么判断 展开时 所处的节点都以加载完毕
比如 3有100个节点 4位于最后一个位置...zTree 怎么判断 4已经加载  然后在动态选定它 以及自动下拉滚动条？ 否则的话 4没加载 就选定它 应该会报错吧！

另一个问题是：  我第一次展开某个节点 （节点下包含500个节点）  和第二次展开时间 相差很小  是不是需要设置什么？  第二次的话 如果有缓存 应该 一瞬间就出来的啦！

1、利用 getNodeByParam 可以根据属性快速确定节点是否已经加载。
2、节点很多的情况，请关闭动画效果：setting.view.expandSpeed 设置为 ""
3、多次展开速度差不多，你是不是说的 Demo “分批异步加载大数据量”？ 这个 Demo 为了展示异步加载，所以每次展开都会重新进行异步加载操作的。

120 楼 lifengit 2012-04-16  

在Ie9下的问题

119 楼 lifengit 2012-04-16  

var zNodes = [
            { id: 0, name: "Tim", open: true },
{ id: 1, pId: 0, name: "默认对账单", isParent: true, open: true },
{ id: 11, pId: 1, name: "IVO-201103-8418" },
{ id: 12, pId: 1, name: "IVO-201101-6935" },
{ id: 13, pId: 1, name: "IVO-200910-4020" },
{ id: 2, pId: 0, name: "对账单1", isParent: true, open: true }
];
数据显示是这样的，把一个叶子节点，拖到一个父节点里面，不能正确的拖进去，这是一个问题吗，请问修正？

118 楼 lifengit 2012-04-16  

定义这个父节点的属于isParent:true,这样就会有问题了。

117 楼 lifengit 2012-04-16  

把一个叶子节点，拖到一个父节点里面，出有bug出现，不能正确的拖进去。

116 楼 dennislee414 2012-04-16  

我还有个问题,当一次加载时  路径0-1-2-3-4 中的 1,2,3,4 都是处于第一次加载  那么 zTree怎么判断 展开时 所处的节点都以加载完毕
比如 3有100个节点 4位于最后一个位置...zTree 怎么判断 4已经加载  然后在动态选定它 以及自动下拉滚动条？ 否则的话 4没加载 就选定它 应该会报错吧！

另一个问题是：  我第一次展开某个节点 （节点下包含500个节点）  和第二次展开时间 相差很小  是不是需要设置什么？  第二次的话 如果有缓存 应该 一瞬间就出来的啦！

115 楼 zTreeAPI 2012-04-15  

jackyrong 写道

... HI，我用你的方法，成功了，十分感谢

  搞定就好！ Very Good

114 楼 jackyrong 2012-04-14  

zTreeAPI 写道

jackyrong 写道

dept 表   deptid  deptname parentid

position表  positonid  positioname   deptid

我的情况简单点，比如

部门表中：  信息中心下的运行维护部（已构成父子关系）

deptid  deptname   parentid
1        信息中心      0
2        运行维护部     1

现在岗位表中实际上是：

  positioname    deptid
   主任             1（deptid=1为信息中心)
   副主任           1
   数据库管理员     2

  实际上就是想展示position表的时候，要同时显示出各个部门下的岗位

上面的主任，副主任，不考虑上下级（即不用再树形展现),看作兄弟
     

如果这样的话，那就是简单多了。

假设都在一棵树上，那么可以默认为父节点都是部门，叶子节点都是岗位。
数据结构如下：
[
{id:"dept_1", pId:"0", name:"信息中心", type:"dept", isParent:true},
{id:"dept_2", pId:"dept_1", name:"运行维护部", type:"dept", isParent:true},
{id:"pos_1", pId:"dept_1", name:"主任", type:"position"},
{id:"pos_2", pId:"dept_1", name:"副主任", type:"position"},
{id:"pos_3", pId:"dept_2", name:"数据库管理员", type:"position"},
]
这样根据 id 的格式就能正确区分部门和岗位，而且我又给你增加了 type 便于你操作时判断。

补充：
(1) id 添加表名的标示主要是为了避免 id 重复造成构建嵌套关系出现混乱。
(2) 给岗位增加 isParent 属性是为了避免出现某些部门下没有岗位的情况，也要保证岗位是父节点
(3) 你还可以利用自定义图标的方式，更加准确的区分 部门 和 岗位

   HI，我用你的方法，成功了，十分感谢

113 楼 zTreeAPI 2012-04-13  

lifengit 写道

如果禁止子节点移动成父节点，也就是说子节点只能移动到其他父节点下面。

1、移动方面的规则很灵活，完全可以利用 beforeDrop 或 setting.edit.drag.inner/prev/next 进行随意控制
2、如果使用 setting.keep.leaf 锁定叶子节点，那么 叶子节点不能成为父节点，也就是说不能有其他节点拖拽到 叶子节点下面。 leaf 不是子节点的意思，而是 叶子节点，即最末一级非父节点。

112 楼 zTreeAPI 2012-04-13  

dennislee414 写道

我有这样一个需求,比如 我在树页面加载完毕5s 后  自动选择 某个节点 节点路径为0-1-2-3-4-5  那么 就必须自动展开 0,1,2,3,4  然后选择节点5  在根据节点5对应的数据
跳转  zTree能实现此功能吗？
还有 如果4下面的节点很多 比如 100个 假如5的位置就是最后一个 那么在可视区域内
我是需要下拉才能看到这个节点  zTree是否由一个 类似于 focusItem的函数 定位
这个点 然后自动下拉下拉框？ 

1、如果你的节点都是加载完毕的，那么只需要使用 selectNode 方法选中 节点5，其 0、1、2、3、4 都会自动展开的； 只需如何跳转，完全可以根据你的需求用 js 设置页面 或 iframe 的跳转功能。

2、selectNode 方法会自动设置焦点到可视区内的。

111 楼 lifengit 2012-04-13  

如果禁止子节点移动成父节点，也就是说子节点只能移动到其他父节点下面。

110 楼 dennislee414 2012-04-13  

我有这样一个需求,比如 我在树页面加载完毕5s 后  自动选择 某个节点 节点路径为0-1-2-3-4-5  那么 就必须自动展开 0,1,2,3,4  然后选择节点5  在根据节点5对应的数据
跳转  zTree能实现此功能吗？
还有 如果4下面的节点很多 比如 100个 假如5的位置就是最后一个 那么在可视区域内
我是需要下拉才能看到这个节点  zTree是否由一个 类似于 focusItem的函数 定位
这个点 然后自动下拉下拉框？ 

109 楼 zTreeAPI 2012-04-11  

jackyrong 写道

dept 表   deptid  deptname parentid

position表  positonid  positioname   deptid

我的情况简单点，比如

部门表中：  信息中心下的运行维护部（已构成父子关系）

deptid  deptname   parentid
1        信息中心      0
2        运行维护部     1

现在岗位表中实际上是：

  positioname    deptid
   主任             1（deptid=1为信息中心)
   副主任           1
   数据库管理员     2

  实际上就是想展示position表的时候，要同时显示出各个部门下的岗位

上面的主任，副主任，不考虑上下级（即不用再树形展现),看作兄弟
     

如果这样的话，那就是简单多了。

假设都在一棵树上，那么可以默认为父节点都是部门，叶子节点都是岗位。
数据结构如下：
[
{id:"dept_1", pId:"0", name:"信息中心", type:"dept", isParent:true},
{id:"dept_2", pId:"dept_1", name:"运行维护部", type:"dept", isParent:true},
{id:"pos_1", pId:"dept_1", name:"主任", type:"position"},
{id:"pos_2", pId:"dept_1", name:"副主任", type:"position"},
{id:"pos_3", pId:"dept_2", name:"数据库管理员", type:"position"},
]
这样根据 id 的格式就能正确区分部门和岗位，而且我又给你增加了 type 便于你操作时判断。

补充：
(1) id 添加表名的标示主要是为了避免 id 重复造成构建嵌套关系出现混乱。
(2) 给岗位增加 isParent 属性是为了避免出现某些部门下没有岗位的情况，也要保证岗位是父节点
(3) 你还可以利用自定义图标的方式，更加准确的区分 部门 和 岗位

108 楼 jackyrong 2012-04-11  

dept 表   deptid  deptname parentid

position表  positonid  positioname   deptid

我的情况简单点，比如

部门表中：  信息中心下的运行维护部（已构成父子关系）

deptid  deptname   parentid
1        信息中心      0
2        运行维护部     1

现在岗位表中实际上是：

  positioname    deptid
   主任             1（deptid=1为信息中心)
   副主任           1
   数据库管理员     2

  实际上就是想展示position表的时候，要同时显示出各个部门下的岗位

上面的主任，副主任，不考虑上下级（即不用再树形展现),看作兄弟
     

107 楼 zTreeAPI 2012-04-11  

jackyrong 写道

我现在用ZTREE，有个算法的问题，想请教下，用ZTREE有无好的解决思路：

现在有一个部门表，一个岗位表，部门跟岗位是一对多的关系，部门表现在是一个树的形式表现出来了，现在岗位也想用一个树的形式表现出来，但岗位树中，要同时展现部门的层次关系，比如运行维护部是在信息中心下的部门，数据管理员这个岗位是在运行维护部下的岗位，那么岗位树还要读出部门表的部门（但这个岗位树中的部门实际上只是显示出来而已），这样，一个树就混合了两张表了，有什么好的方法解决呢？因为我的树是要AJAX一次全部加载出来的，就是用simpledata模式。

貌似你这个更多的不是算法，而是需求问题。 按照你所说，部门是按照级别来分。。一个部门会有多个岗位； 同时上级部门的岗位肯定会处于 下一部门的岗位的上级。 但问题来了， 同一个部门的岗位是不是也会有多个级别呢？？

我暂且假设你的数据结构满足以下条件：
1、部门分级别
2、一个部门对应多个岗位
3、同一个部门内的岗位也会有不同级别
4、不同部门间的岗位级别受部门级别影响，即 上级部门的岗位肯定是 下级部门的岗位的上级

如果这样的话，你的数据模型比较简单，只需要设定两套名字、两套 id、pId 即可。
例如： 部门1 有 岗位a、岗位b 且 b是a 的下级； 部门2 是部门1 的下级，且有 岗位c、岗位d，且 d是c 的下级，那么你的数据按照以下情况制作即可：
[
{partId:1, partPId:0, partName:"部门1", jobId:1, jobPId:0, jobName:"岗位a"},
{partId:1, partPId:0, partName:"部门1", jobId:2, jobPId:1, jobName:"岗位b"},
{partId:2, partPId:1, partName:"部门2", jobId:3, jobPId:2, jobName:"岗位c"},
{partId:2, partPId:1, partName:"部门2", jobId:4, jobPId:3, jobName:"岗位c"},
]
利用这套数据你可以快速生成岗位的树，但生成部门的树时，需要先过滤一次，把重复的部门清理掉。

但这个数据模型有一个最大的问题： 不同部门之间的岗位隶属关系到底如何？？ 我这里仅仅做了一个最简单的假设：上一级部门中最低的岗位 是 下一级部门中 最高的岗位的上级。

这个需要根据你那里具体情况来考虑了。 如果有问题请继续沟通。

106 楼 jackyrong 2012-04-11  

我现在用ZTREE，有个算法的问题，想请教下，用ZTREE有无好的解决思路：

现在有一个部门表，一个岗位表，部门跟岗位是一对多的关系，部门表现在是一个树的形式表现出来了，现在岗位也想用一个树的形式表现出来，但岗位树中，要同时展现部门的层次关系，比如运行维护部是在信息中心下的部门，数据管理员这个岗位是在运行维护部下的岗位，那么岗位树还要读出部门表的部门（但这个岗位树中的部门实际上只是显示出来而已），这样，一个树就混合了两张表了，有什么好的方法解决呢？因为我的树是要AJAX一次全部加载出来的，就是用simpledata模式。