JQGrid charger les données sur une autre grille avec OnSelectRow

Question

Je me suis arraché les cheveux au cours des deux derniers jours. Juste comme un aperçu rapide du problème. J'utilise JqGrid 4.2.0 (dernière version au moment de l'écriture). En une seule page, j'ai deux grilles. Un à gauche, qui cherche à jouer le rôle de navigateur. Je veux charger les données sur la grille de droite avec les données déterminées par l'ID de ligne de l'élément cliqué sur le côté gauche. Mon problème est que le premier identifiant de ligne sélectionné est "bloqué" et tous les appels ajax dans le futur sont les mêmes rowid identiques (par exemple: si la première ligne sélectionnée était 514, chaque autre ligne sélectionnée produira 514 sur l'appel ajax pour charger l'autre grille, si d'abord sélectionné 513, tous les autres 513, etc)

Je soupçonne qu'il pourrait y avoir une sorte de variables se croisant ou quelque chose comme j'ai placé des appels d'alerte pour tester tout au long de l'exécution et ils alertent tous le bon Numéro d'identification jusqu'au point où la grille suivante est chargée, à quel point l'identifiant de ligne devient erroné.

Voici mon code ci-dessous:

Le premier segment est la liste initiale sur la gauche avec l'appel OnSelectRow, et la deuxième partie du code est pour la grille de données sur le côté droit qui actuall détient les données)

renderImportsList = function(url, data, firstrow) { 
var cnames = data.names; 
var cmodel = data.model; 
currentrow = firstrow; 
$("#imports_grid").jqGrid({ 
    url: url + "&type=list", 
    //caption: "Imports", 
    datatype: "json", 
    colNames: cnames, 
    colModel: cmodel, 
    recordtext: "<b>Imports: {1}</b>", 
    autowidth: true, 
    rowNum: 10000, 
    toolbar: [true,"top"], 
    pager: "#imports_grid_pager", 
    pgbuttons: false, 
    pginput: false, 
    viewrecords: true, 
    multiselect: false, 
    sortorder: "desc", 
    sortable: true, 
    onSelectRow: function(rowid) { 
     if (rowid != firstrow) { 
      if ($("#" + firstrow).hasClass("ui-state-highlight")) 
       $("#" + firstrow).removeClass("ui-state-highlight") 
     } 
     setTimeout(function() { 
      // Display import items 
      var itype = "checkpoint"; 
          alert(rowid); // This returns the right row ID so far 
      renderImportItems(url, rowid, itype); 
     }, 500); 
    }, 
    loadComplete: function() { 
     $("#imports_grid tr").css("border-color", "#666"); 
     $("tr.jqgroup").css("background", "#e9efff"); 
     $("tr.jqfoot").css("background", "#ced5e9"); 
     $("#imports_grid tr.jqfoot td").css("border-right", "none"); 
     $("#t_imports_grid").css("padding-bottom", "3px"); 
     $("#imports_grid").setSelection(firstrow, true); 
     $("#imports_grid").trigger("reloadGrid"); // Call to fix client-side sorting 
    } 
});  
$("#imports_grid").jqGrid('navGrid','#imports_grid_pager',{edit:false,add:false,del:false,search:false}); 
$("#imports_grid").trigger("reloadGrid"); // Call to fix client-side sorting 
sizeGrid("imports_grid"); 

}

cette partie exécute bien, le rowid à ce stade est ce que je clique sur, selon l'alerte placé au-dessus. Voici la deuxième fonction qui est appelée depuis OnSelectRow dans la fonction ci-dessus.

renderImportItems = function(url, rowid, itype) { 
$.ajax({ 
    url: srvrname + "applications/PMS/views/view/imports/" + itype + ".php", 
    success: function(data) { 
     var cnames = data.names; 
     var cmodel = data.model; 
        alert(rowid); // Here, the code still executes the right row ID 
     $("#checkpoint_grid").jqGrid({ 
      url: url + "&rid=" + rowid + "&type=" + itype, 
      // This is where it breaks. No matter what, I keep getting rowid to equal whichever row was selected the very first time the grid was clicked (or loaded programatically onload) 
      datatype: "json", 
      colNames: cnames, 
      colModel: cmodel, 
      recordtext: "<b>Total: {1}</b>", 
      autowidth: true, 
      rowNum: 500, 
      pager: "#" + itype + "_grid_pager", 
      pgbuttons: false, 
      pginput: false, 
      viewrecords: true, 
      multiselect: false, 
      sortorder: "desc", 
      sortable: true, 
      loadComplete: function() { 
       $("#" + itype + "_grid tr").css("border-color", "#666"); 
       $("tr.jqgroup").css("background", "#e9efff"); 
       $("tr.jqfoot").css("background", "#ced5e9"); 
       $("#" + itype + "_grid tr.jqfoot td").css("border-right", "none"); 
       $("#" + itype + "_grid").trigger("reloadGrid"); // Call to fix client-side sorting 
      } 
     }); 
     $("#" + itype + "_grid").jqGrid('navGrid','#' + itype + 'grid_pager',{edit:false,add:false,del:false,search:false}); 
     $("#" + itype + "_grid").trigger("reloadGrid"); // Call to fix client-side sorting 
     sizeGrid(itype + "_grid"); 
    } 
}); 

}

Comme vous pouvez le voir ci-dessus: au moment où la première alerte est appelée; il sort toujours le bon numéro d'identification, mais dès que la deuxième grille est initialisée; l'identifiant revient à ce qu'il a été initialisé lors du premier appel.

Toute aide fournie serait grandement appréciée. Si elle aide, voici quelques sorties de Firebug pour démontrer la question ...

(nom de domaine supprimé de la vie privée)

(Première charge: programmatique: FirstRow selected = 514) Réponse: //mydomain.com /views/view/grid.php?rid=514 type = & & checkpoint _search = false & & nd = 1321336809180 lignes = 500 & & page = 1 Sidx = & sord = desc

(cliqué ligne: ligne sélectionnée = 503) Réponse: // mydo main.com/views/view/grid.php?rid=514 type = & & checkpoint _search = false & & nd = 1321336863994 lignes = 500 & & page = 1 Sidx = & sord = desc

(cliqué rangée: rangée sélectionnée = 510) Réponse: //mydomain.com/views/view/grid.php?rid = 514 & type = checkpoint & _search = false & nd = 1321336864848 & rangs = 500 & page = 1 & Sidx = & sord = desc

Answer 1

J'ai vécu la même problème moi-même. Je vous recommande de définir votre grille en dehors de la fonction onSelectRow avec type de données réglé sur « local » et seulement changer les pièces qui changent entre chaque charge dans onSelectRow:

$("#checkpoint_grid").jqGrid('setGridParam', { 
    url: null 
}).jqGrid('setGridParam', { 
    url: url + "&rid=" + rowid + "&type=" + itype, 
    datatype: "json" 
}).trigger("reloadGrid"); 

je fais d'habitude cela avec postData: null, mais je pense que le problème sous-jacent est que jqGrid met en cache certains paramètres de la grille.

Answer 2

Je pense que les étapes suivantes devraient fonctionner:

1. Appelez le Fonction onRowSelect. Set async: false pour votre appel ajax (en option) et rowid doit être maintenu en tant que variable globale
2. Recharger la 2ème grille sur la base des données de clé primaire de la 1ère grille à l'aide This

Answer 3

Vous devez inclure GridUnload pour le $("#checkpoint_grid") intérieur de renderImportItems (par exemple après var cmodel = data.model;):

$("#checkpoint_grid").jqGrid('GridUnload'); 

Le problème est que le code qui créer la grille doit être exécutée une fois. Le code crée par exemple des en-têtes de grille, des pagineurs et d'autres zones à l'exception du corps de la grille. Ensuite, la requête Ajax sera faite pour obtenir les données pour la grille et pour remplir le corps. Si l'utilisateur clique sur l'en-tête de colonne pour trier les données par colonne ou si l'utilisateur clique sur le bouton "Page suivante", seules les données seront rafraîchies dans la grille. Donc, il ne faut créer une grille qu'une seule fois. Si l'appel suivant sera effectué sur une grille déjà existante, l'appel sera simplement ignoré. C'est the line de code (la propriété interne grid sera définie here).

En outre, je serais inclus cache: false paramètre au moins dans le deuxième appel $.ajax (l'appel à l'intérieur de renderImportItems).

Here vous trouverez une démo qui utilise GridUnload.