EasyUI 条件设置行背景颜色

时间:2022-01-12 19:34:33

数据网格(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;';
}
}
});
}

效果如下

EasyUI 条件设置行背景颜色

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