2010-06-10 26 views
27

Mes utilisateurs de l'application m'ont demandé s'il était possible que les pages contenant un jqGrid se souviennent du filtre, de l'ordre de tri et de la page courante de la grille élément de grille pour mener à bien une tâche, puis revenir à ce qu'ils aimeraient qu'il soit « comme ils l'ont laissé »)Mémoriser (persister) le filtre, l'ordre de tri et la page courante de jqGrid

cookies semblent être la voie à suivre, mais comment obtenir la page à charge ces et les mettre dans la grille avant il fait sa première demande de données est un peu au-delà de moi à ce stade.

Est-ce que quelqu'un a une expérience avec ce genre de chose avec jqGrid? Merci!

Répondre

27

Problem solved

J'ai finalement fini par utiliser les cookies javascript pour stocker la colonne de tri, l'ordre de tri, numéro de page, les lignes de la grille et les détails du filtre de la grille (en utilisant JSON/Javascript cookies - l'objet prefs)

Enregistrer les préférences - Appelés de $(window).unload(function(){ ... });

var filters = { 
    fromDate: $('#fromDateFilter').val(), 
    toDate: $('#toDateFilter').val(), 
    customer: $('#customerFilter').val() 
}; 

prefs.data = { 
    filter: filters, 
    scol: $('#list').jqGrid('getGridParam', 'sortname'), 
    sord: $('#list').jqGrid('getGridParam', 'sortorder'), 
    page: $('#list').jqGrid('getGridParam', 'page'), 
    rows: $('#list').jqGrid('getGridParam', 'rowNum') 
}; 

prefs.save(); 

Préférences de charge - Appelés de $(document).ready(function(){ ... });

var gridprefs = prefs.load(); 

$('#fromDateFilter').val(gridprefs.filter.fromDate); 
$('#toDateFilter').val(gridprefs.filter.toDate); 
$('#customerFilter').val(gridprefs.filter.customer); 

$('#list').jqGrid('setGridParam', { 
    sortname: gridprefs.scol, 
    sortorder: gridprefs.sord, 
    page: gridprefs.page, 
    rowNum: gridprefs.rows 
}); 

// filterGrid method loads the jqGrid postdata with search criteria and re-requests its data 
filterGrid(); 

jqGrid Référence: http://www.secondpersonplural.ca/jqgriddocs/_2eb0fi5wo.htm

PAR LA DEMANDE - LE CODE filtrage en treillis

function filterGrid() { 
     var fields = ""; 
     var dateFrom = $('#dateFrom').val(); 
     var dateTo = $('#dateTo').val(); 

     if (dateFrom != "") fields += (fields.length == 0 ? "" : ",") + createField("shipmentDate", "ge", dateFrom); 
     if (dateTo != "") fields += (fields.length == 0 ? "" : ",") + createField("shipmentDate", "le", dateTo); 

     var filters = '"{\"groupOp\":\"AND\",\"rules\":[' + fields + ']}"'; 

     if (fields.length == 0) { 
      $("#list").jqGrid('setGridParam', { search: false, postData: { "filters": ""} }).trigger("reloadGrid"); 
     } else { 
      $("#list").jqGrid('setGridParam', { search: true, postData: { "filters": filters} }).trigger("reloadGrid"); 
     } 

    } 

    function createField(name, op, data) { 
     var field = '{\"field\":\"' + name + '\",\"op\":\"' + op + '\",\"data\":\"' + data + '\"}'; 
     return field; 
    } 
+1

Je vous recommande de penser à la mise à jour des différentes données du côté serveur. Sera le travail de filtre? Pourriez-vous supprimer les filtres enregistrés après les mises à jour sur le serveur? L'exemple d'easieast est le numéro de page. Comment ressemblera jqGrid du côté client si à la prochaine fois le nombre maximal de pages sera inférieur à la page actuelle enregistrée dans le cookie? Néanmoins je trouve votre mise en œuvre bonne et vous allez définitivement dans la bonne direction. – Oleg

+1

Hé, Jimbo. Je vais avoir ce filterGrid de votre part si vous l'avez. +1 sur question et réponse - exactement ce que je cherchais. –

+1

@David - Mise à jour de ma réponse ci-dessus pour inclure le code filterGrid - tout le meilleur :) – Jimbo

1

Si l'utilisateur se connecte, vous pourrez peut-être rétablir les requêtes AJAX sur le serveur lorsque ces paramètres seront modifiés. Vous pouvez ensuite enregistrer les paramètres, soit dans la base de données (pour les rendre permanents), soit dans la session (pour les conserver temporairement), soit dans les deux (pour des raisons de performances).

Dans tous les cas, avec les paramètres stockés côté serveur, vous pouvez simplement les envoyer à la page lorsque cela est demandé.

+0

envisagé de le faire, mais le problème est que: Lorsqu'un chargement de la page pour la première fois, il obtient un filtre vide et ordre de tri et page. Comment votre fournisseur de données côté serveur peut-il savoir s'il s'agit d'un «réinitialiser le filtre et modifier l'ordre de tri, etc. ou une demande "charger mes valeurs par défaut"? Pour cette raison, je pensais que les cookies côté client seraient mieux. – Jimbo

+0

Est-ce important? Si ce sont les valeurs par défaut, vous devriez pouvoir les enregistrer sur le serveur et les appliquer au besoin sans changer le comportement par défaut - ou est-ce que je manque quelque chose? –

2

Je partie du travail ce que vous avez besoin, vous pouvez mettre en œuvre en ce qui concerne jqGridExport et jqGridImport (voir http://www.trirand.com/jqgridwiki/doku.php?id=wiki:import_methods), mais il me semble que vous voulez plus comme existe hors de la boîte dans jqGrid. Certaines fonctionnalités supplémentaires, vous devrez vous implémenter.

+0

Merci Oleg, je n'avais pas vu cette fonctionnalité auparavant. Il ne résout pas tout à fait mon problème actuel (j'ai documenté ma solution ci-dessous) mais sera utile à l'avenir im sûr! – Jimbo

+0

Je comprends que 'jqGridExport' et' jqGridImport' vous donnent trop de fonctionnalités, mais je ne sais rien de plus ce qui existe déjà dans jqGrid qui supporte vos besoins. Vous devez l'impacter vous-même. – Oleg

3

je travaillais sur la même chose, mais également nécessaire pour obtenir et enregistrer la commande de colonne. Ce n'est pas simple car jqGrid.remapColumns est relatif à ce que l'état actuel de la grille est ...

Juste au cas où quelqu'un trouve cela utile (et j'aimerais savoir s'il y a déjà quelque chose à faire ce que j'ai manqué):

(function($){ 

$.jgrid.extend({ 

    getColumnOrder : function() 
    { 
     var $grid = $(this); 

     var colModel = $grid[0].p.colModel; 

     var names = []; 
     $.each(colModel, function(i,n){ 
      var name = this.name; 
      if (name != "" && name != 'subgrid') 
       names[names.length] = name; 
     }); 

     return names; 
     //return JSON.stringify(names); 
     //$('#dbgout').val(j); 

    }, 


    setColumnOrder : function (new_order) 
    { 
     var $grid = $(this); 

     //var new_order = JSON.parse($('#dbgout').val()); 
     //new_order = ['a', 'c', 'd', 'b', 'e']; 
     //    0 1 2 3 4 

     var new_order_index = {}; 

     $.each(new_order, function(i,n){ 
      new_order_index[n] = i; 
     }); 

     //new_order = ['a', 'c', 'd', 'b', 'e']; 
     //    0 1 2 3 4 
     // new_order_index a=>0 c=>1 d=>2 b=>3 e=>4 

     var colModel = $grid[0].p.colModel; 

     cur = []; 
     $.each(colModel, function(i,n){ 
      var name = this.name; 
      if (name != "" && name != 'subgrid') 
       cur[cur.length] = name; 
     }); 
     //cur = ['a', 'b', 'c', 'd', 'e']; 
     //  0 1 2 3 4 

     cur_index = {}; 
     $.each(cur, function(i,n){ 
      cur_index[n] = i; 
     }); 


     // remapColumns: The indexes of the permutation array are the current order, the values are the new order. 

     // new_order  0=>a 1=>c 2=>d 3=>b 4=>e 
     // new_order_index a=>0 c=>1 d=>2 b=>3 e=>4 

     // cur    0=>a 1=>b 2=>c 3=>d 4=>e 
     // cur_index  a=>0 b=>1 c=>2 d=>3 e=>4 

     // permutati  0 2 3 1 4 
     //     a c d b e 
     var perm = []; 
     $.each(cur, function(i, name){ // 2=>b 

      new_item = new_order[i];  // c goes here 
      new_item_index = cur_index[new_item]; 

      perm[i] = new_item_index; 
     }); 

     if (colModel[0].name == 'subgrid' || colModel[0].name == '') 
     { 
      perm.splice(0, 0, 0); 
      $.each(perm, function(i,n){ 
       ++perm[i] 
      }); 
      perm[0] = 0; 
     } 

     $grid.jqGrid("remapColumns", perm, true, false); 

    }, 



}); 
})(jQuery); 
0

Salut Vous pouvez vous faciliter la tâche (aucune autre dépendance nécessaire) dans Pure Js pas un plugin jQuery

var prefs = { 

    data: {}, 

    load: function() { 
     var the_cookie = document.cookie.split(';'); 
     if (the_cookie[0]) { 
      this.data = JSON.parse(unescape(the_cookie[0])); 
     } 
     return this.data; 
    }, 

    save: function (expires, path) { 
     var d = expires || new Date(2020, 02, 02); 
     var p = path || '/'; 
     document.cookie = escape(JSON.stringify(this.data)) 
          + ';path=' + p 
          + ';expires=' + d.toUTCString(); 
    } 

} 

Comment utiliser?

to_save = { "size": 40, "color": "green", "products":"jeans"};//and any other data/filters you wanna store here 

prefs.data = to_save; 
prefs.save();//now our json object is saved on the client document cookie 


// delete 
var date_in_the_past = new Date(2000,02,02); 
prefs.save(date_in_the_past); 


// read 
var what = prefs.load(); 
// load populates prefs.data and also returns 
alert(what.color); 
// or ... 
alert(prefs.data.color); 

PS: Tous les navigateurs modernes prennent en charge native JSON encodage/décodage (Internet Explorer 8+, Firefox 3.1+, Safari 4+ et Chrome 3+). Fondamentalement, JSON.parse (str) read more. PSS: l'objet i utilisé il y a juste l'optimisation et la suppression de la dépendance des .toJSONstring ... source

Jetez un oeil à ces plugins jQuery

utiliser ce ne pas utiliser le funcation personnalisé ci-dessus https://github.com/carhartl/jquery-cookie

https://github.com/ScottHamper/Cookies