记住(持久化)jqGrid的filter,排序顺序和当前页面

我的应用程序用户询问包含jqGrid的页面是否可以记住网格的filter,排序顺序和当前页面(因为当他们单击网格项来执行任务然后返回到它时他们会喜欢它是“因为他们离开了它”)

Cookie似乎是前进的方向,但是如何让页面加载这些它发出第一个数据请求之前 将它们设置在网格中在这个阶段有点超出我的想法。

有没有人对jqGrid有这种经历? 谢谢!

问题解决了

我最终最终在javascript中使用cookie来存储排序列,排序顺序,页码,网格行和过滤网格细节(使用JSON / Javascript cookies – prefs对象)

保存首选项 – 从$(window).unload(function(){ ... });调用$(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(); 

加载首选项 – 从$(document).ready(function(){ ... });调用$(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参考: http : //www.secondpersonplural.ca/jqgriddocs/_2eb0fi5wo.htm

按人气需求 – filter代码

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

我正在做同样的事情,但也需要获得并保存列排序。 这并不简单,因为jqGrid.remapColumns相对于当前网格的统计数据而言……

万一有人发现这有用(我很想知道是否已经有一些事情要做,我错过了):

 (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 // acdbe 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); 

关于jqGridExportjqGridImport (参见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:import_methods )我可以实现你需要的部分工作,但在我看来你想要更多在jqGrid中开箱即用。 您必须自己实现一些其他function。

如果用户登录,则可以在这些参数更改时将AJAX请求返回给服务器。 然后,您可以将设置保存到数据库(使其永久化),会话(暂时保留它们)或两者(出于性能原因)。

在任何情况下,使用服务器端存储的参数,您可以在请求时将它们发送到页面。

嗨您可以在Pure Js中使这更容易(不需要其他依赖),而不是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(); } } 

如何使用 ?

 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:所有现代浏览器都支持原生JSON编码/解码(Internet Explorer 8 +,Firefox 3.1 +,Safari 4+和Chrome 3+)。 基本上,JSON.parse(str) 阅读更多 。 PSS:我在那里使用的对象只是优化并删除了.toJSONstring … source的依赖

看看这些jQuery插件

使用此不使用https://github.com/carhartl/jquery-cookie上面的自定义function

https://github.com/ScottHamper/Cookies