的CSS：

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中是否存在rowid，greenArray e.t.c中是否存在，如果为真，则绘制具有相应颜色的行。

在我的例子中，我的蓝图有1到4000的值。因此，从1到4000的所有这些记录都必须涂成蓝色。

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

如何在rowqtr：function（rd）{} jqrid块中获取rowid？

上述逻辑工作在loadcomplete和gridcomplete事件中运行良好，但是它阻塞了整个ui并且花了很多时间来加载网格。

有谁可以帮我解决这个问题？

由于

Answer 1

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

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秒。

我严格建议使用本地分页。查看页面大小为25而不是绝对不需要10000的almost the same demo。它的工作速度非常快。可以跳到页面200或300以查看其他颜色。

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

的CSS：

1 个答案: