加速JQGrid在GridComplete上突出显示行

时间:2016-05-25 19:33:50

标签: javascript jquery html jqgrid

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

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

这使得页面非常大,我认为因为我正在搜索每个网格的每一行的状态&#34; False&#34;它需要永远加载

如何将我的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');
                }
            });
        }

1 个答案:

答案 0 :(得分:1)

您应该使用style="..."回调函数,该函数允许在某些行上添加类或设置某些属性(如gridview: true)。有关相应的代码示例,请参阅the old answer。另外使用gridview: true选项很重要(参见[答案])。如果您使用free jqGrid,则gridComplete选项已默认。

顺便说一句,我建议您不要使用loadComplete。在大多数情况下,回调addRowData更好。有关详细说明,请参阅the answer

更新:永远不要在循环中使用mydata来填充网格。这是最糟糕的方式,我知道填充网格(也是最慢的)。如果您需要使用data: mydata填充网格,那么您应该只为网格添加rowattr选项。此外,如果你使用我在答案中推荐的jqGrid的免费jqGrid fork,那么即使你使用addRowDataaddRowData仍然会被应用。如果您使用旧的jqGrid,则rowattr添加的行将添加,不会应用FileWriter