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

【问题标题】：How can I change the background color of a cell in a jqgrid custom formatter?如何在 jqgrid 自定义格式化程序中更改单元格的背景颜色？
【发布时间】：2011-03-15 18:24:04
【问题描述】：

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

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

    return cellHtml;
 }

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

这可能吗？

【问题讨论】：

@harshhh - 我添加了另一条评论
您应该只使用'background-color' 而不是'color' 并设置附加样式'background-image':'none' 以删除从jQuery UI 类'ui-widget-content' 继承的背景图像。如果您想另外使用标准颜色来悬停或/和选定的行，您可以使用我在stackoverflow.com/questions/4956949/… 中描述的技术
@Oleg - 背景颜色仅适用于跨度（不是整个 TD 单元格）
@ooo：在您写的问题中，您希望/必须使用自定义格式化程序。自定义格式化程序返回的文本将放置在<td> 单元格中。因此，您没有机会更改<td> 本身。您最多可以做的是放置像<span> 这样的任何元素，它可能具有<td> 的整个大小（取决于使用的CSS）。在这种情况下，用户将看到<span> 的背景，就像单元格背景一样。使用自定义格式化程序你不能做更多。
@ooo：为了清楚起见，我确实写下了我的答案。

标签： jquery jqgrid formatter

【解决方案1】：

这里

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

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

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

快乐编码。

【讨论】：

@harshh - 你是说将这一行放在我的自定义格式化程序代码函数中吗？
@harshh - 我实际上想将其作为自定义格式化程序来执行，因为我有一些基于其他数据属性的条件逻辑。另外，您从哪里获得行、列和值？
@ooo：您不应该使用自定义格式化程序。取而代之的是，您可以更改 loadComplete 事件中某些单元格的背景颜色。您可以通过getDataIDs 方法获取已加载数据的ID，然后使用getCell 在循环中获取单元格数据进行检查，并使用空字符串作为数据参数更改setCell 的单元格样式（请参阅@987654321 @了解详情）。你也可以另外使用'formatter:checkbox'。
您可以使用任何您喜欢的 jqGrid 功能。自定义格式的使用通常是为单元格生成 HTML 代码。要设置背景颜色，只需在单元格上设置一个 CSS 类就足够了。我会在你的 CSS 中定义两个类“redBackground”和“greenBackground”，并在单元格上只设置一个类。作为格式化程序，我将使用“格式化程序：复选框”。你可以做你喜欢的事。
@Oleg - 我正在结合单元格上的其他文本格式来执行此操作，因此我已经在使用自定义格式化程序。因此，我希望有一个额外的行允许我在这个自定义格式化函数中添加背景颜色

【解决方案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});
        }
...
});

【讨论】：

【解决方案3】：

如果您想在自定义单元格格式化程序中使用 <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：

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

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

【讨论】：