Question

如果再次打开网格或刷新页面，如何预先确定当前行？

Persisting jqGrid column preferences中的答案描述了如何保持列宽和其他一些参数。

在这个答案演示中，我点击了一行并按了F5。之前单击的行未突出显示。如何在本地存储中保存/恢复当前行？

更新

如果在应用程序中修改了jqGrid列结构，用户再次从浏览器打开应用程序， restorecolumnstate创建无效的colmodel，其中缺少某些元素。这会导致refreshSearchingToolbar中出现异常，该异常假定存在所有colmodel元素。

如何解决这个问题？在这种情况下，如何设计修改后的colmodol而不是恢复colmodel？或者应该restoreColumnState更新colModel以便创建正确的数组？

**更新2 **

如果myColumnsState.permutation包含空值$grid.jqGrid("remapColumns", myColumnsState.permutation, true)，则创建无效的colmodel。以下是在remapColumns调用之前和之后立即从VS调试器截取的屏幕截图

enter image description here

后：

after

我通过将代码修改为

来修复此问题

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

这是最佳解决方案吗？

Answer 1

我将the previous answer中关于持久化jqGrid列首选项的代码与来自another answer的代码相结合，其中我建议实现持久选择行的代码。值得一提的是，在multiselect:true的情况下，即使行位于另一页，也将使用包含所有选定的所选行的ID数组。它非常实用，实现非常简单。所以我发布了相应的feature request，但它一直没有回复。

现在我可以展示两个演示：the first demo使用multiselect: true和the second demo，它们使用相同的代码，但只有一个选择。

我使用过的代码中最重要的部分将在下面找到。

有一点非常重要：您应该在使用的每个页面中修改myColumnStateName的值。变量的值包含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(); } });

更新：我忘了提及如果jqGrid 4.3使用multiselect: true选项，使用此处描述的the fix非常重要。在第一个演示中，我使用了jquery.jqGrid.src.js的{{3}}，其中包含错误修复。

更新2 ：为了便于生成用于保存网格状态的本地存储项的唯一名称，我稍微修改了演示。下一版the modified version和the multiselect demo使用myColumnStateName作为定义如下的函数

var myColumnStateName = function (grid) { return window.location.pathname + '#' + grid[0].id; }

myColumnStateName的用法会相应更改。另外，我扩展了列状态以保存rowNum值。

更新3： the single select demo描述了如何使用新的jqGrid可能性来保存网格状态。

Answer 2

Oleg的解决方案在您刷新页面时会产生错误。

错误：未捕获的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 });
  }
...
},

如何在jqgrid中保留当前行

2 个答案: