根据放在行中的键/值对(如ID)在jqGrid行上设置类或标识符

时间:2010-10-26 21:03:28

标签: javascript jqgrid

我猜是afterInsertRow是要使用的方法,而且我已经为每一行(读/未读)提供了额外的数据,使用了“readStatus”键。

我不想要的是在网格完成后横向移动DOM,根据某个单元格值将css类添加到行中。

有什么建议吗?

附加:

如果这是细胞数据:

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

如何进入'readstatus'部分?

2 个答案:

答案 0 :(得分:12)

使用函数afterInsertRow不是最好的方法,尤其是如果您使用gridview:true jqGrid option,这几乎总是被推荐。看看old answer哪些主要是您需要的。代码的架构可以是关于

$('#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一样快速运行。

更新:答案相对较旧。更新版本的jqGrid具有callattrrowattr回调,可用于更有效地实现相同的要求。重要的是要理解在网格的一个单元格或网格行的一个单元格上的设置(请参阅答案代码中的.addClass('myErrorClass'))遵循页面上存在的所有元素的browser reflow < / em>的。因此,应该减少页面上DOM元素的更改次数。为此,严格建议使用gridview: true(有关详细信息,请参阅the answer)。与callattr一起使用的回调rowattrgridview: true和自定义格式设置允许一次创建网格主体的完整内容。因此,页面上的更改次数将减少,性能也会提高。

来自callattr的列属性colModel可以帮助您在网格的选定单元格上设置类,样式或其他一些属性。回调rowattr可以帮助在网格的选定上设置类,样式或其他一些属性(与上面的示例完全相同)。

我建议阅读上述答案的所有人查看the answer,了解如何使用rowattr

您可以在以下答案中详细了解callattrthisthisthisthis。如果您使用datatype: "xml",则实施可能会更复杂一些:有关详细信息,请参阅the answer

答案 1 :(得分:2)

这也可用于将CSS类添加到行

var _tr = $("#gridId").jqGrid("getInd", rowid, true);
$(_tr).addClass("ui-state-error");

希望有助于