easyui的datagrid的設置背景色以後,行默認的選中的背景色改變事件無效

easyui的datagrid的背景色利用rowStyler屬性:

例子:

fitColumns:true,
fit: true,
rowStyler:function(index,row){
	if (row.auditorStatus == 1 ){
		return 'background-color:#00FFFF;';
	}else 
	if (row.auditorStatus == 3){
		return 'background-color:#7FFF00;';
	}else if(row.auditorStatus == 5 ){
		return 'background-color:#FF7F50;';
	}
}

接下來講下datagrid的大體結構,分爲固定表格部分和數據表格部分(classy樣式爲:.datagrid-view1),固定表格部分通常放置的是checkbox,數據表格部分通常放置的是正常的數據列(classy樣式爲:.datagrid-view2).

獲取datagrid複選框所在部分:

$("#datagrid-row-r1-1-"+rowIndex).css("background-color","#FF0000").css("color","black");//背景藍色

至關於:$("#_list").parent().find(".datagrid-view1 .datagrid-body tr")

獲取datagrid數據框所在部分:
 $("#datagrid-row-r1-2-"+rowIndex).css("background-color","#FF0000").css("color","black");//背景藍色

至關於:$("#_list").parent().find(".datagrid-view2 .datagrid-body tr")

添加表格數據的行單擊事件:

$("#_list").parent().find(".datagrid-view2 .datagrid-body tr").on("click",function (){});

加載表格的時候根據條件,來設置表格記錄的背景色:

僅列出部分代碼:

fit: true,
rowStyler:function(index,row){
	if (row.auditorStatus == 1 ){
		return 'background-color:#00FFFF;';
	}else if (row.auditorStatus == 3){
		return 'background-color:#7FFF00;';
	}else if(row.auditorStatus == 5 ){
		return 'background-color:#FF7F50;';
	}
}

而後在datagrid的onSelect事件中這麼寫:

var selectRowIndex = undefined;//保存被選中的行的索引
var selectRowIndexColor = {};//用來保存行的背景色(由於表格中可能有多個背景色)

/*-----由於datagrid的onUncheck事件無效,可是onUnselectAll事件有效.因此這裏選擇選擇一個全局變量,
當行被選中的時候就保存被選中行的索引,當選中行被取消選擇,此時進入onUnselectAll方法,而後改變selectRowIndex這個行
的背景色------*/
//當行被選中的時候主動改變背景色和字體顏色
onSelect:function(rowIndex, rowData){
 selectRowIndex = rowIndex;
 //獲取被選中行的背景色(等下取消選擇的時候須要還原爲這個背景色,因此這裏先記錄下來)
 var color = $("#datagrid-row-r1-1-"+rowIndex).css("background-color");
 if(color != 'rgb(255, 228, 141)'){"#FFE48D"就是'rgb(255, 228, 141)'顏色,即datagrid默認選中行的背景色
   //若是設置了自定義背景色,才須要改變(若是沒有設置自定義背景色,datagrid會使用默認的選中行的背景色)
   selectRowIndexColor[selectRowIndex] = color;
   $("#datagrid-row-r1-1-"+rowIndex).css("background-color","#FFE48D").css("color","black");//選中改變顏色
   $("#datagrid-row-r1-2-"+rowIndex).css("background-color","#FFE48D").css("color","black");//選中改變顏色
 }
},
//當行被取消選擇的時候主動的改變背景色和字體顏色
onUnselectAll:function(rows){
 var color = selectRowIndexColor[selectRowIndex];
 if(color){
   //若是設置了自定義背景色,才須要恢復原來的自定義背景色
   $("#datagrid-row-r1-1-"+selectRowIndex).css("background-color",color).css("color","black");//取消選中恢復顏色
   $("#datagrid-row-r1-2-"+selectRowIndex).css("background-color",color).css("color","black");//取消選擇恢復顏色
 }
 selectRowIndex = undefined;
},

效果圖:

全部行的背景色:

被選中的行被改變顏色:

被選中的行被取消選擇的時候變回原來的顏色: