jqgrid setGridParam type de données: local

Question

Je ne veux pas frapper le serveur et ramener chaque ligne lorsque je pagine à travers les enregistrements en utilisant le pager. J'ai lu que si je mets le type de données = local dans le blog complet dans la fonction .ajax ET si je mets loadonce: true alors je devrais pouvoir éviter d'avoir à attendre que la grille soit rechargée avec les données. Cependant, quand je fais ces choses, la grille ne va pas à la page suivante. Il se bloque ...
Qu'est-ce que je fais mal?

jQuery(document).ready(function() { 
    jQuery("#list").jqGrid({ 
     datatype: processrequest, 
     mtype: 'POST', 
     jsonReader: { 
      root: "rows", //arry containing actual data 
      page: "page", //current page 
      total: "total", //total pages for the query 
      records: "records", //total number of records 
      repeatitems: false, 
      id: "ID" //index of the column with the PK in it 
     }, 
     colNames: ['Name', 'Title'], 
     colModel: [ 
     { name: 'name', index: 'name', width: 250 }, 
     { name: 'title', index: 'title', width: 250 } 
     ], 
     pager: '#pager', 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     sortorder: "desc", 
     viewrecords: true, 
     height: '250px', 
     caption: 'My first grid', 
     loadonce: true 
    }).navGrid('#pager', {edit: false, add: false, del: false}); 
}); 

function processrequest(postdata) { 
... 
$.ajax({ 
... 
    complete: function (jsondata, stat) { 
     if (stat == "success") { 
      var thegrid = jQuery("#list2")[0]; 
      var jsonObject = (eval("(" + jsondata.responseText + ")")); 
      thegrid.addJSONData(jsonObject.d); 
      $(".loading").hide(); 
     } else { 
      $(".loading").hide(); 
      alert("Error with AJAX callback"); 
     } 
     $("#list").setGridParam({ datatype: 'local' }); 
    } 
}); 
} 

Answer 1

Il y a quelques malentendus. Si vous utilisez datatype: local, vous devez remplir jqGrid avec des méthodes telles que addRowData ou définir les données en une fois avec le paramètre data (pour jqGrid version 3.7 et ultérieure). Donc, l'utilisation de datatype: local suit pour jqGrid ne charge aucune donnée et votre paramètre datatype: processrequest sera ignoré.

Si vous voulez utiliser le paramètre loadonce: true qui est pris en charge depuis la version 3.7 de jqGrid, vous devriez avoir tous les paramètres de jqGrid pour JSON ou XML (par exemple datatype: json dans votre cas) et un paramètre supplémentaireloadonce: true. Ensuite, après le premier chargement de données jqGrid passera le type de données à datatype: local et après cela, il fonctionnera indépendamment sur le serveur, mais ignore certains paramètres (comme datatype: processrequest dans votre cas).

Encore une petite remarque. La plupart des propriétés de jsonReader que vous utilisez dans votre exemple sont définies par défaut (voir this wiki). Les paramètres que vous utilisez seront combinés avec les propriétés par défaut, il suffit d'utiliser le paramètre comme jsonReader: { repeatitems: false, id: "ID"}

MISE À JOUR: OK Jeff. Il me semble, pour résoudre votre problème, vous avez besoin de plus d'exemples de code des deux côtés: client et serveur. Voici un petit exemple que j'ai créé et testé pour vous.

Tout d'abord le côté serveur. Dans le service Web ASMX nous définissons une méthode Web qui génèrent des données de test pour votre table:

public JqGridData TestMethod() { 
    int count = 200; 
    List<TableRow> gridRows = new List<TableRow> (count); 
    for (int i = 0; i < count; i++) { 
     gridRows.Add (new TableRow() { 
      id = i, 
      cell = new List<string> (2) { 
       string.Format("Name{0}", i), 
       string.Format("Title{0}", i) 
      } 
     }); 
    } 

    return new JqGridData() { 
     total = 1, 
     page = 1, 
     records = gridRows.Count, 
     rows = gridRows 
    }; 
} 

où les classes JqGridData et TableRow sont définies comme suit:

public class TableRow { 
    public int id { get; set; } 
    public List<string> cell { get; set; } 
} 
public class JqGridData { 
    public int total { get; set; } 
    public int page { get; set; } 
    public int records { get; set; } 
    public List<TableRow> rows { get; set; } 
} 

Ici vous pouvez voir, le web La méthode TestMethod ne contient aucun paramètre et affiche les données complètes. La pagination, le tri et la recherche de données seront effectués par jqGrid (version 3.7 ou supérieure).

Pour lire ces données et mettre en jqGrid que nous pouvons faire ce qui suit:

$("#list").jqGrid({ 
    url: './MyTestWS.asmx/TestMethod', 
    datatype: 'json', 
    mtype: 'POST', 
    loadonce: true, 
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, 
    serializeGridData: function (postData) { 
     return JSON.stringify(postData); 
    }, 
    jsonReader: { 
     root: function (obj) { return obj.d.rows; }, 
     page: function (obj) { return obj.d.page; }, 
     total: function (obj) { return obj.d.total; }, 
     records: function (obj) { return obj.d.records; } 
    }, 
    colModel: [ 
     { name: 'name', label: 'Name', width: 250 }, 
     { name: 'title', label: 'Title', width: 250 } 
    ], 
    rowNum: 10, 
    rowList: [10, 20, 300], 
    sortname: 'name', 
    sortorder: "asc", 
    pager: "#pager", 
    viewrecords: true, 
    gridview: true, 
    rownumbers: true, 
    height: 250, 
    caption: 'My first grid' 
}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true}, 
    {},{},{},{multipleSearch : true}); 

Quelques commentaires sur la définition de jqGrid:

Pour communiquer avec le service Web ASMX par l'un JSON doit faire ce qui suit dans la demande jQuery.ajax correspondante:

• dataType: 'json' doit être définie.
• contentType:'application/json; charset=utf-8' doit être défini.
• L'envoi de données au serveur doit être codé en JSON.

Pour faire tout cela, je l'utilise datatype, ajaxGridOptions et serializeGridData paramètres de jqGrid. Je fais le codage JSON avec la fonction JSON.stringify (le JavaScript correspondant peut être téléchargé à partir de here).

Ensuite, les données reçues doivent être décodées. Je fais cela avec ma fonction préférée de jqGrid - jsonReader avec des fonctions (voir this SO post et this wiki).

A la fin nous utilisons loadonce: true qui changent la datatype de jqGrid 'json'-'local' et nous pouvons utiliser immédiatement tous les avantages de la pagination locale, le tri et la recherche existant depuis et sophistiqués jqGrid la version 3.7.

Si vous ne souhaitez pas effectuer de recherche de personne côté serveur, de tri et de recherche (ou de recherche avancée) avec le service Web ASMX, cela est également possible. Pour enregistrer une petite place ici et séparer des exemples de code, je vais poster l'exemple correspondant dans votre autre question jqgrid Page 1 of x pager (voir la partie mise à jour).

Answer 2

Cela a fonctionné pour moi. J'avais un problème avec la pagination et le tri ne fonctionnait pas. Probablement à cause des éléments .d et __type qui étaient renvoyés dans l'objet JSON dans .net. Cependant, avec les configurations supplémentaires dans cet exemple. Cela a fonctionné!

Je devenais fou. C'est la manière de configurer la grille si vous utilisez .Net en tant que votre webservice. Il est configuré pour analyser et définir correctement les éléments de données de l'objet JSON dans les emplacements appropriés requis dans la grille pour permettre le pagination et le tri de fonctionner.

Je devais faire un commentaire, car je suis sûr qu'il y a quelques personnes qui aimeraient utiliser cette grille mais qui utilisent .Net comme service web.

Answer 3

Il est un peu en retard, mais voici une (la?) Solution super facile pour toute solution d'asile futurs:

gridComplete: function(){ 
    $("#yourGridID").setGridParam({datatype: 'local'}); 
} 

Voilà. J'utilise 3.7.2, je ne peux pas parler pour d'autres versions. Le problème (apparemment) provient de 'loadonce' fonctionnant seulement avec les valeurs de type de données prédéfinies, ce qu'une fonction n'est pas. Je croire les autres valeurs intégrées fonctionneront également, mais «local» est logique.