如何在jqgrid中保存当前行
如果网格重新打开或页面刷新，如何预设当前行？
回答持久jqGrid列首选项描述如何保持列宽和一些其他参数。
在这个答案演示中，我点击了一些行，并按下F5。 先前单击的行未突出显示。 如何保存/恢复本地存储中的当前行？
更新
如果在应用程序中修改了jqGrid列结构，并且用户再次从浏览器中打开应用程序，restorecolumnstate会在缺less一些元素的情况下创build无效的colmodel。 这会导致refreshSearchingToolbar中的exception，它假定所有的colmodel元素都存在。
如何解决这个问题？ 在这种情况下如何检测改性colmodol，而不是恢复colmodel？ 还是应该restoreColumnState更新colModel，以便创build正确的数组？
**更新2 **
如果myColumnsState.permutation包含空值$grid.jqGrid("remapColumns", myColumnsState.permutation, true)创build无效的colmodel。 以下是在调用remapColumns之前和之后的VSdebugging器的截图
后：
我通过chaning代码来解决这个问题
if (isColState && myColumnsState.permutation.length > 0) { var i, isnull = false; for (i = 0; i < myColumnsState.permutation.length; i = i + 1) { if (myColumnsState.permutation[i] == null) { isnull = true; break; } } if (!isnull) { $grid.jqGrid("remapColumns", myColumnsState.permutation, true); }
这是最好的解决scheme？
我将前面关于持久化jqGrid列首选项的答案中的代码与来自另一个答案的代码结合在一起，我提出了实现持续select行的代码。 有一点很重要，那就是在multiselect:true情况下multiselect:true将使用所选行的id数组，这些行包含所有选中的行， 即使这些行位于另一个页面上 。 这是非常实用的，实现非常简单。 所以我发布了相应的function请求 ，但是直到现在还没有答案。
现在我可以演示两个演示： 第一个演示使用multiselect: true和第二个使用相同代码的演示 ，但使用单个select。
我使用的代码中最重要的部分将在下面find。
有一点非常重要， 您应该修改每个使用的页面中myColumnStateName的值 。 variables的值包含localStorage列状态的名称。 所以你不会改变名字，你会分享不同表格的状态，可以跟随到很奇怪的效果。 您可以考虑使用从当前页面的名称或其URL作为myColumnStateName的值构造的名称。
var $grid = $("#list"), getColumnIndex = function (grid, columnIndex) { var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length; for (i = 0; i < l; i++) { if ((cm[i].index || cm[i].name) === columnIndex) { return i; // return the colModel index } } return -1; }, refreshSerchingToolbar = function ($grid, myDefaultSearch) { var postData = $grid.jqGrid('getGridParam', 'postData'), filters, i, l, rules, rule, iCol, cm = $grid.jqGrid('getGridParam', 'colModel'), cmi, control, tagName; for (i = 0, l = cm.length; i < l; i++) { control = $("#gs_" + $.jgrid.jqID(cm[i].name)); if (control.length > 0) { tagName = control[0].tagName.toUpperCase(); if (tagName === "SELECT") { // && cmi.stype === "select" control.find("option[value='']") .attr('selected', 'selected'); } else if (tagName === "INPUT") { control.val(''); } } } if (typeof (postData.filters) === "string" && typeof ($grid[0].ftoolbar) === "boolean" && $grid[0].ftoolbar) { filters = $.parseJSON(postData.filters); if (filters && filters.groupOp === "AND" && typeof (filters.groups) === "undefined") { // only in case of advance searching without grouping we import filters in the // searching toolbar rules = filters.rules; for (i = 0, l = rules.length; i < l; i++) { rule = rules[i]; iCol = getColumnIndex($grid, rule.field); if (iCol >= 0) { cmi = cm[iCol]; control = $("#gs_" + $.jgrid.jqID(cmi.name)); if (control.length > 0 && (((typeof (cmi.searchoptions) === "undefined" || typeof (cmi.searchoptions.sopt) === "undefined") && rule.op === myDefaultSearch) || (typeof (cmi.searchoptions) === "object" && $.isArray(cmi.searchoptions.sopt) && cmi.searchoptions.sopt.length > 0 && cmi.searchoptions.sopt[0] === rule.op))) { tagName = control[0].tagName.toUpperCase(); if (tagName === "SELECT") { // && cmi.stype === "select" control.find("option[value='" + $.jgrid.jqID(rule.data) + "']") .attr('selected', 'selected'); } else if (tagName === "INPUT") { control.val(rule.data); } } } } } } }, saveObjectInLocalStorage = function (storageItemName, object) { if (typeof window.localStorage !== 'undefined') { window.localStorage.setItem(storageItemName, JSON.stringify(object)); } }, removeObjectFromLocalStorage = function (storageItemName) { if (typeof window.localStorage !== 'undefined') { window.localStorage.removeItem(storageItemName); } }, getObjectFromLocalStorage = function (storageItemName) { if (typeof window.localStorage !== 'undefined') { return JSON.parse(window.localStorage.getItem(storageItemName)); } }, myColumnStateName = 'ColumnChooserAndLocalStorage2.colState', idsOfSelectedRows = [], saveColumnState = function (perm) { var colModel = this.jqGrid('getGridParam', 'colModel'), i, l = colModel.length, colItem, cmName, postData = this.jqGrid('getGridParam', 'postData'), columnsState = { search: this.jqGrid('getGridParam', 'search'), page: this.jqGrid('getGridParam', 'page'), sortname: this.jqGrid('getGridParam', 'sortname'), sortorder: this.jqGrid('getGridParam', 'sortorder'), permutation: perm, selectedRows: idsOfSelectedRows, colStates: {} }, colStates = columnsState.colStates; if (typeof (postData.filters) !== 'undefined') { columnsState.filters = postData.filters; } for (i = 0; i < l; i++) { colItem = colModel[i]; cmName = colItem.name; if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') { colStates[cmName] = { width: colItem.width, hidden: colItem.hidden }; } } saveObjectInLocalStorage(myColumnStateName, columnsState); }, myColumnsState, isColState, restoreColumnState = function (colModel) { var colItem, i, l = colModel.length, colStates, cmName, columnsState = getObjectFromLocalStorage(myColumnStateName); if (columnsState) { colStates = columnsState.colStates; for (i = 0; i < l; i++) { colItem = colModel[i]; cmName = colItem.name; if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') { colModel[i] = $.extend(true, {}, colModel[i], colStates[cmName]); } } } return columnsState; }, updateIdsOfSelectedRows = function (id, isSelected) { var index = idsOfSelectedRows.indexOf(id); if (!isSelected && index >= 0) { idsOfSelectedRows.splice(index, 1); // remove id from the list } else if (index < 0) { idsOfSelectedRows.push(id); } }, firstLoad = true; myColumnsState = restoreColumnState(cm); isColState = typeof (myColumnsState) !== 'undefined' && myColumnsState !== null; idsOfSelectedRows = isColState && typeof (myColumnsState.selectedRows) !== "undefined" ? myColumnsState.selectedRows : []; $grid.jqGrid({ // ... some options page: isColState ? myColumnsState.page : 1, search: isColState ? myColumnsState.search : false, postData: isColState ? { filters: myColumnsState.filters } : {}, sortname: isColState ? myColumnsState.sortname : 'invdate', sortorder: isColState ? myColumnsState.sortorder : 'desc', onSelectRow: function (id, isSelected) { updateIdsOfSelectedRows(id, isSelected); saveColumnState.call($grid, $grid[0].p.remapColumns); }, onSelectAll: function (aRowids, isSelected) { var i, count, id; for (i = 0, count = aRowids.length; i < count; i++) { id = aRowids[i]; updateIdsOfSelectedRows(id, isSelected); } saveColumnState.call($grid, $grid[0].p.remapColumns); }, loadComplete: function () { var $this = $(this), i, count; if (firstLoad) { firstLoad = false; if (isColState) { $this.jqGrid("remapColumns", myColumnsState.permutation, true); } if (typeof (this.ftoolbar) !== "boolean" || !this.ftoolbar) { // create toolbar if needed $this.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch}); } } refreshSerchingToolbar($this, myDefaultSearch); for (i = 0, count = idsOfSelectedRows.length; i < count; i++) { $this.jqGrid('setSelection', idsOfSelectedRows[i], false); } saveColumnState.call($this, this.p.remapColumns); }, resizeStop: function () { saveColumnState.call($grid, $grid[0].p.remapColumns); } }); $grid.jqGrid('navGrid', '#pager', {edit: false, add: false, del: false}); $grid.jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-closethick", title: "clear saved grid's settings", onClickButton: function () { removeObjectFromLocalStorage(myColumnStateName); window.location.reload(); } });
更新 ：我忘了提及，在使用multiselect multiselect: true jqGrid 4.3的multiselect: true选项的情况下，使用这里描述的修复是非常重要的。 在第一个演示中，我使用了包含bug修复的jquery.jqGrid.src.js 的修改版本 。
更新2 ：为了方便生成用于保存网格状态的本地存储项目的唯一名称，我修改了一些演示。 下一个版本的multiselect演示和单个select演示使用myColumnStateName作为定义如下的函数
var myColumnStateName = function (grid) { return window.location.pathname + '#' + grid[0].id; }
myColumnStateName的用法相应地改变。 另外我扩展了列状态来保存rowNum值。
更新3： 答案描述了如何使用免费的jqGrid的新的可能性来保存网格状态。
当你像下面那样刷新页面时，Oleg的解决scheme会产生一个错误。
错误：Uncaught TypeError：无法读取未定义的属性“el”
行：1936年在jquery.jqGrid.src.js
var previousSelectedTh = ts.grid.headers[ts.p.lastsort].el, newSelectedTh = ts.grid.headers[idxcol].el;
解决方法是保存lastsort网格参数，并在下载完成时重置它。
saveColumnState = function(perm) { ... columnsState = { search: this.jqGrid('getGridParam', 'search'), page: this.jqGrid('getGridParam', 'page'), sortname: this.jqGrid('getGridParam', 'sortname'), sortorder: this.jqGrid('getGridParam', 'sortorder'), lastsort: this.jqGrid('getGridParam', 'lastsort'), permutation: perm, colStates: { } }, ... }, loadComplete: function(data) { ... if (isColState) { $this.jqGrid("remapColumns", myColumnsState.permutation, true); if(myColumnsState.lastsort > -1) $this.jqGrid("setGridParam", { lastsort: myColumnsState.lastsort }); } ... },
