JQGrid，根据条件更改行背景颜色
我有以下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 }); 我想更改具有IsPaid字段的真值的所有行的行颜色。 这可能吗？ 如果是的话，我该怎么做？ 我一直在研究自定义格式，但我不确定这是否是正确的方法，因为我找不到任何关于改变背景颜色的信息。
这里仅供参考，完整的代码。 我还发现我需要添加另一个条件来改变行的颜色。 我只需要在付费字段为真时以及状态完成时更改行颜色。 此代码显示了这一点。 它还解决了在对列进行排序时重新加载网格时丢失格式的问题。 我希望这有助于其他人。
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; }
所以如果付费值为真，格式化程序函数会将需要更改的rowid添加到数组中，然后当网格完成时，它会更改每个行ID的css，然后检查第7个td的值，这是我的位置找到状态以确保其完整。
我试过这个并且设法为整行设置背景颜色。 也适用于分页：
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'}); } } }
怎么样通过Jquery Css。
请参阅下面的代码，将处于非活动状态的行设置为红色。 网格名称是jqTable 。
setGridColors: function() { $('td[title="Inactive"]', '#jqTable').each(function(i) { $(this).parent().css('background', 'red'); }); }
这指出了我正确的方向，但对我来说，分页工作并不是很有用。 如果它可以帮助任何人，以下工作并没有使用colModel格式化程序。
我需要在我的网格上的第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"); } }); },
摆脱了我的分页问题，并在排序等工作。
顺便说一句 – 我发现loadComplete函数可用于添加动态信息，例如更改搜索结果的标题文本 – 对很多人来说可能很明显，但我是json，jquery和jqgrid的新手
要绘制网格，请使用以下function。 例如： PintarRowGrilla('#gridPreSeleccion', 3, 9, '#8FD9F1'); 9 – >您的网格列数：
function PintarRowGrilla(idGrilla, idrow, nrocolumnas, color) { while(nrocolumnas > 0) { nrocolumnas--; jQuery(idGrilla).setCell(idrow, nrocolumnas, '', { 'background-color': color }); } }
我使用了一个简单的JQuery选择器并应用了我想要的样式。 您只需要要应用样式的行的uid（rowid）。
if (!xCostCenter[i].saveSuccessful) { $("#row" + _updatedRowIDs[i] + "jqxgrid > div").css({ "background-color": "rgb(246, 119, 119)" }); }
在我的情况下，我想更改未保存的行的颜色更改为红色。 要删除颜色，请执行以下操作。
$("#contenttablejqxgrid > div > div").css({ "background-color": "" });
希望这有助于某人。
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'); } } },
使用JQGrid行事件jqGridRowAttr来设置任何格式。 有关更多详细信息，请参阅http://www.trirand.com/blog/?page_id=393/help/rowattr-triger-after-setrowdata设置背景的示例步骤如下：
首先为内联条件格式或CSS文件设置自定义CSS。 例如（请参阅chrome浏览器中的结果）
.bg-danger { background-color: #f2dede; } .bg-danger td{ background-color : #ff0000ad; }
在ColModel之后添加行事件
rowattr: function (rd) { if (rd.FileExists == 'no') // your condition here { return { "class": "bg-danger" }; } }