Wie bekomme ich rowID im rowattr Block von jqgrid?

Question

Ich habe jqGrid diese Weise

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

Ich versuche, die Zeilenfarbe des jqGrid zu ändern jedes rowid mit einem Array von Werten zu vergleichen. Hier

ist die Logik für das,

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"} 

Das Problem hier ist, ROWIDs als leer bekommen []. also immer mein Zustand ich gehe zu sonst und rote Farbe wird auf jeder Zeile angezeigt.

Ich muss überprüfen, ob Rowid existiert in BlueArray, GreenArray e.t.c wenn es wahr ist, malen Sie diese Zeile mit der entsprechenden Farbe.

In meinem Beispiel hat mein Bluearray Werte von 1 bis 4000. Also müssen alle diese Datensätze von 1 bis 4000 blau gezeichnet werden.

Meine Logik innerhalb rowattr: Block funktioniert nicht, da ich Rowid als leer [] bekomme.

Wie bekomme ich rowid innerhalb rowattr: Funktion (rd) {} ​​Block von jqrid?

Die obige Logik funktioniert gut in loadcomplete und gridcomplete Ereignissen, aber es blockiert ganze ui und nimmt die Hölle viel Zeit, um Raster zu laden.

Kann mir jemand in dieser Ausgabe helfen?

Dank

Answer 1

Sie müssen verwenden nur rd.id innerhalb von 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 den Code verwendet, aber es ist wirklich langsam, weil Sie 13x10000 Zellen im Raster erstellen. Ich empfehle, die Demo nur in Chrome zu öffnen, wo es noch ca. 15 Sekunden dauert.

Ich empfehle dringend lokalen Paging zu verwenden. Schauen Sie sich almost the same demo an, wo die Seitengröße 25 ist, anstatt absolut nicht benötigt 10000. Es funktioniert wirklich schnell. Man kann auf die Seite 200 oder 300 springen, um andere Farben zu sehen.