javascript 根据放置在行中的键/值对（如 ID）在 jqGrid 行上设置类或标识符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4028019/
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
Set class or identifier on jqGrid row based on a key/value pair placed in row (like ID)
提问by bcm
I'm guessing afterInsertRow is the method to use, and I've already got extra data for each row (read/unread), with the key "readStatus".
我猜 afterInsertRow 是要使用的方法，我已经为每一行（已读/未读）获得了额外的数据，键为“readStatus”。
What I do no want is to be transversing the DOM after grid has completed to add a css class to row based on some cell value.
我不想要的是在网格完成后遍历 DOM 以根据某些单元格值将 css 类添加到行。
Any suggestions?
有什么建议？
Add-on:
添加在：
If this is the cell data:
如果这是单元格数据：
{"cell":["blah blah blah"],"id":"123456789","readstatus":"unread"}
How do I get to the 'readstatus' part?
我如何进入“readstatus”部分？
回答by Oleg
The usage of the function afterInsertRowis not the best way especially if you use gridview:truejqGrid optionwhich is almost always recommended. Look at the old answerwhich do mostly what you need. The schema of the code could be about following
该函数的使用afterInsertRow不是最好的方法，尤其是如果您使用几乎总是推荐的gridview:truejqGrid 选项。查看旧答案，它主要满足您的需求。代码的架构可能是关于以下
$('#list').jqGrid({
//...
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 "readStatus"
status = $(this).jqGrid("getCell", rowid, "readStatus");
// or get data from some
//var rowData = $(this).jqGrid("getRowData', rowid);
// now you can set css on the row with some
if (status === "error") {
$('#' + $.jgrid.jqID(rowid)).addClass('myErrorClass');
}
}
}
});
It looks like "transversing the DOM after grid has completed", but it works quickly as the usage of afterInsertRow.
它看起来像“在网格完成后遍历 DOM”，但它在使用afterInsertRow.
UPDATED: The answer is relatively old. More recent versions of jqGrid have callattrand rowattrcallbacks which can be used to implement the same requirements more effectively. It's important to understand that setting of class on one cell of grid or of the row of grid (see .addClass('myErrorClass')in the code of the answer) follows browser reflowon all elements existing on the page. So one should reduce the number of changing of DOM elements on the page. To do so it's strict recommended to use gridview: true(see the answerfor more details). The callbacks callattr, rowattrand custom formatters used together with gridview: trueallows to create the full content of grid body at once. So the number of changes on the page will be reduced and the performance will be improved.
更新：答案相对较旧。最新版本的 jqGrid 具有callattr和rowattr回调，可用于更有效地实现相同的要求。理解网格的一个单元格或网格行（参见.addClass('myErrorClass')答案代码）上的类的设置遵循页面上存在的所有元素的浏览器重排，了解这一点很重要。所以应该减少页面上DOM元素的变化次数。为此，强烈建议使用gridview: true（有关更多详细信息，请参阅答案）。回调callattr，rowattr再加上使用和自定义格式gridview: true允许创建网格体的完整内容一次. 因此页面上的更改次数会减少，性能会有所提高。
The column property callattrfrom colModelcan be helpful to set class, style or some other attributes on selected cellsof grid. The callback rowattrcan help to set class, style or some other attributes on selected rowsof grid (exactly like do the above example).
列属性callattrfromcolModel可以帮助在网格的选定单元格上设置类、样式或其他一些属性。回调rowattr可以帮助在选定的网格行上设置类、样式或其他一些属性（就像上面的例子一样）。
I recommend everybody who read the above answer look at the answerwhich shows how to use rowattr.
我建议大家谁看了上面的回答看，答案展示了如何使用它rowattr。
You can read more about callattrfor example in the following answers: this, this, this, this. If you use datatype: "xml"the implementation could be a little more complex: see the answerfor details.
callattr例如，您可以在以下答案中阅读更多相关信息：this、this、this、this。如果您使用datatype: "xml"实现可能会更复杂一点：有关详细信息，请参阅答案。
回答by Imran
This can also be used to add CSS Class to row
这也可用于将 CSS 类添加到行
var _tr = $("#gridId").jqGrid("getInd", rowid, true);
$(_tr).addClass("ui-state-error");
Hopes that Helps
希望有所帮助
