zTree v3.0 beta Bug 汇总

    v3.0 改动很大，而且计划这次 从 beta 到 正式版至少需要1-2个月的时间进行沉淀，因为这期间一方面需要修正bug、增加适当功能。同时也在努力争取正式版时推出英文版的 Demo 和 API，所以专门开篇文章，用来发布 v3.0 beta 中已经发现的 bug 和解决方案，帮助这期间遇到 bug 的朋友解决问题。

    在发布正式版之前，查看 v3.0 beta 的改动计划以及 Bug 修正都在这篇博文中进行记录。

 

[最后修改日期 2012-01-04] ---- 已进入 最后测试阶段

 

---【增加】---

1、【增加】setting.check.autoCheckTrigger 默认值 false，可以设置联动选中时是否触发 onCheck 回调函数

    制作完毕，随v3.0正式版发布

 

2、【增加】setting.callback.beforeEditName 回调函数，以保证用户可以捕获点击编辑按钮的事件

    制作完毕，随v3.0正式版发布

 

3、【增加】treeNode.checkDisable 属性，显示 checkbox 但是用户无法修改 checkbox 状态，并且该checkbox 会影响父节点的 checkbox 的半选状态

    制作 完毕，随v3.0正式版发布

 

4、【增加】setting.check.nocheckInherit 属性，用户设置子节点继承 nocheck 属性，用于批量初始化节点，不适用于已经显示的节点

    制作 完毕，随v3.0正式版发布

 

5、【增加】setting.edit.drag.autoExpandTrigger 默认值 false，可以设置自动展开、折叠操作时是否触发 onExpand 回调函数

    制作 完毕，随v3.0正式版发布

 

6、【增加】setting.view.nameIsHTML 默认值 false，允许用户对 name 设置 DOM 对象

    制作 完毕，随v3.0正式版发布

 

7、【增加】类似于Ext.tree.TreeFilter类, 可以实现树节点的过滤，隐藏不匹配过滤条件的节点

由于时间原因，此功能等正式版发布后，制作 zTree 扩展工具时一起开发。

 

8、【增加】treeNode.click 属性的说明文档！

    制作 完毕，随v3.0正式版发布

9、【增加】treeObj.setChkDisabled 方法用于设置 checkbox / radio disabled 状态

    制作完毕，随v3.0正式版发布

10、【增加】treeNode.halfCheck 属性，用于强制设定节点的半选状态

    制作完毕，随v3.0正式版发布

---【修改】---

1、【修改】异步加载 & 编辑功能 共存时，拖拽节点 或 增加节点 导致 ie 上报错的 bug （apply 方法引起）

    解决方案：将 jquery.ztree.core-3.0.js 文件中 Line 682 的 return fun.apply(zt, param);  修改为 return fun.apply(zt, param?param:[]);

 

2、【修改】zTreeStyle 样式冲突

    解决方案：将 zTreeStyle 的第 82 行 ul.zTreeDragUL 修改为  ul.ztree.zTreeDragUL，并且将该行的 overflow:auto; 修改为 overflow:hidden;

 

3、【修改】setting.data.key.title 默认值设置为 ""，初始化时自动赋值为 setting.data.key.name 这样可避免希望 title 与 name 一致的用户反复设置参数

    修正完毕，随v3.0正式版发布

 

4、【修改】点击叶子节点的连接线会触发 expand 事件的 bug

    修正完毕，随v3.0正式版发布

 

5、【修改】IE 下 点击叶子节点连线会出现虚线框的 bug

    修正完毕，随v3.0正式版发布

 

6、【修改】updateNode 导致 checkbox 半选状态错误的 bug

    解决方案：将 jquery.ztree.excheck-3.0.js 文件中 Line 470 的 if (node.nocheck !== true) { 修改为 if (node.nocheck !== true && node[childsKey] && node[childsKey].length > 0) {

     原解决方案会引起勾选关联的错误，正确解决方案：

     (1) 保留 Line 470 的 if (node.nocheck !== true) {

     (2) 将 Line 472 的 node.check_Child_State = value ? 2 : 0; 修改为 node.check_Child_State = (node[childsKey] && node[childsKey].length > 0) ? (value ? 2 : 0) : -1;

 

7、【修改】checkNode 方法实现 toggle 功能, 取消 expandAll 方法 toggle 功能

    修正完毕，随v3.0正式版发布

 

8、【修改】zTree 内鼠标移动会抢页面上 input 内的焦点的 bug

 

    解决方案：请将 jquery.ztree.core-3.0.js 中 621行 的 if (x) { 修改为  if (x && $("input:focus").length == 0) { 

    以上解决方案会导致 IE6 下编辑模式出现异常 （因此需要用 try catch 将 这个 if 段落包起来）。

 

9、【修改】beforeRename / onRename 的触发方式——即使名称内容未改变也会触发，便于用户配合 beforeEditName 捕获编辑状态的结束，赋予用户更多调整规则的权利

    修正完毕，随v3.0正式版发布

 

10、【修改】与 easyUI 共存时无法拖拽的 bug

    解决方案：请将 Line 442左右的 if (settings[s].edit.enable && settings[s].treeId != setting.treeId 替换为 if (settings[s].treeId && settings[s].edit.enable && settings[s].treeId != setting.treeId

 

11、【修改】beforeRename 在 Firefox 下如果利用 alert，会触发两次的 bug

    修正完毕，随v3.0正式版发布

    补充：重新修正了一下，beforeName如果return false，将不会强行让input 获取焦点，这样可以避免blur导致的反复验证。 同时使用editName 方法可以主动设置 input 获取焦点，便于控制

 

12、【修改】checkNode/expandNode/removeNode 方法，默认不触发回调函数，恢复 v2.6 的默认状态，同时增加 callbackFlag 参数，设置为 true 时，可以触发回调函数

    修正完毕，随v3.0正式版发布

 

13、【修改】IE9下“根据参数查找节点”的Demo 报错：行14 重新声明常量属性

    修正完毕，随v3.0正式版发布（Demo自身问题，无意间定义了变量名为 history 导致！）

 

14、【修改】初始化 zTree 时 onNodeCreated 事件回调函数中无法 用 getZTreeObj 获取 zTree 对象的 bug

    修正完毕，随v3.0正式版发布

 

15、【修改】setting.edit.drag.prev / next / inner 参数，增加被拖拽的节点集合

    修正完毕，随v3.0正式版发布

 

16、【修改】异步加载模式下，otherParam 使用 Array 数组会出错的 bug。例如： ["id", "1", "name", "test"]

   解决方案1：请先使用 JSON 数据进行设置，不要使用 Array 数组

   解决方案2：请将 core 的 js 代码中 asyncParamOther 替换为 async.otherParam 即可

 

17、【修改】FireFox 下多棵树之间无法正常拖拽的 bug

    修正完毕，随v3.0正式版发布

 

18、【修改】exedit 中调用 excheck库的方法时没有进行容错处理，导致如果只加入 exedit 而没有 excheck的时候，会出现 js 错误

    修正完毕，随v3.0正式版发布

 

19、【修改】显示 checkbox 的 zTree 在编辑模式下，移动节点不会更新父节点半选状态的 bug

    修正完毕，随v3.0正式版发布

 

20、【修改】treeNode.childs --> children; treeObject.removeChilds --> removeChildNodes; setting.data.key.childs --> children（英文不好惹的祸！抱歉了！）

    修正完毕，随v3.0正式版发布

 

21、【修改】onRemove 回调中得到的 treeNode 还可以查找 preNode、nextNode 的bug。 修正后，getPreNode 和 getNextNode 都返回 null； 为了便于查找父节点，getParentNode 仍保留

    修正完毕，随v3.0正式版发布

 

22、【修改】简单数据模式下，如果 id 与 pId 的值相同会导致该节点无法正常加载的 bug

    修正完毕，随v3.0正式版发布

 

23、【修改】移动或删除中间节点会导致最后一个节点连接线图标变小的 bug

 

    修正完毕，随v3.0正式版发布

 

评论

182 楼 lidabo712 2011-12-16  

zTree是否可以设置有些节点带checkbox，有些节点不带checkbox，即是否可以针对每个节点设置带不带checkbox？

181 楼 hyper2k 2011-12-15  

能不能把节点的行间距做大点，比如22px，18px的间距太小了，中文本身就比英文要大的。

180 楼 jimlgx 2011-12-14  

zTree 使用确实不错，速度和美观程度都挺好

参考demo中
构建树的代码

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

获得树对象的代码

	var zTree = $.fn.zTree.getZTreeObj("treeDemo"),

感觉这种方式 是不是 可以考虑 修改为类似于

 var zTree=	$("#treeDemo").ztree({setting:setting,nodeData:zNodes});

大多jQuery 插件使用这种方式，如 jquery UI
建议保留这种习惯吧！

179 楼 zTreeAPI 2011-12-14  

doc1388 写道

1、通过初始化获取的，

removeNode效果是有的，但是在firefox中报了is not a function错误

2、手动触发click节点的js楼主给下代码呢

1、请确认你用来 remove 的node 数据是从zTree 内部获取的。
2、手动触发 click，没有现成的代码，还请自己学习实践一下。

  关于手动触发 click 事件，大概方法。
  (1) 直接用js 的fireEvent 方法或者 用jQuery 的trigger 方法实现你的需求。（如何实现可以去 google 搜索 jQuery 的trigger）
  (2) 直接用js 调用onclick 方法，同时利用 selectNode 方法选中你的目标节点。
   这个就是用js 去调用 onClick回调指定的那个函数即可，传入对应的参数。 selectNode 去看看API如何使用。

178 楼 doc1388 2011-12-12  

1、通过初始化获取的，

removeNode效果是有的，但是在firefox中报了is not a function错误

2、手动触发click节点的js楼主给下代码呢

177 楼 zTreeAPI 2011-12-12  

doc1388 写道

nodes[0]是存在的，tree也是存在的

tree.removeNode(nodes[0]);

显示错误： tree.removeNode is not a function

你的tree 是什么对象？ 怎么得到的？ 正确的treeObj 得到的方法有两个：
1、初始化语句 返回的结果
2、通过 $.fn.zTree.getZTreeObj 方法获取

176 楼 doc1388 2011-12-12  

nodes[0]是存在的，tree也是存在的

tree.removeNode(nodes[0]);

显示错误： tree.removeNode is not a function

175 楼 doc1388 2011-12-12  

能否给一下代码，已知node了，触发click

174 楼 zTreeAPI 2011-12-12  

doc1388 写道

顺带问下如何通过一个节点获取子节点

1、关于手动触发 click事件，因为不清楚你具体的需求，大概讲解一下方法。
(1) 直接用js 的fireEvent 方法或者 用jQuery 的trigger 方法实现你的需求。
(2) 直接用js 调用onclick 方法，同时利用 selectNode 方法选中你的目标节点

2、关于获取子节点
  v3.0 beta 可以看 setting.data.key.childs 这个属性。 如果你没有设置，那么默认子节点都是 treeNode.childs 属性内。 但正式版发布时会将 childs 修改为 children 。
  如果你还在用 v2.6 那么默认的就是 nodes 属性

173 楼 doc1388 2011-12-10  

顺带问下如何通过一个节点获取子节点

172 楼 doc1388 2011-12-09  

楼主，你好，请问下，我用了ztree，感觉很好，准备把原来的xtree替换掉，现在碰到了一个问题：

function clickNode(event, treeId, treeNode){   
    tree.selectNode(treeNode);   
    parent.changeSysMenu(treeNode.value);   
}   
  
var tree;   
var setting = {   
    async: {enable: true,url: getUrl},   
    callback: {   
        onClick: clickNode,   
        onExpand: clickNode,   
        onCollapse: clickNode   
    }   
};  

function clickNode(event, treeId, treeNode){
	tree.selectNode(treeNode);
	parent.changeSysMenu(treeNode.value);
}

var tree;
var setting = {
	async: {enable: true,url: getUrl},
	callback: {
		onClick: clickNode,
		onExpand: clickNode,
		onCollapse: clickNode
	}
};

我在点击节点时触发clickNode函数，然后调用另一个函数更改一个页面地址

我如何通过js手动触发onclick事件

171 楼 msphell 2011-12-09  

msphell 写道

如何在ztree打开编辑模式的情况下。点击节点进行页面跳转，我参考了api的说明在onClick函数里进行跳转，window.location.href=treeNode.gourl;，gourl是我自定义的node属性，里面保存这url地址，初始化数据：{ id:11, pId:1, name:"叶子节点11",gourl:"www.google.hk"},现在点击节点后，页面跳转的地址不正确，在我的页面后面加上了url地址。请问要如果解决。谢谢！

问题解决了。要加上http://才是绝对路径。自己蠢了。

170 楼 msphell 2011-12-09  

如何在ztree打开编辑模式的情况下。点击节点进行页面跳转，我参考了api的说明在onClick函数里进行跳转，window.location.href=treeNode.gourl;，gourl是我自定义的node属性，里面保存这url地址，初始化数据：{ id:11, pId:1, name:"叶子节点11",gourl:"www.google.hk"},现在点击节点后，页面跳转的地址不正确，在我的页面后面加上了url地址。请问要如果解决。谢谢！

169 楼 1happy10 2011-12-07  

期待正式版，加油！

168 楼 zTreeAPI 2011-12-07  

kkgoing 写道

右键功能怎么只有添加和删除，没有修改功能，希望加上，呵呵

你好， 对于 zTree 本身来说右键没有任何功能！ zTree 只不过提供了 右键的回调函数，Demo中只是为了演示如何监控右键的操作。

167 楼 kkgoing 2011-12-07  

右键功能怎么只有添加和删除，没有修改功能，希望加上，呵呵

166 楼 zTreeAPI 2011-12-05  

citybug 写道

....

关于添加子节点：
如果你是自己写逻辑，添加子节点，那么你必须要在添加子节点之前判断是否该子节点已经添加。 如果你用了zTree提供的异步加载功能，那么不会重复进行异步加载。 这个具体问题要看你的实际需求而定。

补充： 同一个问题请不要再每个地方都发一遍，谢谢。

165 楼 citybug 2011-12-05  

citybug 写道

使用addNodes添加子节点时，JS出现错误：对象不支持属性或方法。
代码如下：

function nodeClick()
{
	var zTreeObj=$.fn.zTree.getZTreeObj("DeptTree");
	var selectNode=zTreeObj.getSelectedNodes();
	var id=selectNode[0].id;
	var zNodes=new Array();

	$.ajax({   
        async : false,   
        cache:false,   
        type: 'GET',   
        dataType : "text/xml",   
        url: "http://localhost:8080/BSFRAME/selectdept.do?method=AsyncNode&id=" + id,//请求的action路径   
        error: function () {//请求失败处理函数   
            alert('请求失败');   
        },   
        success:function(data){ //请求成功后处理函数。       
            var nodes=dealData(data);
            for(var i=0;i<nodes.length;i++)
            {
            	var node="{\"id\":\"" +nodes[i].id + "\",\"pId\":\"" + nodes[i].superid + "\",\"name\":\"" + nodes[i].text + "\"}";
            	var obj=eval('(' + node + ')');
            	zNodes.push(obj);
            }   
        }   
    }); 
    alert("aaa");
    zNodes=[{id:"12345",pId:"000002",text:"单位22"}];
    newNodes=zTreeObj.addNodes(setting,selectNode[0],zNodes,true);
}

能运行到alert("aaa");，就是最后一句报错。
我试过newNodes=zTreeObj.addNodes(selectNode[0],zNodes,true);也是报同样的错误。


另有一个问题请教，通过点击一个节点来添加子节点，会不会每次点击都添加一遍？如何避免这种问题？

JS出错的问题解决了，是少包含了一个JS文件。但是其他问题还得请教。

164 楼 citybug 2011-12-05  

使用addNodes添加子节点时，JS出现错误：对象不支持属性或方法。
代码如下：

function nodeClick()
{
	var zTreeObj=$.fn.zTree.getZTreeObj("DeptTree");
	var selectNode=zTreeObj.getSelectedNodes();
	var id=selectNode[0].id;
	var zNodes=new Array();

	$.ajax({   
        async : false,   
        cache:false,   
        type: 'GET',   
        dataType : "text/xml",   
        url: "http://localhost:8080/BSFRAME/selectdept.do?method=AsyncNode&id=" + id,//请求的action路径   
        error: function () {//请求失败处理函数   
            alert('请求失败');   
        },   
        success:function(data){ //请求成功后处理函数。       
            var nodes=dealData(data);
            for(var i=0;i<nodes.length;i++)
            {
            	var node="{\"id\":\"" +nodes[i].id + "\",\"pId\":\"" + nodes[i].superid + "\",\"name\":\"" + nodes[i].text + "\"}";
            	var obj=eval('(' + node + ')');
            	zNodes.push(obj);
            }   
        }   
    }); 
    alert("aaa");
    zNodes=[{id:"12345",pId:"000002",text:"单位22"}];
    newNodes=zTreeObj.addNodes(setting,selectNode[0],zNodes,true);
}

能运行到alert("aaa");，就是最后一句报错。
我试过newNodes=zTreeObj.addNodes(selectNode[0],zNodes,true);也是报同样的错误。


另有一个问题请教，通过点击一个节点来添加子节点，会不会每次点击都添加一遍？如何避免这种问题？

163 楼 zTreeAPI 2011-12-02  

liu47a 写道

zTree生成的复选框选中后只能异步方式提交吗？ 我想把生成的树放在Form表单中，然后直接submit提交，但不知道后台怎么获取啊？ 怎么定义复选框的名称呢？

OMG，建议不要这么做，因为 zTree 的复选框根本不是标准的checkbox 、radio 控件。
你利用treeNode 数据拼接字符串传给后台就是了。