zTree之checkbox选中事件---获取状态改变的结点

zTree 简介

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

    zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。

主页：http://www.ztree.me

我要实现的是一个基于ztree的树状列表，如下图所示：

各个列表项用checkbox控制，可以选择或取消选择。

通过checkbox控制各个地图图层的显示与隐藏。

实现过程：

照搬demo\cn\excheck\checkbox.html里面的代码

重点一：

setting 加上回调函数 zTreeOnCheck，对checkbox的点击进行响应。

重点二：

setting.check.chkboxType = { "Y" : "s", "N" : "s" };

Y指的是勾选checkbox的时候对父结点或子结点产生的影响

N指的是取消checkbox的时候对父结点或子结点产生的影响

大小写是有区另的。s指子结点，p指父结点

重点三：

zNodes中的数据自行输入，pId控制这个子结点的父结点是哪个。icon可以自定义。

重点四：

clearCheckedOldNodes要在onCheck响应函数中执行一遍。

如下是其API中的解释。

（如果需要获取每次操作后全部被改变勾选状态的节点数据，请在每次勾选操作后，遍历所有被改变勾选状态的节点数据，让其 checkedOld = checked 就可以了。）

如果不这样，会出现第2次点击checkbox不产生onCheck的响应。

参见demo\cn\excheck\checkbox_count.html文件。

重点五：得到改变状态的checkbox

var zTree = $.fn.zTree.getZTreeObj("treeWaterLayer");//换成实际的图层的id
var changedNodes = zTree.getChangeCheckedNodes(); //获取改变的全部结点
for ( var i=0 ; i < changedNodes.length ; i++ ){
	var treeNode = changedNodes[i];
	console.log((treeNode?treeNode.name:"root") + "checked " +(treeNode.checked?"true":"false"));
	}

详细代码如下所示：

在html中就是写一个div

重点五：得到改变状态的checkbox

var zTree = $.fn.zTree.getZTreeObj("treeWaterLayer");
var changedNodes = zTree.getChangeCheckedNodes();
for ( var i=0 ; i < changedNodes.length ; i++ ){
	var treeNode = changedNodes[i];
	console.log((treeNode?treeNode.name:"root") + "checked " +(treeNode.checked?"true":"false"));
	}

-------------------

江柏安粉丝网