La afterInsertRow: fonction méthode (ids) n'exécute pas lorsque j'utilise gridview: true

Question

Quand je mis gridview à vrai (gridview: true) dans notre jqGrid pour augmenter les performances de jqGrid, la méthode comme afterInsertRow ou d'autres méthodes similaires ne sont pas exécutées. Voici le code de mon jgGrid:

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

Voici le code de méthode afterInsertRow:

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

Le code précédent est utilisé pour montrer customize infobulle. S'il vous plaît me suggérer ce que je fais mal.

S'il vous plaît aider moi

Merci, DISMGMT

Answer 1

Le sens de l'utilisation de gridview:true suit. Dans le mode "gridview", la plus grande partie de la grille sera créée sous forme de chaîne. Pour être exactement un construit un tableau de sous-chaînes avec le balisage HTML pour chaque ligne de grille, on crée une chaîne à partir du tableau de chaînes en ce qui concerne join('') et seulement alors on crée un objet DOM représenté la grille. Il améliore les performances non seulement en raison d'un meilleur fonctionnement avec les chaînes longues (join('')), mais aussi à cause de la réduction du travail avec les objets DOM, ce qui est beaucoup plus lent avec les chaînes. Je recommande donc de ne pas utiliser afterInsertRow du tout. Au lieu de cela, vous pouvez le faire avec succès le même en ce qui concerne le code suivant

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

que vous pouvez inclure dans le gridComplete ou loadComplete.

La meilleure performance que vous allez archiver en utilisant custom formatter pour la colonne ds_name où vous souhaitez définir l'info-bulle personnalisée. L'implémentation est assez simple car votre formateur personnalisé recevra comme paramètre rowObject la ligne des données du serveur sous la même forme que celle reçue par le serveur (sous forme de tableau ou d'objet). Le hidden4 sera immédiatement accessible (je vous recommande de lire this answer pour plus de détails).

MISE À JOUR: La réponse est très ancienne. jqGrid fournit de nombreuses manières d'implémentation alternatives qui sont nettement meilleures du point de vue des performances. Chaque changement sur la page suit le navigateur reflow. Donc, l'utilisation de setCell dans la boucle n'est pas efficace. Beaucoup mieux est l'utilisation de cellattr ou rowattr et de continuer à utiliser gridview: true dont les avantages sont décrits dans the answer.

The answer démontre de manière très efficace pour mettre title sur la cellule à l'aide cellattr au lieu de setCell utilisé dans la réponse actuelle. Another answer fournissent un exemple plus commun pour utiliser cellattr. Pour définir les attributs des lignes de la grille, vous pouvez utiliser le rappel rowattr. Voir the answer pour l'exemple de code.

Answer 2

Note: this event does not fire if gridview option is set to true

J'ai eu le même problème, après avoir lu le wiki jqGrid je pensais donner le lien pour documenter si quelqu'un d'autre face à un même problème.