一，扩展要求

真的是没有对比就没有伤害。如果只是单纯的按照ztree的api去异步加载树结构，那么就会使左图那个样子。

特点：1，所有的节点前面均会有radio(因为设置的是radio:"all"属性)。

2，只有在点击节点前面的“加减号”才可以展开或者是收起子节点。

于是问题出现了。1，我们想要在点击节点的时候，而不是一定要去点击“加减号”的时候子节点展开或者收起。

2，我们想要在特点的节点前面加上特定的选框，而不是在所有节点前面都加。

二，解决方案

1，点击节点也可以展开或者收起子节点。

var setting = {
async:{
autoParam:["parentId"],
enable:true,
type:"post",
url:getUrl,
dataFilter:filter,
},
check : {
chkStyle: "radio",
enable: false,
chkboxType : { "Y" : "s", "N" : "ps" },
radioType : "level"
},
view: {
dblClickExpand: false,
addDiyDom:addDiyDom
},
data : {
key : {
name : "unitName"
},
simpleData : {
enable : true,
idKey : "id",
pIdKey : "parentId",
rootPId : 0
}
},
callback : {
beforeAsync : ztreeBeforeAsync,
onAsyncSuccess : ztreeOnAsyncSuccess,
onClick:ztreeOnAsyncSuccess
}
};

只需要添加一个点击事件的回调函数就好了，且就调用onAsyncSuccess 参数所设置的方法就好了。只不过有些需要注意的地方。

1，添加点击事件加载之后，ztreeOnAsyncSuccess这个方法会被调用两次，一次是点击事件调用，还有一次应该就是ztree框架封装好的异步加载调用。所以在方法中需要限制一下，如果是框架封装好的调用，他的效果是如果发现已经有子节点了，则不会重复加载，但是onclick事件也在调用，就需要我们注意了，如果每次都直接是取子节点然后加载，那么每次点击，每次加载，就会有一堆重复的子节点被加载上来。所以需要在方法中限定，如果发现有子节点了，则展开就好，没有的话，再去后台取数据。还有就是如果发现子节点是展开的，那么就收起，如果不是，则展开。保证一次点击展开子节点，再次点击收起子节点。

2，在特点的节点前面加上特点的选框。那么在setting中radioType设置成“all”或者“level”已经作用不大了。关键的设置是 view中的addDiyDom:addDiyDom设置

这个设置就是让你对特定的节点做出特殊的处理。

主要注意的是，如果你的选框是后加上的，那么你对节点的事件也需要重新绑定，重新按照需求写。否则也只是空加了一个选框而已。

前台小白默默的把我的代码贴上来吧。

<pre name="code" class="javascript">function addDiyDom(treeId, treeNode){
		// 只在社区节点前面添加radio选框
		var unitCode = treeNode.unitCode;
		if(unitCode.length != 12){
			return ;
		}
		var aObj = $("#" + treeNode.tId + "_a");
		var editStr = "<input type='radio' name = 'unitName' class='input-radio' id='radio_" +treeNode.id+"_"+treeNode.pId+"'></input>";
		aObj.before(editStr);
		var btn = $("#radio_"+treeNode.id+"_"+treeNode.pId);
		if (btn) {
            btn.bind("click", function() {nodeCheck(treeNode,btn);});
        }
	};
function nodeCheck(treeNode,btn){
  if(btn.attr("checked"){
    // TODO:
  }
 else{
   // TODO:
 }
}

秒客网

ZTree学习(三)，ztree树扩展

一，扩展要求

二，解决方案

相关文章