jQuery 如何更改 jqgrid 自定义格式化程序中单元格的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3244909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I change the background color of a cell in a jqgrid custom formatter?
提问by leora
I can change the text color by doing this in jqgrid custom formatter:
我可以通过在 jqgrid 自定义格式化程序中执行此操作来更改文本颜色：
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?
这可能吗？
回答by Oleg
If you want use <span>element inside of the custom cell formatter you can return from the custom formatter
如果您想<span>在自定义单元格格式化程序中使用元素，您可以从自定义格式化程序返回
return '<span class="cellWithoutBackground" style="background-color:' +
color + ';">' + cellvalue + '</span>';
where the style of span.cellWithoutBackgroundyou can define for example like following
span.cellWithoutBackground您可以在其中定义样式，例如如下
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 cellattrcallback in colModelinstead of the usage custom formatters. Changing of background color of the cell is in general just assigning styleor classattribute to the cells of the column (<td>elements). The cellattrcallback defined in the column of colModelallows exactly to do this. One can still use predefined formatterslike formatter: "checkbox", formatter: "currency", formatter: "date"and so on, but still change the background color in the column. In the same way the rowattrcallback, 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).
更新：答案是旧的。最佳实践是使用cellattr回调colModel而不是使用自定义格式化程序。更改单元格的背景颜色通常只是分配style或class属性给列（<td>元素）的单元格。cellattr列中定义的回调colModel正好允许这样做。一个仍然可以使用预定义的格式化像formatter: "checkbox"，formatter: "currency"，formatter: "date"等等，但依然改变在列的背景颜色。以同样的方式rowattr，可以定义为 jqGrid 选项（在 的特定列之外colModel）的回调允许分配整行（<tr>元素）的样式/类。
More information about cellattrcan be found hereand here, for example. Another answerexplains rowattr.
回答by ccwasden
Here is what I did:
这是我所做的：
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});
}
...
});
回答by simplyharsh
Here
这里
$("#cell").setCell(Row , Column, Value, { background: '#888888'});
Actually you won't even need custom formatter, if you just intend to do it for setting colors. You can even set color value from here like,
实际上，您甚至不需要自定义格式化程序，如果您只是打算这样做来设置颜色。您甚至可以从这里设置颜色值，例如，
var color = (Value == "Y") ? "green" : "red";
$("#cell").setCell(Row , Column, Value, { background: '#888888', color: color});
Happy Coding.
快乐编码。
