Запомните (сохраните) фильтр, порядок сортировки и текущую страницу jqGrid
Пользователи моего приложения спросили, возможно ли для страниц, которые содержат jqGrid, запомнить фильтр, порядок сортировки и текущую страницу сетки (потому что, когда они щелкают элемент сетки для выполнения задачи, а затем возвращаются к ней, они хотели бы это будет "как они это оставили")
Печенье, кажется, путь вперед, но как заставить страницу загрузить их и установить их в сетке, прежде чем он сделает свой первый запрос данных, на данном этапе немного не по мне.
У кого-нибудь есть опыт работы с такого рода вещами с jqGrid? Спасибо!
5 ответов
ЗАДАЧА РЕШЕНА
В конечном итоге я использовал куки в javascript для хранения столбца сортировки, порядка сортировки, номера страницы, строк сетки и деталей фильтра сетки (используя куки JSON/Javascript - prefs объект)
Сохранить настройки - Вызывается из $(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(){ ... });
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
ПОПУЛЯРНЫМ ТРЕБОВАНИЕМ - КОД ФИЛЬТРОГРИДА
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
// 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);
Я часть работы, что вам нужно, вы можете реализовать в отношении jqGridExport а также jqGridImport (см. http://www.trirand.com/jqgridwiki/doku.php?id=wiki:import_methods), но мне кажется, что вы хотите большего, чем есть, из коробки в jqGrid. Некоторые дополнительные функции вам придется реализовать самостоятельно.
Если пользователь войдет в систему, вы сможете отправлять запросы 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