jqGrid ne charge pas les données

Question

J'utilise jqGrid pour ma solution de table de données. Voici les codes de configuration.

$(function() { 
    $("#submitInput").click(function() { 
     alert("I am called...") 
     jQuery("#list").jqGrid({ 
      datatype: "json", 
      url: "http://localhost:1201/admin/someURL.htm", 
      mtype:"POST", 
      height: "auto", 
      colNames:["Column 1", "Column 2", "Column 3", "Column 4", "Column 5"], 
      colModel:[ 
       {name:"col1", index:"col1", sortable:true, resizable:false}, 
       {name:"col2", index:"col2", sortable:true}, 
       {name:"col3", index:"col3", sortable:false, resizable:false}, 
       {name:"col4", index:"col4", sortable:true, resizable:false}, 
       {name:"col5", index:"col5", sortable:true, resizable:false} 
      ], 
      sortname:'col1', 
      sortorder:'asc', 
      pager: $('#pager'), 
      rowNum:10, 
      viewrecords: true, 
      rowList:[10,20,30], 
      caption: 'Some Grid Values', 
      jsonReader: { 
       root: "responseData", 
       page: "currentPage", 
       total: "totalPages", 
       records: "totalFetchedRecords", 
       repeatitems: true, 
       cell: "rowContent", 
       id: "rowID" 
      }, 
      gridComplete: function() { 
       alert("Loading done..."); 
      } 
     }); 
    }); 
}); 

Mes données JSON vient dans le format suivant:

"currentPage":"1","responseData":[ 
    {"rowContent":["Col1_Val_000001","Col2_Val_1","Col3_Val_1","Col4_Val_1","Col5_Val_1"],"rowID":"Col1_Val_000001"}, 
    {"rowContent":["Col1_Val_000002","Col2_Val_2","Col3_Val_2","Col4_Val_2","Col5_Val_2"],"rowID":"Col1_Val_000002"} 
], "totalFetchedRecords":"50","totalPages":"5"} 

Dans mon HTML, il y a un bouton avec id "submitInput" et une table avec id "liste".

D'une manière ou d'une autre, ces données ne sont pas chargées dans la grille. Quelle est la raison?

Answer 1

Vous ne devriez probablement pas créer jqGrid à l'intérieur de cliquez sur handle. Vous devez le faire une fois en dehors de cliquez sur handle et appelez jQuery("list").trigger('reloadGrid') à l'intérieur du gestionnaire. Si au début les données ne doivent pas être chargées dans la grille, vous pouvez utiliser datatype: 'local' un début. Si nécessaire, vous pouvez faire div avec jqGrid parfois visitable et parfois invisible en utilisant les fonctions hide() et show() jQuery. À l'intérieur du gestionnaire click, vous pouvez changer le datatype en 'json' par rapport à setGridParam() et ensuite appeler trigger('reloadGrid'). Dans beaucoup de cas vous changez également certains paramètres de l'URL avant d'appeler trigger('reloadGrid') (voir Should one replace the usage addJSONData of jqGrid to the usage of setGridParam(), and trigger('reloadGrid')?), mais vous n'en avez probablement pas besoin dans votre cas.