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 (){});

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

僅列出部分程式碼:

jfit: 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事件中這麼寫:

jvar 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;
},```  

效果圖:

所有行的背景色:

![11](https://yqfile.alicdn.com/6d49b07d2172988b3b1b56b1aeb35160b978c68c.png)


被選中的行被改變顏色:

![22](https://yqfile.alicdn.com/85c9d72e9d064c51e639f31181780115840a3d87.png)


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

![33](https://yqfile.alicdn.com/d7beb3ed1ef8bf5c390a6b3fcb4ff28d042677f0.png)