根据放置在行中的键/值对(如 ID)在 jqGrid 行上设置类或标识符 [英] Set class or identifier on jqGrid row based on a key/value pair placed in row (like ID)

问题描述

我猜 afterInsertRow 是要使用的方法，并且我已经为每一行(已读/未读)获得了额外的数据，键为readStatus".

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".

我不希望在网格完成后根据某些单元格值向行添加一个 css 类.

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.

有什么建议吗?

插件:

如果这是单元格数据:

{"cell":["blah blah blah"],"id":"123456789","readstatus":"unread"}

如何进入readstatus"部分?

How do I get to the 'readstatus' part?

推荐答案

afterInsertRow函数的使用并不是最好的方法，尤其是如果你使用gridview:true <几乎总是推荐使用 href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options" rel="nofollow noreferrer">jqGrid 选项.查看旧答案需要.代码的架构可能是关于以下

The usage of the function afterInsertRow is not the best way especially if you use gridview:true jqGrid option which is almost always recommended. Look at the old answer which do mostly what you need. The schema of the code could be about following

$('#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');
            }
        }
    }
});

看起来像网格完成后遍历 DOM"，但使用 afterInsertRow 可以快速运行.

It looks like "transversing the DOM after grid has completed", but it works quickly as the usage of afterInsertRow.

已更新:答案相对较旧.更新版本的 jqGrid 具有 callattr 和 rowattr 回调，可用于更有效地实现相同的需求.重要的是要了解在网格的一个单元格或网格的行上设置类(请参阅答案代码中的 .addClass('myErrorClass') )遵循 浏览器重排 页面上存在的所有元素.所以应该减少页面上DOM元素的变化次数.为此，强烈建议使用 gridview: true(有关详细信息，请参阅答案).回调 callattr、rowattr 和自定义格式化程序与 gridview: true 一起使用允许创建网格体的全部内容一次.这样页面上的更改次数就会减少，性能会有所提高.

UPDATED: The answer is relatively old. More recent versions of jqGrid have callattr and rowattr callbacks 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 reflow on 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 answer for more details). The callbacks callattr, rowattr and custom formatters used together with gridview: true allows 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.

colModel 中的列属性callattr 有助于在选定的网格单元格 上设置类、样式或其他一些属性.回调 rowattr 可以帮助在选定的网格 rows 上设置类、样式或其他一些属性(就像上面的例子一样).

The column property callattr from colModel can be helpful to set class, style or some other attributes on selected cells of grid. The callback rowattr can help to set class, style or some other attributes on selected rows of grid (exactly like do the above example).

我建议阅读上述答案的每个人看一下答案，它显示了如何使用rowattr.

I recommend everybody who read the above answer look at the answer which shows how to use rowattr.

您可以阅读更多关于 callattr 的信息，例如以下答案:this, 这个，这个，这个.如果您使用 datatype: "xml"，实现可能会稍微复杂一点:请参阅答案 了解详情.

You can read more about callattr for example in the following answers: this, this, this, this. If you use datatype: "xml" the implementation could be a little more complex: see the answer for details.

这篇关于根据放置在行中的键/值对(如 ID)在 jqGrid 行上设置类或标识符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！