treegrid添加复选框, 附带级联事件(自用, 非法调用方式不做处理)

引入treegridEvent.js

/**
 * 自定义树型表格事件及方法（级联时用）
 * 针对手动加的复选框, 相关的事件及方法
 */
var treegridEvent = {
		cascade : true,		//是否级联
		linkage : false,	//行选中与复选框勾选是否联动
		gridId : "domain_treegrid",	//表格id
		//复选框选中事件
		onChecked : function(nodeId, isChecked){
			//阻止冒泡, 目的是点击复选框时, 不触表格的click事件, 而是手动加样式
			event.stopPropagation();
			//获取树图jquery对象以及真实表格的table对象
			var linkage = this.linkage,
				$treegrid = $("#"+this.gridId),
				$table = $treegrid.prev(".datagrid-view2")
								.children(".datagrid-body")
								.children(".datagrid-btable");
			if(linkage){
				//根据isChecked, 设置当前行选中或不选中
				if(isChecked){
					$treegrid.treegrid("select", nodeId);
				}else{
					$treegrid.treegrid("unselect", nodeId);
				}//if
			}
			if(!this.cascade){
				return;		//如果不级联, 就此结束
			}
			
			/**
			 * 级联共有四种情况
			 * 父选中, 父取消, 子选中, 子取消
			 * 下面对四种情况做处理
			 */
			
			//父选中或取消, 子一定随之而动
			var children = $treegrid.treegrid("getChildren", nodeId);//该方法可跨代获取
			for(var i=0,len=children.length; i<len; i++){
				var child = children[i],
					childId= child.CODE;
				$table.find('input[name="treegrid_box"][value="'+childId+'"]').attr("checked", isChecked);
				if(linkage){
					//根据isChecked, 设置当前行选中或不选中
					if(isChecked){
						$treegrid.treegrid("select", childId);
					}else{
						$treegrid.treegrid("unselect", childId);
					}//if
				}
			}//for
			
			if(isChecked){
				/* 子级选中后, 对父级的处理, 调用递归 */
				treegridEvent.onChildChecked(nodeId);
			}else{
				/* 子取消选中, 父也一定取消 */
				//先递归获取所有父节点
				var parentIds = this.recurGetParents(nodeId);
				//遍历父节点, 一一做处理
				for(var i=0,len=parentIds.length; i<len; i++){
					var parentId = parentIds[i];
					$table.find('input[name="treegrid_box"][value="'+parentId+'"]').attr("checked", false);
					if(linkage){
						$treegrid.treegrid("unselect", parentId);	//取消勾选后, 设置行取消选中
					}
				}
			}
		},
		//子级选中后, 对父级的处理, 因为递归, 所以提出来写成方法
		onChildChecked : function(nodeId){
			var linkage = treegridEvent.linkage,
				$treegrid = $("#"+treegridEvent.gridId),
				$table = $treegrid.prev(".datagrid-view2")
								.children(".datagrid-body")
								.children(".datagrid-btable");
			/**
			 * 子选中, 如果其他兄弟都选中, 那么父也选中
			 * 总共分五步
			 */
			//第一步, 先获取父级
			var parent = $treegrid.treegrid("getParent", nodeId);
			if(!parent){	//避免父级为null情况
				return;
			}
			var parentId = parent.CODE,
				flag = true;	//开关默认为true
			//第二步, 获取父级的所有子级
			var children = $treegrid.treegrid("getChildren", parent.CODE);
			for(var i=0,len=children.length; i<len; i++){
				var child = children[i];
				/*
				 * 过滤出节点的兄弟级
				 * 因为插件的getChildren方法, 获取的是所有后代, 也就是跨代获取
				 * 所以要根据子级的父id, 与原始父id对比
				 * 如果相同, 则是兄弟级, 否则不是
				 */
				if(child.PARENT_CODE == parentId){
					//第三步, 获取兄弟的checked属性
					var chiIsChecked = 
						$table.find('input[name="treegrid_box"][value="'+child.CODE+'"]').attr("checked");
					/* 如果有一个兄弟没被选中, 那么开关设置为false */
					if(!chiIsChecked){
						flag = false;
						break;	//之后的也没必要判断了, 直接break
					}
				}
			}
			//第四步, 根据之前得出的开关flag, 设置父级是否选中
			if(flag){
				$table.find('input[name="treegrid_box"][value="'+parentId+'"]').attr("checked", true);
				if(linkage){
					$treegrid.treegrid("select", parentId);	//勾选后, 设置行选中
				}
				//第五步, 如果父级选中了, 那么要找到父级的兄弟级, 继续做同样判断, 可用递归
				treegridEvent.onChildChecked(parentId);
			}
		},
		//递归获取所有父节点, (子级取消选中时用)
		recurGetParents : function(nodeId){
			var $treegrid = $("#"+treegridEvent.gridId),
				parent = $treegrid.treegrid("getParent", nodeId);
			if(parent){
				var parentId = parent.CODE;
				var parentIds = treegridEvent.recurGetParents(parentId);
				parentIds.push(parentId);
				return parentIds;
			}else{
				return [];
			}
		},
		//获取选中的checkbox
		getCheckedBoxes : function(){
			var boxArr = $("#"+this.gridId)
							.prev(".datagrid-view2")
							.children(".datagrid-body")
							.children(".datagrid-btable")
							.find("input[name='treegrid_box']:checked");
			return boxArr;
		}
};

之后正常初始化treegrid, 需要注意onClickRow事件中的写法(其实是判断复选框的勾选与行选中是否联动), 参考如下:

init : function(){
	$("#domain_treegrid").treegrid({
		idField: "CODE",
		treeField: "NAME",
		columns:[[
			{field:'NAME',title:'专业名称',width:100,align:"left",
				formatter: function(val, rowData, index){
					var html = ''
						+'<input type="checkbox" name="treegrid_box" '
						+	'style="margin-left:5px;" '
						+	'value="'+rowData.CODE+'" ' 
						+	'οnclick="treegridEvent.onChecked(this.value, this.checked);" />'
						+ val;    //非级联时，不加onclick事件
					return html;
				}},
			{field:'REMARK',title:'备注',width:300,align:"center"},
			{field:'PARENT_CODE',title:'父节点',width:100,align:"center",hidden:true}
		]],
		animate: true,
		fitColumns: true,
		singleSelect: true,
		data: [],
		onClickRow : function(row){
			if(treegridEvent.linkage){
				var nodeId = row.CODE,
					$tr = $("#domain_treegrid")
						.prev(".datagrid-view2")
						.children(".datagrid-body")
						.children(".datagrid-btable")
						.children("tbody")
						.find('tr[node-id="'+nodeId+'"]'),
					//找到当前行的dom, 根据是否有特定class判断是否选中
					isChecked = $tr.hasClass("datagrid-row-selected");
				//根据isChecked, 为复选框设置状态
				$tr.find('input[type="checkbox"][name="treegrid_box"]').attr("checked", isChecked);
				//之后调用onChecked事件
				treegridEvent.onChecked(nodeId, isChecked);
			}
		}
	});
}