Jqgrid satır satırında rowID nasıl alınır? Ben bu şekilde jqGrid yaşıyorum

Question

,

<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: Ben değerler dizisi ile her rowid karşılaştıran jqGrid satır rengini değiştirmek için çalışıyorum

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

. İşte

burada

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

sorun deyişle, ROWIDs [] boş alıyorsanız, bunun için mantıktır. Yani her zaman benim durumum gidiyorum ve kırmızı renk her satırda gösterilir.

MaviArray'da rowid yoksa, ilgili renkteki satırın gerçek boyası ise greenArray e.t.c olup olmadığını kontrol etmem gerekiyor.

Örneğimde, bluearray'ım 1 ile 4000 arasında bir değere sahiptir. Bu nedenle, 1 ile 4000 arasındaki tüm bu kayıtların maviye boyanması gerekir.

İç mantığımdaki satır içi: blok boş [] olarak satırbaşı alıyorum gibi çalışmıyor.

Satır içi satır içi nasıl elde edilir: function (rd) {} ​​jqrid bloğu?

Yukarıdaki mantıksal çalışma, yükleme tamamlamada ve ızgara tamamlama olaylarında iyidir, ancak tüm kullanıcı arayüzlerini engeller ve ızgara yüklemek için çok fazla zaman harcar.

Bu konuda bana yardımcı olan var mı?

Teşekkür

Answer 1

İhtiyacınız sadece rowattr iç rd.id kullanın:

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 kodunu kullanır, ancak ızgarada 13x10000 hücrelerini oluşturmak çünkü gerçekten yavaş bu. Demoyu yalnızca yaklaşık 15 saniye sürdüğü Chrome'da açmanızı öneririz.

Yerel çağrıları kesinlikle kullanmanızı öneriyorum. Mutlak gereksiz 10000 yerine sayfa boyutu 25 olan almost the same demo'a bakın. Gerçekten hızlı çalışır. Bir başka rengi görmek için sayfa 200 veya 300'e atlayabilir. Önerdiğiniz gibi yerel sayfalama yaklaşımını izleyerek