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"));
	}

详细代码如下所示：

	<SCRIPT type="text/javascript">
		//<!--
		var setting = {
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onCheck: zTreeOnCheck
			},
			view: {
				selectedMulti: false
			}
		};
		setting.check.chkboxType = { "Y" : "s", "N" : "s" };
		//Y 属性定义 checkbox 被勾选后的情况； 
		//N 属性定义 checkbox 取消勾选后的情况； 
		//"p" 表示操作会影响父级节点； 
		//"s" 表示操作会影响子级节点。
		
		var zNodes =[
			{ id:1, pId:0, name:"水资源分区", open:true},
			{ id:10, pId:1, name:"河流", checked:true, open:true},
			{ id:11, pId:1, name:"湖泊", checked:true},
			{ id:2, pId:1, name:"水库", checked:true, open:true},
			{ id:21, pId:2, name:"大一型水库", checked:true, open:true},
			{ id:22, pId:2, name:"大二型水库", checked:true},
			{ id:23, pId:2, name:"中型水库", checked:true, icon:"./images/car1.png"},
			{ id:24, pId:2, name:"小一型水库", checked:true, icon:"./images/car2.png"},
			{ id:25, pId:2, name:"小二型水库", checked:true},
			{ id:3, pId:1, name:"大坝", checked:true, open:true},
			{ id:31, pId:3, name:"一级堤防", checked:true},
			{ id:32, pId:3, name:"二级堤防", checked:true},
			{ id:33, pId:3, name:"三级堤防", checked:true},
			{ id:34, pId:3, name:"四级堤防", checked:true},
			{ id:35, pId:3, name:"未分级堤防", checked:true},
			{ id:4, pId:0, name:"世界地图", checked:true},
			{ id:5, pId:0, name:"世界地图_Night", checked:true},
		];
		
		function zTreeOnCheck(event, treeId, treeNode) {
			//var checked = treeNode.checked;
			//console.log((treeNode?treeNode.name:"root") + "checked " +(checked?"true":"false"));
			refreshLayers();
			clearCheckedOldNodes();
		};
		//刷新图层的显示情况
		var layers;
		function refreshLayers() {
			var zTree = $.fn.zTree.getZTreeObj("treeWaterLayer");
			var changedNodes = zTree.getChangeCheckedNodes();
			for ( var i=0 ; i < changedNodes.length ; i++ ){
				var treeNode = changedNodes[i];
				layers = map.getLayersByName(treeNode.name);
				if(layers!=null && layers[0]!=null){
					layers[0].setVisibility(treeNode.checked);
				}
					
				console.log((treeNode?treeNode.name:"root") + "checked " +(treeNode.checked?"true":"false"));				
			}
		}
		//清理善后工作
		function clearCheckedOldNodes() {
			var zTree = $.fn.zTree.getZTreeObj("treeWaterLayer"),
			nodes = zTree.getChangeCheckedNodes();
			for (var i=0, l=nodes.length; i<l; i++) {
				nodes[i].checkedOld = nodes[i].checked;
			}
		};		
		$(document).ready(function(){
			$.fn.zTree.init($("#treeWaterLayer"), setting, zNodes);
		});
		//-->
	</SCRIPT>

在html中就是写一个div

			<div class="zTreeDemoBackground left" align="right" style="overflow-y:auto;height:400px;">
				<ul id="treeWaterLayer" class="ztree"></ul>
			</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"));
	}

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

江柏安粉丝网