Den Filter, die Sortierreihenfolge und die aktuelle Seite von jqGrid merken

Question

Meine Anwendungsbenutzer fragten, ob es für Seiten, die ein jqGrid enthalten, möglich sei, den Filter, die Sortierreihenfolge und die aktuelle Seite des Rasters zu speichern (weil sie auf a klicken) Rasterelement, eine Aufgabe durchzuführen und dann zu ihm zurückgehen würden sie es gerne sein „wie sie es verlassen“)

Plätzchen den richtigen Weg zu sein scheinen, aber wie die Seite zu Last erhalten diese und setzen sie im Raster vor es macht seine erste Datenanforderung ist ein wenig über mich in diesem Stadium.

Hat jemand Erfahrung mit dieser Art von Sache mit jqGrid? Vielen Dank!

Answer 1

PROBLEM GELÖST

I endete schließlich mit Hilfe von Cookies in Javascript, um die Sortierspalte zu speichern, Sortierreihenfolge, Seitenzahl, Startreihen und Filter Details des Gitters (mit JSON/Javascript cookies - das prefs Objekt)

Einstellungen speichern - Called von $(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(); 

Lasteinstellungen - Called von $(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 Referenz: http://www.secondpersonplural.ca/jqgriddocs/_2eb0fi5wo.htm

BY POPULAR DEMAND - THE FILTERGRID CODE

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

Wenn sich der Benutzer anmeldet, können Sie möglicherweise AJAX-Anforderungen an den Server zurückgeben, wenn sich diese Parameter ändern. Sie können die Einstellungen dann entweder in der Datenbank (um sie permanent zu machen), in der Sitzung (um sie vorübergehend zu erhalten) oder in beiden (aus Leistungsgründen) speichern.

In jedem Fall, mit den Parametern serverseitig gespeichert, könnten Sie sie nur auf die Seite senden, wenn es angefordert wird.

Answer 3

ich Teil der Arbeit, was du brauchst, mit Bezug auf jqGridExport und jqGridImport (siehe http://www.trirand.com/jqgridwiki/doku.php?id=wiki:import_methods) implementieren kann, aber es scheint mir, Sie wollen mehr als in jqGrid aus dem Kasten vorhanden sind. Einige zusätzliche Funktionen müssen Sie selbst implementieren.

Answer 4

Ich wurde auf die gleiche Sache arbeiten, aber auch benötigt, um die Spaltenreihenfolge zu erhalten und zu speichern. Es ist nicht einfach, da jqGrid.remapCapums relativ zu dem aktuellen Status des Grids ist ...

Nur falls jemand findet diese hilfreich (und ich würde gerne wissen, ob es schon etwas ist, dies zu tun, die ich verpasst):

(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

Hallo Sie können diese einfacher machen (keine andere Abhängigkeit erforderlich) in Pure Js kein jQuery-Plugin

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

} 

Wie man verwendet?

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: Alle modernen Browser unterstützen nativen JSON-Codierung/Decodierung (Internet Explorer 8+, Firefox 3.1+, Safari 4+ und Chrome 3+). Grundsätzlich JSON.parse (str) read more. PSS: das Objekt i verwendet es nur Optimierung ist und die Abhängigkeit von .toJSONstring Entfernen ... source

Werfen Sie einen Blick auf diese jQuery-Plugins

Verwenden Sie diese nicht verwenden die benutzerdefinierte funcation oben https://github.com/carhartl/jquery-cookie

https://github.com/ScottHamper/Cookies