列表数据隔行变色

凯特-呼丽华

一、案例效果              
       根据不同条件，改变列表数据背景颜色

            

二、实现思路                             
        1.在全局样式库中添加样式    （全局样式是平台中的一个功能，在菜单中可以检索到）     
        2.注册列表渲染前事件
三、操作步骤

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

                    

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

                     

         3.编写代码

            

四、相关代码
       全局样式代码   

1. /** 条件大于等于50 时显示颜色*/
   
2. .row-sys-red .x-grid-cell{
   
3.        background-color:#a3f1f1 !important;
   
4.        color:black;
   
5. }
   
6. .func-row-sys-red {
   
7.        color:black;
   
8. }
   
9. .row-sys-red .x-grid-cell-inner-row-numberer{
   
10.    color:black;
    
11. }
    
12. 
    
13. /** 条件小于50 时显示颜色*/
    
14. .row-sys-yellow .x-grid-cell{
    
15.        background-color:#a8c1c1 !important;
    
16.        color:black;
    
17. }
    
18. .func-row-sys-yellow {
    
19.        color:black;
    
20. }
    
21. .row-sys-yellow .x-grid-cell-inner-row-numberer{
    
22.    color:black;
    
23. }

复制代码

           渲染前事件代码

1. function(self){
   
2.     self.view.getRowClass = function(record){
   
3.         if(JE.isNotEmpty(record)){
   
4.       //获取案例总价字段值
   
5.       var  ALWD_ALZJ = record.data.ALWD_ALZJ;
   
6.      //判断总价大于等于50 显示的样式
   
7.      if(ALWD_ALZJ>='50'){
   
8.          return "row-sys-red";
   
9.      }else{
   
10.         return "row-sys-yellow";
    
11.      }
    
12. }
    
13.     }

复制代码

五、关键字，相关问题             
          隔行变色
          列表数据背景色修改