如何在 jqgrid 自定义格式化程序中更改单元格的背景颜色? [英] How can I change the background color of a cell in a jqgrid custom formatter?

问题描述

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

function YNFormatter(cellvalue, options, rowObject){变种颜色=(单元格值==Y")?绿色":红色"；var cellHtml = ""+ 单元格值 + "</span>";返回单元格Html；}

但我现在想更改整个单元格的背景颜色(而不是文本颜色).

这可能吗?

解决方案

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

return '<span class="cellWithoutBackground" style="background-color:' +颜色 + ';">'+ 单元格值 + '</span>';

span.cellWithoutBackground 的样式你可以定义如下

span.cellWithoutBackground{显示:块；背景图像:无；边距右:-2px；左边距:-2px；高度:14px；填充:4px；}

你可以在 和 这里，例如.另一个答案解释了rowattr.

I can change the text color by doing this in jqgrid custom formatter:

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

    return cellHtml;
 }

but I want to now change the background color of the whole cell (instead of the text color).

Is this possible?

解决方案

If you want use <span> element inside of the custom cell formatter you can return from the custom formatter

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

where the style of span.cellWithoutBackground you can define for example like following

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

How it works you can see live here:

UPDATED: The answer is old. The best practice would be to use cellattr callback in colModel instead of the usage custom formatters. Changing of background color of the cell is in general just assigning style or class attribute to the cells of the column (<td> elements). The cellattr callback defined in the column of colModel allows exactly to do this. One can still use predefined formatters like formatter: "checkbox", formatter: "currency", formatter: "date" and so on, but still change the background color in the column. In the same way the rowattr callback, which can be defined as the jqGrid option (outside of specific column of colModel), allows to assign style/class of the whole row (<tr> elements).

More information about cellattr can be found here and here, for example. Another answer explains rowattr.

这篇关于如何在 jqgrid 自定义格式化程序中更改单元格的背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！