javascript – jqGrid：根据列名称,根据行单元格值更改行的背景颜色

jqgrid的列名为“发布”.它可以定位在不同的位置,这取决于客户如何配置网格,但始终是prq.

如果“发布”列的值为“真”,我需要更改行的背景颜色

我尝试下面的colmodel,但alert(rdata.Posted)显示总是未定义的.

如何改变行的背景颜色,如果此行中的“发布”列的值为true？

我查看了许多Oleg和其他解决方案来改变背景颜色,但他们使用硬编码的列号.

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,"hidden":true}],...

更新

在update2中,Oleg建议使用rowattr.我还需要隐藏内联的删除按钮和自定义帖子按钮.我在下面的loadComplete中的usijng代码.如何使用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();
                    }
                }
            }
        }
    }

解决方法

主要的想法是改变行的背景颜色,你会发现 here和 here.我建议你阅读 this answer,讨论不同方法的不同优点和缺点.

要从列名中获取列索引,可以使用以下简单函数：

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

函数getColumnIndexByName($(“#list”),’MyColumnName’)将获取’MyColumnName’列的colModel中的索引.

要更改背景颜色,您可以按照示例

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

从the answer,而不是’：odd’过滤器,您可以使用jQuery.filter自己编写过滤器.在过滤器内部,您可以使用:nth-child()访问相应的< td>元素(参见here)

更新：您可以执行以下操作(非常接近the another answer的代码)：

loadComplete: function() {
    var iCol = getColumnIndexByName($(this),'closed'),cRows = this.rows.length,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';
                }
            }
        }
    }
}

相应的演示是here.您将看到以下内容：

顺便说一句,如果“已关闭”列将被隐藏,所有内容将继续像以前那样工作.

UPDATED 2：The answer描述了如何使用rowattr回调来简化解决方案并获得最佳性能(在gridview：true的情况下).

原文地址：https://www.jb51.cc/js/150663.html