jqGrid is an excellent jquery plugin to display a grid. We added some filter
possibilities and with jquery updated the url where we had to fetch the
data from.
Worked nice, however, when the user selected a certain filtering or a certain page and clicked on one of the items in the list, they were navigated away from the grid. When they navigated back, the grid was at its start position, so at the first page, default sorting and filtering.
So we had to store the values selected by the user. I created two javascript functions for this (in combination with jQuery)
It reads and stores some of the information of a grid from and to a
cookie. The cookie has a lifetime of the session and is unique by page
and grid.
A html extension writes the javascript and table for the grid, so we can easily change that to include calls to those functions. We added an event to the LoadComplete of the grid.
When the page is loaded (first time or navigated back), the values
are read from the cookie. When the grid is loaded (by paging, sorting,
filtering) the loadComplete will be fired and stores the new settings of
the grid.
Worked nice, however, when the user selected a certain filtering or a certain page and clicked on one of the items in the list, they were navigated away from the grid. When they navigated back, the grid was at its start position, so at the first page, default sorting and filtering.
So we had to store the values selected by the user. I created two javascript functions for this (in combination with jQuery)
function saveGridToCookie(name, grid) { var gridInfo = new Object(); name = name + window.location.pathname; gridInfo.url = grid.jqGrid( 'getGridParam' , 'url' ); gridInfo.sortname = grid.jqGrid( 'getGridParam' , 'sortname' ); gridInfo.sortorder = grid.jqGrid( 'getGridParam' , 'sortorder' ); gridInfo.selrow = grid.jqGrid( 'getGridParam' , 'selrow' ); gridInfo.page = grid.jqGrid( 'getGridParam' , 'page' ); gridInfo.rowNum = grid.jqGrid( 'getGridParam' , 'rowNum' ); $.cookie(name, $.toJSON(gridInfo)); } function loadGridFromCookie(name) { var c = $.cookie(name + window.location.pathname); if (c == null ) return ; var gridInfo = $.parseJSON(c); var grid = jQuery( "#" + name); grid.jqGrid( 'setGridParam' , { url: gridInfo.url }); grid.jqGrid( 'setGridParam' , { sortname: gridInfo.sortname }); grid.jqGrid( 'setGridParam' , { sortorder: gridInfo.sortorder }); grid.jqGrid( 'setGridParam' , { selrow: gridInfo.selrow }); grid.jqGrid( 'setGridParam' , { page: gridInfo.page }); grid.jqGrid( 'setGridParam' , { rowNum: gridInfo.rowNum }); grid.trigger( "reloadGrid" ); } |
A html extension writes the javascript and table for the grid, so we can easily change that to include calls to those functions. We added an event to the LoadComplete of the grid.
var eventList_init = false ; jQuery( '#eventList_tb' ).jqGrid( { … other properties …, loadComplete : function () { if (eventList_init) saveGridToCookie( "eventList_tb" , jQuery( "#eventList_tb" )); } if (eventList_init == false ){ loadGridFromCookie( "eventList_tb" ); eventList_init = true ;} |
Comments
Post a Comment