EasyUI TreeGrid树形网格添加复选框

问题由来

最近想给EasyUI的树形网格上添加复选框， 并实现复选框的功能。
但是， 查看EasyUI官网， 发现树形网格， 并没有这checkbox类似的属性。
干脆动手写一个吧。

思路

一开始的想法很单纯，点击父级就选中全部子级； 点击所有子级后选中父级；这个想法有一个易错点就是容易在判断过程中就设置复选框的选中状态， 这会影响之后的判断。
略作思考，那可定就在最后选中复选框吧。之前的过程只是选出哪些复选框是选中的。将所有该选中的复选框放到一个数组nodeAdd里就可以了。但是如果选中父级后， 点击其下子级， 父级节点应该去掉。 那就在增加一个nodeSub。这样一切就简单了。

最后理一下思路， 点击复选框无非就是点父级， 点子级， 所以程序一开始要做个判断。 分别对点击父级，和点击子级做判断。
点击父级时，有未选时点击和选中时点击两种情况。 其实我们可以将其弄在一起， 当选中的节点中包含当前点击的节点，就是选中；不包含就是取消选中。 选中时使用nodeAdd补充子级节点。取消时，在nodeSub中添加子级节点。
点击子级时， 要对点击同类子级的数量计数， 如果同类子级全部选中则nodeAdd中增加父级；否则nodeSub中增加父级。
程序的最后遍历nodeAdd和nodeSub设置复选框选中取消。
（也许你已经发现了， 我们只是对选中节点后，可能会影响到的节点，做了一下补充。）

function checkDeal(clickNode) {
	// 最终选中的节点
	var nodesAdd = []
	var nodesSub = []
	// 选中节点
	var selects = $('#tree').treegrid('getSelections');
	var clickId = clickNode.id;
	var clickPid = clickNode._parentId;
	var clickType = clickNode.type;
	// 点击父级节点
	if(clickType == '父级节点类型（私密）'){
		var status = false
		$.each(selects, function(index, select){
			if(select.id == clickId){
				status = true
				// 如果选中节点中有当前父级节点， 则其子级节点全部选中
				$.each(select.children, function(index, childdata){
					nodesAdd.push(childdata.id)
				})
				return false;
			}
		})
		// 如果选中节点中没有当前父级节点， 则其子级节点全部不选
		if(!status){
			$.each(selects, function(index, select){
				var selectPid = select._parentId;
				var selectId = select.id;
				if(selectPid == clickId){
					nodesSub.push(selectId)
				}
			})
		}
	} else{
		var currParent = $('#tree').treegrid('find', clickPid)
		var length = currParent.children.length
		var currParentId = currParent.id
		var cnt = 0;
		$.each(selects, function(select, data){
			// 寻找父级节点， 并确定子级数量
			if(data._parentId==currParentId){
				cnt++
			}
		})
		if(cnt == length){
			nodesAdd.push(currParentId)
		}else{
			nodesSub.push(currParentId)
		}
	}
	
	// 增加选中节点
	$.each(nodesAdd, function(index, node){
		$('#tree').treegrid('select', node)
	})
	$.each(nodesSub, function(index, node){
		$('#tree').treegrid('unselect', node)
	})
	
}

比较重要的方法

1. 设置节点选中、取消选中
   $(’#id’).treegrid(‘select’, id)
   $(’#id’).treegrid(‘unselect’, id)
2. 获取选中的所有节点
   $(’#id’).treegrid(‘getSelections’);
3. 获取某节点的值
   $(’#id’).treegrid(‘find’, id)
4. 点击的节点事件
   ,onClickRow : function(data){
   checkDeal(data)
   }
   你可能需要配合以下属性
   singleSelect : false,
   checkOnSelect : true,
   selectOnCheck : true,
   注意自己定义的复选框要包上一层easyUI复选框的样式。否则选中一行是无法关联上复选框选中的。

   '<div class="datagrid-cell-check ">'
   +'<input type="checkbox" name="check33" style="float:left"/>'
   +index+'</div>'
   

最后的样纸

参考

EasyUI官网 http://www.jeasyui.net/plugins/186.html