easyui的datagrid改变整行颜色

easyui的datagrid改变整行颜色，可以分为改变某个单元的颜色，以及改变整行的颜色，整行的改变可以从单元格的改变进行参考。本文介绍一个简单的例子给大家参考。

先看看单元格的改变颜色。

html代码：

<table id="roleList">
    <thead>
      <tr>
          <th data-options="field:'ck',checkbox:true"></th>  
          <th data-options="field:'monitor_item_code',width:70,align:'center'">XXX</th>
          <th data-options="field:'gap_value',width:70,align:'center'">XXX</th>
          <th data-options="field:'remark',width:70,align:'center'">XXX</th>
          <th data-options="field:'alarm_role',width:70,align:'center',formatter:alarmRole">XXX</th>
          <th data-options="field:'flag',width:70,align:'center',formatter:flag,styler:flagColor">状态</th>
          <th data-options="field:'operate',width:80,align:'center',formatter:formatOper">操作</th>
      </tr>
     </thead>
</table>

JS代码：

function flagColor(val, row, index) {
    if (val == '1') {
        return 'background:#B9F3B9';
    } else if (val == 0) {
        return 'background:#FFCCCC';
    }
}
function flag(val, row, index) {
    return '';
}

然后我们看看整行的代码，其实和单元格差不多。

先看效果：

代码：

onLoadSuccess : function(data) {
//表格样式
        rowStyler:function(index,row){
            //大于的时候，显示为黄色，100%的时候，显示为红色。
            if (row.lossRate == 100){
                return 'background-color:#FF6347;';
            }else if(row.lossRate >= row.alarmValue){
                return 'background-color:#FFF68F;';
            }
        },
}