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