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