列表数据隔行变色

案例效果

根据不同条件，改变列表数据背景颜色

实现思路

1. 在全局样式库中添加样式

2. 注册列表渲染前事件

操作步骤

1. 在全局样式库中添加样式

2. 注册列表渲染前事件，根据条件返回不同颜色

3. 编写代码

相关代码

全局样式代码

/** 条件大于等于50 时显示颜色*/
.row-sys-red .x-grid-cell{
       background-color:#a3f1f1 !important;
       color:black;
}
.func-row-sys-red {
       color:black;
}
.row-sys-red .x-grid-cell-inner-row-numberer{
   color:black;
}

/** 条件小于50 时显示颜色*/
.row-sys-yellow .x-grid-cell{
       background-color:#a8c1c1 !important;
       color:black;
}
.func-row-sys-yellow {
       color:black;
}
.row-sys-yellow .x-grid-cell-inner-row-numberer{
   color:black;
}

渲染前事件代码

function(self){
    self.view.getRowClass = function(record){
        if(JE.isNotEmpty(record)){
            //获取案例总价字段值
            var  ALWD_ALZJ = record.data.ALWD_ALZJ;
            //判断总价大于等于50 显示的样式
            if(ALWD_ALZJ>='50'){
                return "row-sys-red";
            }else{
                return "row-sys-yellow";
            }
        }
    }
}

//如果列表有锁定列，隔行变色写法如下
function(self){
    self.lockedGrid.view.getRowClass = function(record){
            if(JE.isNotEmpty(record)){
                return "row-sys-red";
            }
        }
    self.normalGrid.view.getRowClass =function(record){
        if(JE.isNotEmpty(record)){
            return "row-sys-red";
        }
    }
}

关键字，相关问题

• 隔行变色
• 列表数据背景色修改