jqGrid:根据列名的行单元格值更改行的背景颜色

jqGrid: change background color of row based on row cell value by column name(jqGrid:根据列名的行单元格值更改行的背景颜色)

问题描述

jqGrid 有一个名为 Posted 的列.它可以定位在不同的位置，具体取决于客户如何配置网格，但始终存在.

如果 Posted 列的值为 True，我需要更改行的背景颜色

我在下面尝试了 colmodel，但 alert(rdata.Posted) 显示始终未定义.

如果该行中的已发布列的值为true，如何更改行的背景颜色?

我研究了很多 Oleg 和其他更改背景颜色的解决方案，但它们使用的是硬编码的列号.

colModel: [{"cellattr":function(rowId, tv, rawObject, cm, rdata) {如果(rdata.Posted)返回 '​​class="jqgrid-readonlycolumn"';返回 '​​';},"label":"Klient","name":"Klient_nimi","classes":null,"hidden":false},{"label":null,"name":"Posted","editable":true,"width":0,类":空，隐藏":真}]，...

更新

在 update2 中，Oleg 建议使用 rowattr.我还需要在操作列中隐藏内联删除按钮和自定义发布按钮.我在 loadComplete 中使用下面的代码.如何使用 rowattr 实现这一点?

var LoadCompleteHandler = function () {var iCol = getColumnIndexByName($grid, 'Kinnitatud'),PostedDateCol = getColumnIndexByName($grid, 'Kinkuup'),cRows = $grid[0].rows.length,iRow,排，班级名称，已发布，菌丝体，细胞数据，我算，cm = $grid.jqGrid('getGridParam', 'colModel'),l,iActionsCol = getColumnIndexByName($grid, '_actions');l = cm.长度；如果(iCol > 0 || 发布日期Col > 0){for (iRow = 0; iRow < cRows; iRow = iRow + 1) {行 = $grid[0].rows[iRow];类名 = 行.类名；isPosted = 假；if ($.inArray('jqgrow', className.split(' ')) > 0) {//$(row).hasClass('jqgrow')如果(iCol > 0){isPosted = $(row.cells[iCol]).find(">div>input:checked").length>0;}如果 (postedDateCol > 0) {mycell = row.cells[postedDateCol];mycelldata = mycell.textContent ||mycell.innerText;isPosted = mycelldata.replace(/^s+/g, "").replace(/s+$/g, "") !== "";}如果(已发布){if ($.inArray('jqgrid-postedrow', className.split(' ')) === -1) {row.className = className + 'jqgrid-postedrow';$(row.cells[iActionsCol]).find(">div>div.ui-inline-del").hide();$(row.cells[iActionsCol]).find(">div>div.ui-inline-post").hide();}}}}}

改变行背景颜色的主要思路你会发现描述如何使用rowattr 回调以简化解决方案并获得最佳性能(在 gridview: true 的情况下).

jqGrid has column named Posted. It can be positioned in different positions depending how grid is configured by customer but is always prssent.

I need to change background color of rows if Posted column has value True

I tried colmodel below but alert(rdata.Posted) displays always undefined.

How to change backgound color of row if Posted column in this row has value true ?

I looked into lot of Oleg and other solutions for changing background color but they are using hard coded column number.

colModel: [

{"cellattr":function(rowId, tv, rawObject, cm, rdata) {  
if (rdata.Posted)
    return 'class="jqgrid-readonlycolumn"';
    return '';
      }
  ,"label":"Klient","name":"Klient_nimi","classes":null,"hidden":false},


{"label":null,"name":"Posted","editable":true,"width":0,
"classes":null,"hidden":true}],
...

Update

In update2 Oleg recommends to use rowattr. I need to hide inlined delete button and custom post button in actions column also. I'm usijng code below in loadComplete. How to implement this using rowattr ?

var LoadCompleteHandler = function () {
    var iCol = getColumnIndexByName($grid, 'Kinnitatud'),
      postedDateCol = getColumnIndexByName($grid, 'Kinkuup'),
      cRows = $grid[0].rows.length,
      iRow,
      row,
      className,
      isPosted,
      mycell,
      mycelldata,
      i, count,
      cm = $grid.jqGrid('getGridParam', 'colModel'),
      l,
      iActionsCol = getColumnIndexByName($grid, '_actions');
    l = cm.length;
    if (iCol > 0 || postedDateCol > 0) {
        for (iRow = 0; iRow < cRows; iRow = iRow + 1) {
            row = $grid[0].rows[iRow];
            className = row.className;
            isPosted = false;
            if ($.inArray('jqgrow', className.split(' ')) > 0) { // $(row).hasClass('jqgrow')
                if (iCol > 0) {
                    isPosted = $(row.cells[iCol]).find(">div>input:checked").length > 0;
                }
                if (postedDateCol > 0) {
                    mycell = row.cells[postedDateCol];
                    mycelldata = mycell.textContent || mycell.innerText;
                    isPosted = mycelldata.replace(/^s+/g, "").replace(/s+$/g, "") !== "";
                }

                if (isPosted) {
                    if ($.inArray('jqgrid-postedrow', className.split(' ')) === -1) {
                        row.className = className + ' jqgrid-postedrow';
                        $(row.cells[iActionsCol]).find(">div>div.ui-inline-del").hide();
                        $(row.cells[iActionsCol]).find(">div>div.ui-inline-post").hide();
                    }
                }
            }
        }
    }

The main ideas to change the background color of the row you will find here and here. I recommend you to read this answer which discussed different advantages and disadvantages of different approaches.

To get column index from the column name you can use following simple function:

var getColumnIndexByName = function(grid, columnName) {
        var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
        for (; i<l; i++) {
            if (cm[i].name===columnName) {
                return i; // return the index
            }
        }
        return -1;
    };

The function getColumnIndexByName($("#list"), 'MyColumnName') will get you the index in colModel of the 'MyColumnName' column.

To change the background color you can follow the example

loadComplete: function() {
    $("tr.jqgrow:odd").addClass('myAltRowClass');
}

from the answer, but instead of ':odd' filter you can write the filter yourself using jQuery.filter. Inside of the filter you can use :nth-child() to access the data from the corresponding <td> element (see here)

UPDATED: You can do the following (very close to the code from the another answer):

loadComplete: function() {
    var iCol = getColumnIndexByName($(this),'closed'),
        cRows = this.rows.length, iRow, row, className;

    for (iRow=0; iRow<cRows; iRow++) {
        row = this.rows[iRow];
        className = row.className;
        if ($.inArray('jqgrow', className.split(' ')) > 0) {
            var x = $(row.cells[iCol]).children("input:checked");
            if (x.length>0) {
                if ($.inArray('myAltRowClass', className.split(' ')) === -1) {
                    row.className = className + ' myAltRowClass';
                }
            }
        }
    }
}

The corresponding demo is here. You will see the following:

By the way if the 'Closed' column will be hidden everything will continue to work as before.

UPDATED 2: The answer describe how to use rowattr callback to simplify the solution and to have the best performance (in case of gridview: true).

这篇关于jqGrid:根据列名的行单元格值更改行的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！