EasyUI配置当点击一个datagrid的checkbox选中或取消选中记录的时候刷新另一个datagrid数据的方法

今天写一个web的时候碰到了需要根据datagrid A的课程记录来刷新datagrid B的参考书目数据的需求。

那么，我们需要在加载datagrid A的时候需要添加四个监视事件来监控并通过这些事件触发datagrid B的刷新。这四个事件的名称：

onCheck, onUncheck, onCheckAll, onUncheckAll

他们的意思分别是选中，取消选中，选中所有，取消选中所有。

下面来看下datagrid A的代码：

$('#class1_in').datagrid({
			url : 'MyClassServlet',
			method : 'get',
			columns : [ [ {
				field : 'CHECK',
				checkbox : true
			}, {
				field : 'COURSEID',
				title : '课程编号',
				width : 80,
				align : 'center'
			}, {
				field : 'COURSENAME',
				title : '课程名称',
				width : 80,
				align : 'center'
			}, {
				field : 'DISCIPLINENAME',
				title : '专业名称',
				width : 80,
				align : 'center'
			} ] ],
			singleSelect : false,
			selectOnCheck : true,
			checkOnSelect : true,
			onHeaderContextMenu : function(e, field) {
				e.preventDefault();
				if (!cmenu) {
					createColumnMenu();
				}
				cmenu.menu('show', {
					left : e.pageX,
					top : e.pageY
				});
			},
		    onCheck:  function(rowIndex, rowData) {
		    	$('#class2_in').datagrid({
					url : 'MyClassServlet',
					method : 'get',
					columns : [ [ {
						field : 'CHECK',
						checkbox : true
					}, {
						field : 'COURSEID',
						title : '课程编号',
						width : 80,
						align : 'center'
					}, {
						field : 'COURSENAME',
						title : '课程名称',
						width : 80,
						align : 'center'
					}, {
						field : 'DISCIPLINENAME',
						title : '专业名称',
						width : 80,
						align : 'center'
					} ] ],
					singleSelect : false,
					selectOnCheck : true,
					checkOnSelect : true,
					onHeaderContextMenu : function(e, field) {
						e.preventDefault();
						if (!cmenu) {
							createColumnMenu();
						}
						cmenu.menu('show', {
							left : e.pageX,
							top : e.pageY
						});
					},
					loadFilter: function(data) {
						return loadFilter(data);
					}
				});
		    },
		    onUncheck:  function(rowIndex, rowData) {
		    	$('#class2_in').datagrid({
					url : 'MyClassServlet',
					method : 'get',
					columns : [ [ {
						field : 'CHECK',
						checkbox : true
					}, {
						field : 'COURSEID',
						title : '课程编号',
						width : 80,
						align : 'center'
					}, {
						field : 'COURSENAME',
						title : '课程名称',
						width : 80,
						align : 'center'
					}, {
						field : 'DISCIPLINENAME',
						title : '专业名称',
						width : 80,
						align : 'center'
					} ] ],
					singleSelect : false,
					selectOnCheck : true,
					checkOnSelect : true,
					onHeaderContextMenu : function(e, field) {
						e.preventDefault();
						if (!cmenu) {
							createColumnMenu();
						}
						cmenu.menu('show', {
							left : e.pageX,
							top : e.pageY
						});
					},
					loadFilter: function(data) {
						return loadFilter(data);
					}
				});
		    },
		    onCheckAll:  function(rowIndex, rowData) {
		    	$('#class2_in').datagrid({
					url : 'MyClassServlet',
					method : 'get',
					columns : [ [ {
						field : 'CHECK',
						checkbox : true
					}, {
						field : 'COURSEID',
						title : '课程编号',
						width : 80,
						align : 'center'
					}, {
						field : 'COURSENAME',
						title : '课程名称',
						width : 80,
						align : 'center'
					}, {
						field : 'DISCIPLINENAME',
						title : '专业名称',
						width : 80,
						align : 'center'
					} ] ],
					singleSelect : false,
					selectOnCheck : true,
					checkOnSelect : true,
					onHeaderContextMenu : function(e, field) {
						e.preventDefault();
						if (!cmenu) {
							createColumnMenu();
						}
						cmenu.menu('show', {
							left : e.pageX,
							top : e.pageY
						});
					},
					loadFilter: function(data) {
						return loadFilter(data);
					}
				});
		    },
		    onUncheckAll:  function(rowIndex, rowData) {
		    	$('#class2_in').datagrid({
					url : 'MyClassServlet',
					method : 'get',
					columns : [ [ {
						field : 'CHECK',
						checkbox : true
					}, {
						field : 'COURSEID',
						title : '课程编号',
						width : 80,
						align : 'center'
					}, {
						field : 'COURSENAME',
						title : '课程名称',
						width : 80,
						align : 'center'
					}, {
						field : 'DISCIPLINENAME',
						title : '专业名称',
						width : 80,
						align : 'center'
					} ] ],
					singleSelect : false,
					selectOnCheck : true,
					checkOnSelect : true,
					onHeaderContextMenu : function(e, field) {
						e.preventDefault();
						if (!cmenu) {
							createColumnMenu();
						}
						cmenu.menu('show', {
							left : e.pageX,
							top : e.pageY
						});
					},
					loadFilter: function(data) {
						return loadFilter(data);
					}
				});
		    }
		});

可以看到上面的代码里面，第一个datagrid加载了上面提到的四个事件并且在每个事件里都另外加载了另一个datagrid #class2_in。

这样可以实现鼠标触发这些事件的时候加载#class2_in，但是这还不能实现根据#class1_in刷新#class2_in的功能。

请注意上面代码的每一个事件的datagrid里面都有这样一段：

loadFilter: function(data) {
						return loadFilter(data);
					}

而这个loadFilter事件就是关键，我们先来看看EasyUI官网关于这个属性的说法：

大意是：这个属性使datagrid展示过滤后的数据，这个事件后面要调用一个函数，这个函数将data作为入参，最终需要返回两个属性给datagrid：total和rows这两个属性。

在上面我们的代码里面，我们是这样写的： return loadFilter(data);。 现在我们来看看这个js函数的写法：

	function getDatagrid( str ) {
		var checkedItems = $( str ).datagrid('getChecked');
		var result = [];
		$.each(checkedItems, function(index, item) {
			var obj = new Object();
			obj.COURSEID = item.COURSEID;
			obj.COURSENAME = item.COURSENAME;
			obj.DISCIPLINENAME = item.DISCIPLINENAME;
			result.push(obj);
		});
		return result;
	}
	
	function loadFilter(data) {
		var i = 0, j = 0, count = 0;
		var result = getDatagrid('#class1_in');
		var length = data.length;
		
		for(i = 0; i < length; i ++) {
			for(j = 0; j < result.length; j ++) {
				if( data[i].COURSEID == result[j].COURSEID ) {
					count ++;
					break;
				}
				//alert(data[i].COURSEID + " " + result[j].COURSEID);
			}
			if( count <= 0 ) {
				data.splice(i,1);
				length --;
				i --;
			}
			count = 0;
		}
		
		var value = {  
	            total: data.length, 
	            rows: data
	    }; 
    	
    	return value;
	}

loadFilter这个函数还调用了一个getDatagrid函数获取#class1_in的被选中的内容。

我的两个列表的关联的规则是第二个列表的数据的COURSEID列的值要能在第一个列表的数据的COURSEID列里面找到。

所以我用两个for循环来将第二个列表里面的某一列数据与第一个列表里面某一列数据逐个比较，并设置一个count计数器来记录。

如果比对结果成立，count++并跳出循环直接进行下一轮比较。如果这一轮循环结束count还是为零表示比对失败，那么把data里面这一行记录删去，使用了splice函数。

同时length--，i--。注意这个地方很重要，因为如果不进行这两个操作很容易发生数组越界或者跳过了某个数的比较的情况，请读者自己想明白。

注意循环结束后还要把count置零，一边进行下一轮的循环。

最后声明一个value变量，有两个属性，total和rows，值分别是data.length和data。这就是我们需要返回给loadFilter方法的两个函数。

这样最后就大功告成了，查看效果：