Mémoriser (persister) le filtre, l'ordre de tri et la page courante de jqGrid

Question

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é »)

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!

Answer 1

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

Answer 2

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é.

Answer 3

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.

Answer 4

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

Answer 5

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