jQuery JQGrid，根据条件改变行背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3908171/
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
JQGrid, change row background color based on condition
提问by twal
I have the following jqgrid that uses the jquery ui theme imported to my master page.
我有以下 jqgrid，它使用导入到我的母版页的 jquery ui 主题。
$("#shippingscheduletable").jqGrid({
url: $("#shippingscheduleurl").attr('href'),
datatype: 'json',
mtype: 'GET',
altRows: true,
colNames: ['Dealer', 'Model', 'Invoice', 'Date', 'PO', 'Serial', 'Status', 'City', 'State', 'IsPaid', 'Promo', 'Carrier', 'Int Notes', 'Ord Notes', 'Terms'],
colModel: [
{ name: 'Company', index: 'id', width: 125, align: 'left' },
{ name: 'Model', index: 'Model', width: 50, align: 'left' },
{ name: 'Invoice', index: 'Invoice', width: 50, align: 'left' },
{ name: 'Date', index: 'OrderDate', width: 60, align: 'left' },
{ name: 'Po', index: 'PONum', width: 75, align: 'left' },
{ name: 'Serial', index: 'Serial', width: 50, align: 'left' },
{ name: 'Status', index: 'OrderStatus', width: 70, align: 'left' },
{ name: 'City', index: 'City', width: 100, align: 'left' },
{ name: 'State', index: 'State', width: 30, align: 'left' },
{ name: 'IsPaid', index: 'IsPaid', width: 30, align: 'left' },
{ name: 'Promo', index: 'Promo', width: 50, align: 'left' },
{ name: 'Carrier', index: 'Carrier', width: 80, align: 'left' },
{ name: 'InternalNotes', index: 'InternalNotes', width: 110, align: 'left' },
{ name: 'OrderNotes', index: 'OrderNotes', width: 110, align: 'left' },
{ name: 'Terms', index: 'Terms', width: 60, align: 'left' }
],
pager: jQuery("#shippingschedulepager"),
rowNum: 100,
rowList: [100, 150, 200],
sortname: 'Company',
sortorder: "asc",
viewrecords: true,
height: '700px',
multiselect: true
});
I would like to change the row color for all rows that have a true value for the IsPaid Field. Is this possible? if so, how would I do this? I have been researching custom formatting, but I am unsure if this is the correct approach, as I cannot find anything about changing the color of the back ground.
我想为 IsPaid 字段具有真实值的所有行更改行颜色。这可能吗？如果是这样，我该怎么做？我一直在研究自定义格式，但我不确定这是否是正确的方法，因为我找不到任何关于更改背景颜色的信息。
采纳答案by Haim Evgi
use formatter function :
使用格式化程序功能：
like in this post
喜欢这篇文章
回答by twal
Just for reference of others here is the completed code. I also found I needed to add another condition to change the color of the row. I needed to change the row color only when the paid field is true, and when the status is complete. This code shows that. It also fixed the problem of losing the formatting when the grid is reloaded when sorting the columns. I hope this helps someone else.
仅供参考，这里是完整的代码。我还发现我需要添加另一个条件来更改行的颜色。我只需要在付费字段为真且状态完成时更改行颜色。这段代码表明了这一点。它还修复了在对列进行排序时重新加载网格时丢失格式的问题。我希望这对其他人有帮助。
var rowsToColor = [];
jQuery(function () {
$("#shippingscheduletable").jqGrid({
url: $("#shippingscheduleurl").attr('href'),
datatype: 'json',
mtype: 'GET',
altRows: true,
colNames: ['Dealer', 'Model', 'Invoice', 'Date', 'PO', 'Serial', 'Status', 'City', 'State', 'Paid', 'Promo', 'Carrier', 'Int Notes', 'Ord Notes', 'Terms'],
colModel: [
{ name: 'Company', index: 'id', width: 125, align: 'left' },
{ name: 'Model', index: 'Model', width: 50, align: 'left' },
{ name: 'Invoice', index: 'Invoice', width: 50, align: 'left' },
{ name: 'Date', index: 'OrderDate', width: 60, align: 'left' },
{ name: 'Po', index: 'PONum', width: 75, align: 'left' },
{ name: 'Serial', index: 'Serial', width: 50, align: 'left' },
{ name: 'Status', index: 'OrderStatus', width: 70, align: 'left' },
{ name: 'City', index: 'City', width: 100, align: 'left' },
{ name: 'State', index: 'State', width: 30, align: 'left' },
{ name: 'Paid', index: 'IsPaid', width: 30, align: 'left', formatter: rowColorFormatter },
{ name: 'Promo', index: 'Promo', width: 50, align: 'left' },
{ name: 'Carrier', index: 'Carrier', width: 80, align: 'left' },
{ name: 'InternalNotes', index: 'InternalNotes', width: 110, align: 'left' },
{ name: 'OrderNotes', index: 'OrderNotes', width: 110, align: 'left' },
{ name: 'Terms', index: 'Terms', width: 60, align: 'left' }
],
pager: jQuery("#shippingschedulepager"),
rowNum: 100,
rowList: [100, 150, 200],
sortname: 'Company',
sortorder: "asc",
viewrecords: true,
height: '700px',
multiselect: true,
gridComplete: function () {
for (var i = 0; i < rowsToColor.length; i++) {
var status = $("#" + rowsToColor[i]).find("td").eq(7).html();
if (status == "Complete") {
$("#" + rowsToColor[i]).find("td").css("background-color", "green");
$("#" + rowsToColor[i]).find("td").css("color", "silver");
}
}
}
});
});
function rowColorFormatter(cellValue, options, rowObject) {
if (cellValue == "True")
rowsToColor[rowsToColor.length] = options.rowId;
return cellValue;
}
so the formatter function adds the rowid that needs to be changed to an array if the paid value is true, then when the grid is complete it changes the css for each row id, after it checks the value of the 7th td which is where my status is found to make sure it is complete.
因此，格式化程序函数将需要更改的 rowid 添加到数组中，如果支付的值为 true，那么当网格完成时，它会在检查第 7 个 td 的值后更改每个行 id 的 css，这是我的找到状态以确保它是完整的。
回答by Anushka
I tried this and works to set the background color for the entire row. Works with paging also:
我试过这个并努力为整行设置背景颜色。也适用于分页：
gridComplete: function()
{
var rows = $("#"+mygrid).getDataIDs();
for (var i = 0; i < rows.length; i++)
{
var status = $("#"+mygrid).getCell(rows[i],"status");
if(status == "Completed")
{
$("#"+mygrid).jqGrid('setRowData',rows[i],false, { color:'white',weightfont:'bold',background:'blue'});
}
}
}
回答by annette
This pointed me in the right direction but didnt quite work for me with paging. If it helps anyone, the following did work and doesn't use the colModel formatter.
这为我指明了正确的方向，但在分页方面对我来说并不完全有效。如果它对任何人有帮助，那么以下确实有效并且不使用 colModel 格式化程序。
I needed to apply a red colour to individual cells with outstanding amounts (name:os) in the 9th td on my grid. Datatype was json and I used the loadComplete function which has the data response as its parameter:
我需要在我的网格的第 9 个 td 中将红色应用于具有未偿还金额（名称：os）的单个单元格。数据类型是 json，我使用了 loadComplete 函数，该函数将数据响应作为其参数：
loadComplete: function(data) {
$.each(data.rows,function(i,item){
if(data.rows[i].os>0){
$("#" + data.rows[i].id).find("td").eq(9).css("color", "red");
}
});
},
Got rid of the paging issues I had and works on sorting etc..
摆脱了我遇到的分页问题并致力于排序等。
As an aside - I've found the loadComplete function useful for adding in dynamic information like changing the caption texts for search results - probably obvious to many but I'm new to json, jquery and jqgrid
顺便说一句 - 我发现 loadComplete 函数对于添加动态信息很有用，比如更改搜索结果的标题文本 - 对很多人来说可能很明显，但我是 json、jquery 和 jqgrid 的新手
回答by Yehuda
What about via Jquery Css.
See code below to set rows with Inactive status to red.
Grid name is jqTable.
通过 Jquery Css 怎么样。
请参阅下面的代码将处于非活动状态的行设置为红色。网格名称是jqTable.
setGridColors: function() {
$('td[title="Inactive"]', '#jqTable').each(function(i) {
$(this).parent().css('background', 'red');
});
}
回答by Erick S. Escalante Olano
To paint the grid, use the function below. For example: PintarRowGrilla('#gridPreSeleccion', 3, 9, '#8FD9F1');9--> number of columns your grid:
要绘制网格，请使用以下函数。例如： PintarRowGrilla('#gridPreSeleccion', 3, 9, '#8FD9F1');9--> 网格的列数：
function PintarRowGrilla(idGrilla, idrow, nrocolumnas, color)
{
while(nrocolumnas > 0)
{
nrocolumnas--;
jQuery(idGrilla).setCell(idrow, nrocolumnas, '', {
'background-color': color
});
}
}
回答by Rei
I used the a simple JQuery selector and applied my wanted styles. All you need is the uid (rowid) of the row you wish to apply the styles to.
我使用了一个简单的 JQuery 选择器并应用了我想要的样式。您所需要的只是您希望应用样式的行的 uid (rowid)。
if (!xCostCenter[i].saveSuccessful)
{
$("#row" + _updatedRowIDs[i] + "jqxgrid > div").css({ "background-color": "rgb(246, 119, 119)" });
}
In my case I wanted to change the color of rows that were not saved to change to a red color. To remove the color just execute the following.
就我而言，我想将未保存的行的颜色更改为红色。要删除颜色，只需执行以下操作。
$("#contenttablejqxgrid > div > div").css({ "background-color": "" });
hope this helps someone.
希望这有助于某人。
回答by Sebastian Cardoza
loadComplete: function() {
var ids = $(this).jqGrid("getDataIDs"), l = ids.length, i, rowid, status;
for (i = 0; i < l; i++) {
rowid = ids[i];
// get data from some column "ColumnName"
varColumnName= $(this).jqGrid("getCell", rowid, "ColumnName");
// or get data from some
//var rowData = $(this).jqGrid("getRowData', rowid);
// now you can set css on the row with some
if (varColumnName=== condition) {
$('#' + $.jgrid.jqID(rowid)).addClass('myAltRowClass');
}
}
},
回答by Muhammad Yaseen
Use JQGrid row event jqGridRowAttr for setting any formatting. For more detail see http://www.trirand.com/blog/?page_id=393/help/rowattr-triger-after-setrowdataExample steps to setting background are:
使用 JQGrid 行事件 jqGridRowAttr 设置任何格式。有关更多详细信息，请参阅http://www.trirand.com/blog/?page_id=393/help/rowattr-triger-after-setrowdata设置背景的示例步骤是：
First set your custom CSS for conditional formatting inline or your CSS file. For example (Please see result in chrome browser)
首先为条件格式内联或 CSS 文件设置自定义 CSS。例如（请在 chrome 浏览器中查看结果）
.bg-danger {
background-color: #f2dede;
}
.bg-danger td{ background-color : #ff0000ad; }
Add row event right after ColModel
在 ColModel 之后添加行事件
rowattr: function (rd) {
if (rd.FileExists == 'no') // your condition here
{
return { "class": "bg-danger" };
}
}
