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'}
                }
            }
        }
    ]]
});

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值