easyui的datagrid的背景色利用rowStyler属性:
例子:
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 = {};//用来保存行的背景色(因为表格中可能有多个背景色)
//当行被选中的时候主动改变背景色和字体颜色 onSelect:function(rowIndex, rowData){
if(selectRowIndex!=undefined){
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 = 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");//选中改变颜色
} },