根据放置在行中的键/值对(如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".

我不想要的是在网格完成后遍历DOM，以便基于某些单元格值将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"}

如何进入阅读状态"部分?

How do I get to the 'readstatus' part?

推荐答案

使用函数afterInsertRow并不是最佳方法，尤其是在使用gridview:true 旧答案，这些答案大部分都是您要做的需要.该代码的模式可能是关于以下内容的

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'))遵循答案).与gridview: true一起使用的回调callattr，rowattr和自定义格式化程序允许一次创建网格主体的全部内容.这样可以减少页面上的更改数量，并提高性能.

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可以帮助在网格的所选行上设置类，样式或其他一些属性(与上述示例完全一样).

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的更多信息:此，此，，则实现可能会稍微复杂一些:有关详细信息，请参见答案.

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屋！