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

IT技术 javascript jqgrid
2021-01-19 21:06:06

jqGrid 有名为 Posted 的列。根据客户对网格的配置方式，它可以定位在不同的位置，但始终存在。

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

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

如果此行中的 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,
"classes":null,"hidden":true}],
...

更新

在 update2 中，Oleg 建议使用 rowattr。我还需要在操作列中隐藏内联删除按钮和自定义发布按钮。我在 loadComplete 中使用下面的代码。如何使用 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();
                    }
                }
            }
        }
    }
2个回答

您可以在此处和此处找到更改行背景颜色的主要想法。我建议您阅读这个答案，其中讨论了不同方法的不同优点和缺点。

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

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;
    };

该函数getColumnIndexByName($("#list"), 'MyColumnName')将为您提供colModel“MyColumnName”列的索引。

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

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

来自答案，但':odd'您可以使用jQuery.filter自己编写过滤器而不是过滤器。在过滤器内部，您可以使用:nth-child()访问来自相应<td>元素的数据（请参阅此处）

更新：您可以执行以下操作（非常接近另一个答案中的代码）：

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';
                }
            }
        }
    }
}

相应的演示在这里。您将看到以下内容：

在此处输入图片说明

顺便说一下，如果“已关闭”列将被隐藏，那么一切都会像以前一样继续工作。

更新 2：答案描述了如何使用rowattr回调来简化解决方案并获得最佳性能（在 的情况下gridview: true）。

@Andrus：我为您制作了可以满足您需求的演示。请参阅我的答案的更新部分。
2021-03-13 21:06:06
谢谢。Colmodel 定义为{formatter:"checkbox",label:null,name:"Posted",editable:true,classes:null,hidden:true}. 我试图获取value，$("tbody > tr.jqgrow > td:nth-child("+(i+1)+")", grid[0])但这会返回奇怪的数组。如何获取发布的列值？
2021-03-14 21:06:06
@Andrus：如果您需要修剪单元格中的文本，您可以使用不同的方法，但trim方法不存在（或者至少不是在所有 JavaScript 实现中）。它存在于 JavaScript 1.8.1（Firefox 3.5 及更高版本）和 ECMAScript 5 标准中，但并非无处不在。您可以使用replace方法，定义像此处描述的修剪方法或使用更复杂的版本（例如，请参见此处或此处）
2021-03-15 21:06:06
@Andrus：在何处定义myAltRowClass. 查看答案中描述的演示并在您的项目中执行相同操作。
2021-04-03 21:06:06
@Andrus：抱歉，声明是用什么语言posted =row.cells[postedDateCol].textContent.toString().trim() != ""写的？我建议你使用一些东西var mycell=row.cells[postedDateCol], mycelldata = mycell.textContent || mycell.innerText; if (mycelldata === "") {/*do something in case of empty data*/}。该mycell会的DOM元素<td>。某些 Web 浏览器仅支持textContent属性。其他浏览器仅支持innerText属性。因此，mycelldata该单元格包含的string数据类型将使浏览器独立于浏览器。你不需要 call toString()。
2021-04-12 21:06:06

我认为答案就在这里：http : //www.trirand.net/forum/default.aspx? g=posts&m= 2678

如果这是你需要的，请告诉我。

最好的祝福。

阿波罗

其它你可能感兴趣的问题
上一篇Javascript 中算术表达式的安全评估 下一篇如何将 JavaScript 对象的属性值提取到数组中？