jQuery zTree 异步加载添加子节点重复问题
zTree简介
zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。
zTree是开源免费的软件（MIT许可证）。如果您对zTree感兴趣或者愿意资助zTree继续发展下去，可以进行捐助。
- zTreev3.0将核心代码按照功能进行了分割，不需要的代码可以不用加载
- 采用了延迟加载技术，上万节点轻松加载，即使在IE6下也能基本做到秒杀
- 兼容IE、FireFox、Chrome、Opera、Safari等浏览器
- 支持JSON数据
- 支持静态和Ajax异步加载节点数据
- 支持任意更换皮肤/自定义图标（依靠css）
- 支持极其灵活的checkbox或radio选择功能
- 提供多种事件响应回调
- 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
- 在一个页面内可同时生成多个Tree实例
- 简单的参数配置实现灵活多变的功能
原始问题
//添加结点,产品和版本
functionaddNode(event){
rMenu.css({"visibility":"hidden"});
vartreeNode=zTree.getSelectedNodes()[0];
varpid;
varnodeName;
vartreelevel;
if(!treeNode&&event.target.tagName.toLowerCase()!="button"&&$(event.target).parents("a").length==0){
//添加产品结点
pid=0;
treeNode=null;
treelevel=1;
}elseif(treeNode){
//添加版本结点
pid=treeNode.id;
treelevel=2;
}
$.post(
"AddNode.action",
{type:treelevel,id:pid},
function(nodeIdAndName){
varparams=/([^\|]+)\|([^\|]+)/.exec(nodeIdAndName);
if(!((!treeNode&&event.target.tagName.toLowerCase()!="button"&&$(event.target).parents("a").length==0)||treeNode.open)){
zTree.expandNode(treeNode,true);
}
treeNode=zTree.addNodes(treeNode,{id:params[1],pid:pid,isParent:"true",name:params[2],editable:"true",treelevel:treelevel});
});
}
原本直接添加子节点的时候，如果父节点没有展开，会添加两个一样的子节点（第一次的时候）；后来我对父节点是否展开进行了判断，但是却变成了如果父节点展开，会添加两个一样的子节点（第一次的时候），这个问题要怎么解决呢？
办法一
将
if(!((!treeNode&&event.target.tagName.toLowerCase()!="button"&&$(event.target).parents("a").length==0)||treeNode.open)){
zTree.expandNode(treeNode,true);
}
treeNode=zTree.addNodes(treeNode,{id:params[1],pid:pid,isParent:"true",name:params[2],editable:"true",treelevel:treelevel});
改成
if(!treeNode&&event.target.tagName.toLowerCase()!="button"&&$(event.target).parents("a").length==0)
{
treeNode=zTree.addNodes(treeNode,{id:params[1],pid:pid,isParent:"true",name:params[2],editable:"true",treelevel:treelevel});
}
elseif(treeNode.open)
{
if(treeNode.isParent)
{
zTree.reAsyncChildNodes(treeNode,"refresh");
}
else
{
treeNode.isParent=true;
zTree.reAsyncChildNodes(treeNode,"refresh");
}
}
else
{
zTree.expandNode(treeNode,true);
treeNode=zTree.addNodes(treeNode,{id:params[1],pid:pid,isParent:"true",name:params[2],editable:"true",treelevel:treelevel});
}
问题就可以解决了，但是有没有优化呢？感觉改后的代码分类太多了
最优办法
貌似不用这么麻烦吧？前两天回答了类似的问题。
1、点击添加子节点后，就直接ajax传给后台保存数据，捕获success事件
2、ajaxsuccess时，利用treeNode.zAsync属性就可以知道此父节点是否进行过异步加载，如果为false那么直接reAsyncChildNodes刷新，如果为true那么利用addN...
if((!treeNode&&event.target.tagName.toLowerCase()!="button"&&$(event.target).parents("a").length==0)||treeNode.zAsync)
treeNode=zTree.addNodes(treeNode,{id:params[1],pid:pid,isParent:"true",name:params[2],editable:"true",treelevel:treelevel});
else
zTree.reAsyncChildNodes(treeNode,"refresh");
总结
以上所述是小编给大家介绍的jQueryzTree异步加载添加子节点重复问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！