Recordar (persistir) el filtro, el orden de clasificación y la página actual de jqGrid

Question

Mis usuarios de aplicaciones preguntaron si era posible que las páginas que contienen un jqGrid recuerden el filtro, el orden y la página actual de la cuadrícula (porque cuando hacen clic en elemento de la cuadrícula para llevar a cabo una tarea y luego volver a ella que les gustaría que fuera "como lo dejaron")

Galletas parecen ser el camino a seguir, pero cómo llegar a la página de carga estos y configurarlos en la cuadrícula antes de hace su primera solicitud de datos es un poco más allá de mí en esta etapa.

¿Alguien tiene alguna experiencia con este tipo de cosas con jqGrid? ¡Gracias!

Answer 1

problema resuelto

que finalmente terminó usando las cookies en javascript para almacenar la columna de ordenación, el orden de clasificación, número de página, las filas de la rejilla y detalles del filtro de la red (usando JSON/Javascript cookies - el objeto prefs)

Guardar preferencias - llamó desde $(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(); 

carga Preferencias - llamó desde $(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 referencia: http://www.secondpersonplural.ca/jqgriddocs/_2eb0fi5wo.htm

por demanda popular - el código de FILTERGRID

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 el usuario inicia sesión, es posible que pueda realizar solicitudes AJAX al servidor cuando cambien estos parámetros. A continuación, puede guardar las configuraciones, ya sea en la base de datos (para hacerlas permanentes), en la sesión (para mantenerlas temporalmente) o en ambas (por razones de rendimiento).

En cualquier caso, con los parámetros almacenados en el lado del servidor, puede enviarlos a la página cuando se solicite.

Answer 3

primera parte del trabajo lo que necesita se puede implementar con respecto a jqGridExport y jqGridImport (ver http://www.trirand.com/jqgridwiki/doku.php?id=wiki:import_methods), pero parece que me quieres más que existe fuera de la caja en jqGrid. Algunas características adicionales que tendrá que implementar usted mismo.

Answer 4

yo estaba trabajando en lo mismo, pero también se necesita para obtener y guardar el orden de las columnas. No es simple ya que jqGrid.remapColumns es relativo a cualquiera que sea la estadística actual de la grilla ...

Por si acaso alguien encuentra este útil (y me gustaría saber si ya hay algo para hacer esto que me perdí):

(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

Hola Usted puede hacer esto más fácil (ninguna otra dependencia es necesario) en Pure Js no es un plugin de 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(); 
    } 

} 

cómo utilizar?

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

PD: Todos los navegadores modernos soportan nativa JSON codificación/decodificación (Internet Explorer 8+, Firefox 3.1+, Safari 4 y Chrome 3+). Básicamente, JSON.parse (str) read more. PSS: el objeto i utilizado no es sólo la optimización y la eliminación de la dependencia de .toJSONstring ... source

Echa un vistazo a estos plugins jQuery

Usar este no utilice el funcation personalizada por encima de https://github.com/carhartl/jquery-cookie

https://github.com/ScottHamper/Cookies