如何更改jqgrid自定义格式化程序中单元格的背景颜色？

Question

我可以通过在jqgrid自定义格式化程序中执行此操作来更改文本颜色：

function YNFormatter(cellvalue, options, rowObject)
{
    var color = (cellvalue == "Y") ? "green" : "red";
    var cellHtml = "<span style='color:" + color + "' originalValue='" +
                                cellvalue + "'>" + cellvalue + "</span>";

    return cellHtml;
 }

但我现在要更改整个单元格的背景颜色（而不是文本颜色）。

这可能吗？

Answer 1

如果要在自定义单元格格式器中使用<span>元素，可以从自定义格式化程序返回

return '<span class="cellWithoutBackground" style="background-color:' +
       color + ';">' + cellvalue + '</span>';

您可以定义span.cellWithoutBackground的样式，例如下面的

span.cellWithoutBackground
{
    display:block;
    background-image:none;
    margin-right:-2px;
    margin-left:-2px;
    height:14px;
    padding:4px;
}

它如何运作你可以看到实时here：

更新：答案是陈旧的。最佳做法是在cellattr中使用colModel回调，而不是使用自定义格式化程序。更改单元格的背景颜色通常只是将style或class属性分配给列的单元格（<td>元素）。 cellattr列中定义的colModel回调允许完全执行此操作。仍然可以使用预定义格式化程序，例如formatter: "checkbox"，formatter: "currency"，formatter: "date"等，但仍会更改列中的背景颜色。以同样的方式，rowattr回调（可以定义为jqGrid选项（在colModel的特定列之外））允许分配整行的样式/类（<tr>元素）。

例如，可以找到有关cellattr的更多信息here和here。 Another answer解释了rowattr。

Answer 2

这是我做的：

jQuery("#grid_id").jqGrid({
    ...
       colModel: [
          ...
          {name:'price', index:'price', width:60, align:"center", editable: true, formatter:myFmatter},
          ...
       ],
        afterInsertRow: function(rowId, data)
        {
            $("#grid_id").setCell(rowId, 'price', '', {'background-color':'#' + data.colorHEX});
        }
...
});

Answer 3

下面

$("#cell").setCell(Row , Column, Value, { background: '#888888'});

实际上你甚至不需要自定义格式化程序，如果你打算用它来设置颜色。 你甚至可以从这里设置颜色值，如

var color = (Value == "Y") ? "green" : "red";
$("#cell").setCell(Row , Column, Value, { background: '#888888', color: color});

快乐编码。