EasyUI 条件设置行背景颜色

数据网格（datagrid）的 rowStyler 函数的设计目的是允许您自定义行样式。

rowStyler 函数需要两个参数：

• rowIndex：行的索引，从 0 开始。
• rowData：该行相应的记录。

查询用户并设置不允许收费的用户背景色突出显示

function onReady(){
    $('#basicInfoList').datagrid("options").url=rootpath+"/queryPageListBySql?sqlKey=com.online.charge.customer.jccustomer.mapper.JcCustomerExtendsMapper.selectAllList";
    var conditions = [];
    gridLoad(conditions,null);
    showColor();
}

//不允许收费显示背景色
function showColor(){
    $('#basicInfoList').datagrid({
        rowStyler:function(index,row){
            if (row.isAllowCharge == "0" || row.isAllowCharge == 0){
                return 'background-color:#668B8B;';
            }
        }
    });
}

效果如下

 

http://www.jeasyui.net/tutorial/42.html

 

顺便总结一下常用的定义列的格式化函数

formatter 单元格的格式化函数，需要三个参数：

• value：字段的值。
• rowData：行的记录数据。
• rowIndex：行的索引。

formatter : function(value, row, index) {  
      //split函数就是以""内的符号为分割依据  
      var ret = value.split("");         
      //判断长度是否超过自己预定义的值  
      if (ret.length > 16) {          
            //长度超过后截取自己想要显示的字符串，其余的以...显示  
            value = value.substring(0, 15) + "...";   
      }  
      //返回组装后的值  
      return value;   
}  

 

styler 单元格的样式函数，返回样式字符串来自定义该单元格的样式，例如 'background:red' 。该函数需要三个参数：

• value：字段的值。
• rowData：行的记录数据。
• rowIndex：行的索引。

$('#dg').datagrid({
    columns:[[
        {field:'listprice',title:'List Price', width:80, align:'right',
            styler: function(value,row,index){
                if (value < 20){
                    return 'background-color:#ffee00;color:red;';
                    // the function can return predefined css class and inline style
                    // return {class:'c1',style:'color:red'}
                }
            }
        }
    ]]
});