easyUI datagird复选框与行选中分离

问题描述：在easyUI框架中，给数据展示表格添加一个复选框，实现可以逐个勾选功能。

首先页面布置如下：

<table id="dg"  toolbar="#toolbar"></table>

引用js对其进行内容填充：

$('#dg').datagrid({  
	        nowrap : true,// 设置为true，当数据长度超出列宽时将会自动截取
	        striped : true,// 设置为true将交替显示行背景。
	        url:'evn_elmtsummaryController/getEvn_elmtsummaryByCondition.do',// url调用Action方法
	        loadMsg : '数据装载中......',  
	        singleSelect:true,//为true时只能选择单行 为了实现批量删除必须隐去
	        fitColumns:true,// 允许表格自动缩放，以适应父容器
	        collapsible:false,
	        columns :[{
            	 field:"isSelected",
            	 title : '勾选',
checbox:true
}，{
field : 'energySummaryCode',
title : '能源编码',
hidden : true
}]


}

复选框便加上了，但是发现，每次选中每行时，复选框自动勾上。每次复选框勾上时，每一行也自动为选中状态。由于页面附有查看功能，设置singleSelect: : true表示每次只能选择一行， 但是又想可以在多个复选框中同时打勾。便需要复选框与行选中功能分开。

经过查询资料发现，easyUI 其实为我们提供了相应的功能，作如下修改:

$('#dg').datagrid({  
	        nowrap : true,// 设置为true，当数据长度超出列宽时将会自动截取
	        striped : true,// 设置为true将交替显示行背景。
	        url:'evn_elmtsummaryController/getEvn_elmtsummaryByCondition.do',// url调用Action方法
	        loadMsg : '数据装载中......',  
	        singleSelect:true,//为true时只能选择单行 为了实现批量删除必须隐去
	        fitColumns:true,// 允许表格自动缩放，以适应父容器       
	        rownumbers:true,// 行数
	        collapsible:false,
	       <span style="color:#ff0000;"> selectOnCheck: false,
	        checkOnSelect: true,</span>
	        columns : [ [
             {
            	 field:"isSelected",
            	 title : '勾选',
            	
            	 formatter: function(value, row, index) {
            		 if(value == 1){
            			  return '<input type="checkbox" onclick="changeState(this);"  checked="checked">';
            		 }else{
            			 return '<input type="checkbox" onclick="changeState(this);">';
            		 }
                 }
            }，{
field : 'energySummaryCode',

title : '能源编码',
hidden : true
}]

checkOnSelect:true;  表示当点击某一行时，复选框作出相应改变。

selectOnCheck：true; 表示当选中复选框时，自动将每一行也相应选中。

最后，formatter() 函数，是实习打勾的复现，当取出数据为1时，将复选框选中。并写了点击函数。用来改变数据库状态。

function changeState(checkbox){
		var state = 0;
		

// 获取主键
		var energySummaryCode = $(checkbox).parent().parent().next('td').children().html();
		

// 选中state = 1 ,否则为0
		if($(checkbox).is(':checked')){
			state = 1;
		}
		 $.post("evn_elmtsummaryController/updateIsSelected.do",
			 {
			 	ID:energySummaryCode,
			 	isSelected:state
			 }, 
			 function(result){	
				 console.log("result:" + result);
			 }); 
	}
	

更多参数说明：http://www.cnblogs.com/javastudy123/p/4430272.html