加快 JQGrid 在 GridComplete 上突出显示行

Question

我正在根据特定条件设置行颜色。我有几个有几行的网格。此代码严重减慢了页面的加载速度

    function setRowColorSetgrid() {
        var rows = $("#Setgrid").getDataIDs();
        for (var i = 0; i < rows.length; i++) {
            var status = $("#Setgrid").getCell(rows[i], "value");
            if (status == "False") {
                $("#Setgrid").jqGrid('setRowData', rows[i], false, {
                    color: 'white',
                    weightfont: 'bold',
                    background: 'red'
                });
            }
        }
    }

 //Have a function to set color for each grid I am loading
    function setRowColorSomeOthergrid() {
        var rows = $("#SomeOthergrid").getDataIDs();
        for (var i = 0; i < rows.length; i++) {
            var status = $("#SomeOthergrid").getCell(rows[i], "value");
            if (status == "False") {
                $("#Somethergrid").jqGrid('setRowData', rows[i], false, {
                    color: 'white',
                    weightfont: 'bold',
                    background: 'red'
                });
            }
        }
    }

在 JQGrid 的网格完成中，我称之为

    gridComplete: function(){setRowColorSetgrid();}
   //Have a grid creation funcrtion for all the grids I am loading
       gridComplete: function(){setRowColorSomeOthergrid();}

这使页面变得非常大，我认为是因为我在每个网格的每一行中搜索状态“False”它需要永远加载

如何将我的 javascript 代码缩减为没有每个网格的 setRowColor... 函数

我还可以使用哪些其他逻辑来根据性能更好的字段值设置行颜色？

这是我的 jqgrid。该类永远不会被应用，但该函数确实可以遍历行

  function INIFiltersgrid() {
            var data = [
                ['INI Exception', 'False', 'INI Path: Not Found'],
            ];
            $("#INIFiltersgrid").jqGrid({
                datatype: "local",
                height: 500,
                width: 900,
                colNames: ['Name', 'Passed', 'Value'],
                colModel: [{
                    name: 'name',
                    index: 'name',
                    width: 90
                }, {
                    name: 'value',
                    index: 'value',
                    width: 60
                }, {
                    name: 'passed',
                    index: 'passed',
                    width: 240,
                    height: 400
                }],
                gridview: true,
                rowattr: function (rd) {
    if (rd.value === "False") { // verify that the testing is correct in your case
        return {"class": "myAltRowClass"};
    }
                caption: "INIFilters"
            });
            var names = ["name", "value", "passed"];
            var mydata = [];
            for (var i = 0; i < data.length; i++) {
                mydata[i] = {};
                for (var j = 0; j < data[i].length; j++) {
                    mydata[i][names[j]] = data[i][j];
                }
            }
            for (var i = 0; i <= mydata.length; i++) {
                $("#INIFiltersgrid").jqGrid('addRowData', i + 1, mydata[i]);
            }
            $("#INIFiltersgrid").jqGrid('setGridParam', {
                ondblClickRow: function(rowid, iRow, iCol, e) {
                    alert('double clicked');
                }
            });
        }

Answer 1

您应该使用rowattr 回调函数，它允许在某些行上添加类或设置某些属性（如style="..."）。请参阅the old answer 以获取相应的代码示例。另外使用gridview: true 选项很重要（请参阅[答案]）。如果你使用free jqGrid，那么gridview: true选项已经是默认的了。

顺便说一句，我不建议您使用gridComplete。在大多数情况下，回调 loadComplete 更好。更详细的解释见the answer。

更新：永远不要在循环中使用addRowData 来填充网格。这是最糟糕的方式，我知道填充网格（也是最慢的）。如果你需要用mydata 填充网格，那么你应该在网格中添加data: mydata 选项。此外，如果您使用我在回答中推荐的 jqGrid 的免费 jqGrid 分支，那么即使您使用 addRowData，仍将应用 rowattr。如果您使用旧的 jqGrid，那么addRowData 添加的行将被添加而不应用rowattr。