如何在 jqgrid 的 rowattr 块中获取 rowID？

Question

我以这种方式拥有 jqgrid，

    <div id="dialogLoading" style="position:absolute;z-index:1005">
        <img src="http://blog.teamtreehouse.com/wp-content/uploads/2015/05/InternetSlowdown_Day.gif" />
    </div>
    <table id="list"></table>

    $(function () {
    var blueArray = [];
        for (var i=1;i<=4000;i++) {
          blueArray.push(i);
        }   
    var greenArray = [];
        for (var i=4000;i<=6000;i++) {
          greenArray.push(i);
        }   

    var redArray = [];
        for (var i=6000;i<=8000;i++) {
          redArray.push(i);
        } 
    var yellowArray = [];
        for (var i=8000;i<=10000;i++) {
          yellowArray.push(i);
        }   


    "use strict";
        var getGridData = function(n) {
                var data = [], i;
                for (i = 0; i < n; i++) {
                    data.push({
                        id: (i + 1)*10,
                        aa: "aa" + i,      // colunn 1
                        bb: "bb" + (i%3),  // colunn 2
                        cc: "cc" + (i%5),  // colunn 3
                        dd: "dd" + (i%7),  // colunn 4
                        ee: "ee" + (i%11), // colunn 5
                        ff: "ff" + (i%13), // colunn 6
                        gg: "gg" + (i%17), // colunn 7
                        hh: "hh" + (i%19), // colunn 8
                        ii: "ii" + (i%23), // colunn 9
                        jj: "jj" + (i%29), // colunn 10
                        kk: "kk" + (i%31), // colunn 11
                        ll: "ll" + (i%37), // colunn 12
                        mm: "mm" + (i%41)  // colunn 13
                    });
                }
                return data;
            },
            $grid = $("#list"),
            gridData,
            startTime,
            measureTime = false,
            timeInterval;

        gridData = getGridData(10000);
        startTime = new Date();
        $grid.jqGrid({
            data: gridData,
            colModel: [
                { name: "aa", label: "c01" },
                { name: "bb", label: "c02" },
                { name: "cc", label: "c03" },
                { name: "dd", label: "c04" },
                { name: "ee", label: "c05" },
                { name: "ff", label: "c06" },
                { name: "gg", label: "c07" },
                { name: "hh", label: "c08" },
                { name: "ii", label: "c09" },
                { name: "jj", label: "c10" },
                { name: "kk", label: "c11" },
                { name: "ll", label: "c12" },
                { name: "mm", label: "c13" }
            ],
            cmTemplate: { width: 100, autoResizable: true },
            iconSet: "fontAwesome",
            rowNum: 10000,
            rownumWidth: 40,
            //rowList: [20, 100, 1000, 10000, "100000:All"],
            viewrecords: true,
            rownumbers: true,
            //toppager: true,
            //pager: true,
            shrinkToFit: false,
            rowattr: function (rd) {           
            var rowIds = $("#list").jqGrid('getDataIDs');
            console.log(rowIds);
if(blueArray.indexOf(rowIds) > -1)
            return {"class": "blue"}
           else if(greenArray.indexOf(rowIds) > -1)           
            return {"class": "green"}
            else if(redArray.indexOf(rowIds) > -1)
            return {"class": "yellow"}
            else
            return {"class": "one"}
                },        
            loadComplete: function () {
                closeDialogLoading();
                if (measureTime) {
                    setTimeout(function () {
                        alert("Total loading time: " + timeInterval + "ms");
                    }, 50);
                    measureTime = false;
                }            
            },
            autoencode: true,
            caption: "Shows the performance of resizing. Make double-click on the column resizer"
        }).jqGrid("gridResize");

        timeInterval = new Date() - startTime;
        setTimeout(function () {
            alert("Total time: " + timeInterval + "ms");
        }, 50);

        function openDialogLoading(){
            $("#dialogLoading").css("display", "");
        }

        function closeDialogLoading(){
            $("#dialogLoading").hide();
        }
    });

css:

.one { background:red; }
.blue { background:blue; }
.green { background:green; }
.yellow { background:yellow; }

我正在尝试更改 jqgrid 的行颜色，将每个 rowid 与值数组进行比较。

这是逻辑，

    rowattr: function (rd) {           
            var rowIds = $("#list").jqGrid('getDataIDs');
            console.log(rowIds);
if(blueArray.indexOf(rowIds) > -1)
            return {"class": "blue"}
           else if(greenArray.indexOf(rowIds) > -1)           
            return {"class": "green"}
            else if(redArray.indexOf(rowIds) > -1)
            return {"class": "yellow"}
            else
            return {"class": "one"}

这里的问题是，rowIds 变得空 []。所以我的情况总是我要去其他地方，每行都显示红色。

我需要检查 blueArray、greenArray 等中是否存在 rowid，如果它是真的用相应的颜色绘制该行。

在我的示例中，我的 bluearray 的值从 1 到 4000。所以从 1 到 4000 的所有这些记录都必须涂成蓝色。

我在 rowattr: 中的逻辑不起作用，因为我将 rowid 设置为空 []。

如何在 rowattr: function (rd) {} block of jqrid 中获取 rowid？

上述逻辑在 loadcomplete 和 gridcomplete 事件中运行良好，但它会阻塞整个 ui 并花费大量时间来加载网格。

谁能帮我解决这个问题？

谢谢

Answer 1

您只需在rowattr 中使用rd.id：

rowattr: function (rd) {
    if (blueArray.indexOf(rd.id) > -1) {
        return {"class": "blue"};
    } else if (greenArray.indexOf(rd.id) > -1) {
        return {"class": "green"};
    } else if (redArray.indexOf(rd.id) > -1) {
        return {"class": "red"};
    } else {
        return {"class": "one"};
    }
}

the demo 使用代码，但速度真的很慢，因为您在网格中创建了 13x10000 个单元格。我建议只在 Chrome 中打开演示，它仍然需要大约 15 秒。

我强烈建议使用本地分页。查看almost the same demo，其中页面大小为 25 而不是绝对不需要的 10000。它的工作速度非常快。可以跳转到第 200 或 300 页来查看另一种颜色。