jqGrid：如何为具有特定条件的行添加 CSS class

Question

请考虑这种情况：

我有一个数组，我想使用 jqGrid 显示它：

var arr = [
        { Id: 1, Name: "J1" , Age: 40},
        { Id: 2, Name: "J2" , Age: 50},
        { Id: 3, Name: "J3" , Age: 60},
        { Id: 4, Name: "J4" , Age: 70},
        { Id: 5, Name: "J5" , Age: 80},
    ];

我想为我的网格使用 bootstrap 样式，并且我想根据某些行标准添加 CSS class。例如：

Criteria          CSS class
----------------------------
Age >= 80          table-danger
70 <= Age < 80     table-warning
60 <= Age < 70     table-info

如何为我的网格添加 CSS class？

谢谢

Answer 1

您应该使用 rowattr 通知 jqGrid 在生成行。回调示例如下

rowattr: function (item) {
    if (item.Age >= 80) {
        return { "class": "table-danger" };
    } else if (70 <= item.Age && item.Age < 80) {
        return { "class": "table-warning" };
    } else if (60 <= item.Age && item.Age < 70) {
        return { "class": "table-info" };
    }            
}

有关代码示例，请参阅 the old answer。

jqGrid：如何为具有特定条件的行添加 CSS class

jqGrid : How to add CSS class for a row with specific criteria

html

css

jquery

jqgrid

twitter-bootstrap