2010-12-15 4 views
6

Wenn I Grid zu wahren (gridview: true) gesetzt in unserer jqGrid die Leistung jqGrid, wobei das Verfahren wie afterInsertRow zu erhöhen oder andere ähnliche Methoden werden nicht ausgeführt. Es folgt der Code meiner jgGrid:Die afterInsertRow: Funktion (ids) -Verfahren ausgeführt wird nicht, wenn ich Grid: true

jQuery("#displaylistGrid").jqGrid({ 
    url: contextRoot + '/StandardProxy/displayListService?userRole='+ 
     userRole+'&userName='+userName+'&userId='+userId+ 
     '&duration='+displayDuration+'&wicNo='+wicNo+ 
     '&displayName='+dlDisplayName+'&displayNameArr='+displayNameArr+ 
     '&pointValue='+pValue+'&locationId='+locId+'&locationCode='+ 
     locCode+'&serviceType=forecast', 
    datatype: 'json', 
    colNames: ["CM Name", "Display ", "Loc. Pt.","Max. Ben." ,"Display Name", 
       "Items w/Fcst", "Units", "Sales $", "Profit $", "GP%", "Units", 
       "Sales $", "Profit $", "GP%","Hidden","Hidden1","Hidden2", 
       "Start Date and End Date", "Hidden4"], 
    colModel: [ 
     { name: "cm_name",  index: "cm_name",  sorttype: "text", width: 120, 
      resizable: true }, 
     { name: "ds_location", index: "ds_location", sorttype: "text", width: 120, 
      resizable: true }, 
     { name: "ds_symbol", index: "ds_symbol", sorttype: "text", width: 50, 
      align: "center",  resizable: true }, 
     { name: "ds_benchMark", index: "ds_benchMark",sorttype: "text", width: 50, 
      align: "center",  resizable: true }, 
     { name: "ds_name",  index: "ds_name",  sorttype: "text", width: 230, 
      resizable: true }, 
     { name: "ds_ItemFrcst", index: "ds_ItemFrcst",sorttype: "int", width: 60, 
      align: "center",  resizable: true, 
      unformat: addDemoninatorSortingFormatter }, 
     { name:"ds_units_promo",index:"ds_units_promo",sorttype:"float",width: 85, 
      align: "right",  unformat : spaceFormatter }, 
     { name:"ds_sales_promo",index:"ds_sales_promo",sorttype:"float",width: 95, 
      align: "right",  unformat : spaceFormatter }, 
     { name: "displaylistGrid_ds_profit_promo", 
      index: "displaylistGrid_ds_profit_promo", 
      sorttype: "float", width: 95,    align: "right", 
      unformat : spaceFormatter }, 
     { name:"ds_gp_pct_promo",index:"ds_gp_pct_promo",sorttype:"int",width: 50, 
      align: "right",  unformat : spaceFormatter }, 
     { name: "ds_units_per_store_week", 
      index: "ds_units_per_store_week",   sorttype:"float",width: 85, 
      align: "right",  unformat : spaceFormatter }, 
     { name: "ds_sales_per_store_week", 
      index: "ds_sales_per_store_week", 
      sorttype: "float", width: 90,    align: "right", 
      unformat : spaceFormatter }, 
     { name: "ds_profit_per_store_week", 
      index: "ds_profit_per_store_week", 
      sorttype: "float", width: 90,    align: "right", 
      unformat : spaceFormatter }, 
     { name: "ds_gp_pct_per_store_week", 
      index: "ds_gp_pct_per_store_week", 
      sorttype: "float", width: 40,    align: "right", 
      unformat : spaceFormatter }, 
     { name: "hidden1",  index: "hidden1",  sorttype: "int", 
      align: "center",  hidden: true }, 
     { name: "hidden2",  index: "hidden2",  sorttype: "text", 
      align: "center",  hidden: true }, 
     { name: "hidden3",  index: "hidden3",  sorttype: "int", 
      align: "center",  hidden: true }, 
     { name:"forecast_dates",index:"forecast_dates",sorttype: "text", 
      align: "center",  hidden: true }, 
     { name: "hidden4",  index: "hidden4",  sorttype: "text", 
      align: "center",  hidden: false } 
    ], 
    onSelectRow: function(ids){ 
     //checkDisplayDetail(); 
     //setDefaultValuesToTheSortingParams(); 
     var dropDownVal = document.getElementById("displayDetailSelection").value; 
     var subTabName = document.getElementById("detailSubTabName").value; 
     if(subTabName=="Active") 
      dropDownVal = document.getElementById("displayDetailActiveSelection").value; 
     reLoadDisplayDetailData(ids,'forecast',dropDownVal,subTabName); 
    }, 
    afterInsertRow : function(ids) { // shows custom tooltip 
     var customToolTip = jQuery("#displaylistGrid").getCell(ids,'ds_name') + 
        " -- " + jQuery("#displaylistGrid").getCell(ids,'hidden4'); 
     $("#displaylistGrid").setCell(ids,'ds_name', '','',{title:customToolTip}); 
    }, 
    gridComplete : function(){ 
     if($("#isForecastedSalesGridLoaded").val()=="no"){ 
      $("#jqgh_displaylistGrid_ds_profit_promo").click(); 
     } 
     else{ 
      $("#isForecastedSalesGridLoaded").val("no"); 
     } 
    }, 
    onSortCol : function(){ 
     $("#isForecastedSalesGridLoaded").val("yes"); 
    }, 
    width: 983, 
    rowNum: 999, 
    height: eval(heightOfDispListGrid()+7), 
    toolbar: [true, "top"], 
    viewrecords: true, 
    treeIcons: {leaf: "ui-icon-document-b"}, 
    treeGrid: true, 
    treeGridModel: 'nested', 
    ExpandColumn : 'Description', 
    ExpandColClick: true, 
    loadonce:false, 
    refresh : true, 
    shrinkToFit: true, 
    gridview:true,   
    sortorder:"asc", 
    sortname:"displaylistGrid_ds_profit_promo" 
}); 

Es folgt der Code von afterInsertRow Methode:

afterInsertRow : function(ids) { // shows custom tooltip 
    var customToolTip = jQuery("#displaylistGrid").getCell(ids,'ds_name') + " -- " + 
         jQuery("#displaylistGrid").getCell(ids,'hidden4') ; 
    $("#displaylistGrid").setCell(ids,'ds_name', '','',{title:customToolTip}); 
}, 

Der obige Code verwendet wird fertigen besonders Werkzeugspitze zu zeigen. Bitte schlage mir vor, was ich falsch mache.

Bitte helfen Sie mir

Danke, DISMGMT

Antwort

4

Der Sinn der Verwendung von gridview:true folgt. Im "gridview" -Modus wird das meiste Gitter contain als String erzeugt. Um genau zu sein, baut man ein Array von Substrings mit HTML-Markup für jede Gitterzeile auf, man erzeugt einen String aus dem String-Array in Bezug auf join('') und erst dann erzeugt man ein DOM-Objekt, das das Gitter darstellt. Es verbessert die Performance nicht nur durch besseres Arbeiten mit den langen Strings (join('')), sondern auch dadurch, dass das Arbeiten mit DOM-Objekten reduziert wird, was sehr viel langsamer ist als das Arbeiten mit Strings.

Also ich empfehle Ihnen nicht afterInsertRow überhaupt zu verwenden. Statt dessen können Sie erfolgreich mit Bezug auf den folgenden Code das gleiche tun

var myGrid = jQuery("#displaylistGrid"); 
var ids = myGrid.jqGrid('getDataIDs'); 
for (var i = 0; i < ids.length; i++) { 
    var id=ids[i]; 
    var customToolTip = myGrid.jqGrid('getCell',ids,'ds_name') + " -- " + 
         myGrid.jqGrid('getCell',ids,'hidden4'); 
    myGrid.jqGrid('setCell',ids,'ds_name', '','',{title:customToolTip}); 
} 

, die Sie im gridComplete oder loadComplete enthalten.

Die beste Leistung, die Sie archivieren werden, indem Sie custom formatter für die Spalte ds_name verwenden, wo Sie den benutzerdefinierten Tooltipp festlegen möchten. Die Implementierung ist ziemlich einfach, weil Ihr benutzerdefinierter Formatierer als rowObject Parameter die Zeile der Serverdaten in der gleichen Form erhält, wie sie vom Server empfangen wird (als Array oder als Objekt). Der richtig hidden4 wird sofort zugänglich sein (ich empfehle Ihnen, this answer für weitere Details zu lesen).

AKTUALISIERT: Die Antwort ist sehr alt. jqGrid bietet viele alternative Implementierungsweisen, die vom Leistungspunkt aus viel besser sind. Jede Änderung auf der Seite folgt dem Browser reflow. Daher ist die Verwendung von setCell in der Schleife nicht effektiv. Viel besser ist die Verwendung von cellattr oder rowattr und weiterhin gridview: true zu verwenden, deren Vorteile in the answer beschrieben sind.

The answer zeigt sehr effektive Art und Weise title auf der Zelle zu setzen cellattr in der aktuellen Antwort anstelle von setCell verwenden. Another answer bieten ein weiteres gängiges Beispiel für die Verwendung cellattr. Um Attribute der Zeilen des Rasters zu setzen, kann man rowattr Callback verwenden. Das Codebeispiel finden Sie unter the answer.

Verwandte Themen