Question

我在我的应用程序中使用JQGrid。

这里我想根据列中的值来改变颜色，如果JqGrid行。

我可以更改列的颜色，但我无法更改行的背景颜色。

以下是我用来更改行颜色的代码......

loadComplete: function (data) {
    //RETRIEVE COLUMN INDEX : ISPRINTED
    var isPrintColIndex = getGridColumnIndex(jQuery("#list10_d"), 'isPrinted');

    //CHANGE COLOR OF PRINTED ARTICLES
    //NOTE : JSON FORMATs ARE DIFFERENT SO ...HERE WE ARE ADDING CONDITION
    if (data != null && data.rows != null) {
        for (var index = 0; index < data.rows.length; index++) {

            if (typeof (data.rows[index].id) === 'undefined') {
                //LOAD BY JQGRID API ITSELF
                if (data.rows[index].isPrinted == 'NO') {
                    if (data.rows[index].isPrinted == 'NO') {
                        jQuery("#list10_d").jqGrid(
                            'setCell', data.rows[index]._id_, "articleid",
                            "", {
                            'background-color': 'red'
                        });
                    }
                }
            } else {
                ///FOR FIRST LOAD : LOAD BY JSON CALL
                if (data.rows[index].cell[isPrintColIndex] == 'NO') {
                    jQuery("#list10_d").jqGrid(
                        'setCell', data.rows[index].id, "articleid", "", { 'background-color': 'red' });
                }
            }
        }
    }
}

任何人都可以建议我更改上面的代码所以我可以改变行的背景颜色吗？

Answer 1

可以通过在所选style元素（行）上分配其他class或<tr>属性来定义行的颜色（背景颜色或文本颜色）。 jqGrid有rowattr，允许在填充网格主体时执行此操作。因此rowattr的使用将为您带来最佳性能。您应该使用gridview: true来查看性能改进。

The answer提供问题的解决方案。

描述here的替代方式很慢，只应在未实现rowattr功能的旧版jqGrid上使用。要了解为什么rowattr的工作方式更快，我建议您阅读the answer。

Answer 2

在

内

loadComplete: function (){

    var rowIds = $(grid).jqGrid('getDataIDs');
    for (i = 1; i <= rowIds.length; i++) {//iterate over each row
        rowData = $(grid).jqGrid('getRowData', i);
        //set background style if ColumnValue == true
        if (rowData['ColumnValue'] == 'true') {
            $(grid).jqGrid('setRowData', i, false, "CSSRowSTyleToApply");
        } //if
    } //for
}//loadComplete

这应该做你想要的。如果要根据行内的值为行着色，您可以删除该值，因为您已经拥有当前所在的行信息。

Answer 3

以上解决方案相当接近，但需要进行一些非常重要的更改，请使用以下解决方案，希望您会喜欢！

＆＃13;

loadComplete: function () {
  var rowIds = $('#YourGridId').jqGrid('getDataIDs');
       for (i = 0; i < rowIds.length; i++) {//iterate over each row
       rowData = $('#YourGridId').jqGrid('getRowData', rowIds[i]);
       //set background style if ColValue === true\
       if (rowData['ColName'] === "ColValue") {
         $('#YourGridId').jqGrid('setRowData', rowIds[i], false, "CSSClass");
       } //if
  } //for
}//loadComplete

＆＃13;

如何根据Column中的值更改JQGrid中的行颜色

3 个答案: