javascript - 加快 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

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

顺便说一句，我不建议您使用gridComplete。在大多数情况下，回调 loadComplete 效果更好。请参阅the answer以获得更详细的解释。

更新:永远不应该在循环中使用addRowData来填充网格。这是最糟糕的方式，据我所知，这是填充网格的最糟糕的方式(也是最慢的方式)。如果您需要使用 mydata 填充网格，那么您只需向网格添加 data: mydata 选项即可。此外，如果您使用 jqGrid 的免费 jqGrid 分支(我在答案中推荐)，那么即使您使用 addRowData ，仍然会应用 rowatr 。如果您使用旧的 jqGrid，则将添加由 addRowData 添加的行而不应用 rowattr。