ruby-on-rails - Rails jqgrid 列背景颜色动态

Question

我将 jqgrid 与 ruby​​ on rails 一起使用，并且根据我在 jqgrid 列表页面中的要求，我需要背景颜色作为特定列值的动态颜色。

这是我的助手代码，

include JqgridsHelper
def colors_jqgrid
  options = {:on_document_ready => true, :html_tags => false}
grid = [{
  :sortable => true,        
  :url => '/colors',
  :datatype => 'json',
  :mtype => 'GET',
  :colNames => ['colors_id','ID','External ID','name','Color Swatch','Actions'],
  :colModel  => [
     { :name => 'colors_id',   :index => 'colors_id',:hidden => true},
    { :name => 'ID',   :index => 'ID',    :width => 180 ,:searchoptions => { 
        :sopt => ['eq','ne','bw','ew','cn'],
        }},
    { :name => 'External ID',   :index => 'color_id',:search=>false,    :width => 180 ,:searchoptions => { 
        :sopt => ['eq','ne','bw','ew','cn'],
        } },    
    { :name => 'name', :index => 'name',  :width => 180 ,:searchoptions => { 
        :sopt => ['eq','in'],
        } },
        { :name => 'color_id', :index => 'Color Swatch',:search=>false,  :width => 180},
        {name:'Actions',index:'action',align:'center',sortable:false,formatter: 'function(cellvalue, options, rowObject) {
              edit = "<span class=\"ui-icon ui-icon-pencil\" title=\"Edit\" style= \"cursor:pointer;float:left;\" onclick=\"window.location.href = '"'colors/edit?id="'"+options.rowId+"'"'"';\"></span>";
              edit += "<span class=\"ui-icon ui-icon-trash\" title=\"Delete\" style= \"cursor:pointer;\" onclick=\"jQuery.fn.fmatter.rowactions.call(this,'"'del'"');\"></span>";
             return edit;
         }'.to_json_var },
  ],
  :editurl => '/colors/grid_update',
  :pager => '#colors_pager',
  :rowNum => 10,
  :rowList => [10, 20, 30],
  :caption => 'Colors',
  :autowidth => true,
  :navigator=>true,
  :excel=>true,
  :viewrecords=>true,
  :ondblClickRow => "function(rowId, iRow, iCol, e) { window.location = 'colors/edit?id='+ rowId; }".to_json_var

}]
pager = [:navGrid, "#colors_pager", { :del => false,:search=>true,:edit => false,:add => false}, 
                                {:closeAfterEdit => true, :closeOnEscape => true}, {}, {}, {:multipleSearch => true}, {}]
   options = [:navButtonAdd, "#colors_pager", {caption: "Columns", title: "Reorder Columns", onClickButton: "function() { jQuery('#colors_list').jqGrid('columnChooser'); }".to_json_var }]
   jqgrid_api 'colors_list', grid, pager, options 
end 

Answer 1

在网格变量部分的任意位置添加以下行。

:afterInsertRow => "function(rowId, data) { $(\"#colors_list\").setCell(rowId, 'color_id', '', {'background-color':'#'+data.color_id }); }".to_json_var

它需要2个参数。首先是 rowId，它是行的标识符。第二个是数据，它是该行的所有字段的内容。所以我使用 data.color_id 来获取你想用来设置背景颜色的颜色代码。