Jquery EasyUI修改行背景的两种方式

时间:2023-03-08 17:27:27
Jquery EasyUI修改行背景的两种方式

1、数据加载完成不请求后台的做法

方式一:

//更改表格行背景
function changeLineStyle(index){
var rows=$("#alertGird").datagrid("getRows");
if(rows){
for ( var i = 0; i <rows.length; i++) {
if(i==index){
//将指定行背景置蓝
$("#datagrid-row-r1-2-"+i).css("background-color","#0081C2").css("color","black");//背景蓝色
}else {
//将指定行背景置白
$("#datagrid-row-r1-2-"+i).css("background-color","#FFFFFF").css("color","black");//背景白色
}
}
}
}

方式二:

//更改表格行背景
function changeLineStyle(index){
var rows=0;
$("tr",".datagrid-htable").each(function(){
rows++;
});
if(rows>0){
for ( var i = 0; i <rows; i++) {
if(i==index){
//将指定行背景置蓝
$("#datagrid-row-r1-2-"+i).css("background-color","#0081C2").css("color","black");//背景蓝色
}else {
//将指定行背景置白
$("#datagrid-row-r1-2-"+i).css("background-color","#FFFFFF").css("color","black");//背景白色
}
}
}
}

2、每次都请求后台刷新

$('#dg').datagrid({
rowStyler: function(index,row){
if (row.listprice>80){
return 'background-color:#6293BB;color:#fff;';
}
}
});