jqGrid：在页面重新加载时恢复过滤器（工具栏）值

Question

（我确定这是一个 UFU，但我似乎找不到原因）

使用 jqGrid 显示数据。双击一行会打开一个包含向下钻取信息的新页面。单击“返回”按钮时，我想恢复过滤条件。

过滤条件存储在grid.getGridParam( "postData" ).filters 的localStorage 中。我试图在加载时恢复它，但没有取回值。

混淆因素可能是我在加载时通​​过为每列查找唯一值来创建过滤器工具栏的值（请参阅here）。这说明（对我而言）在填充下拉列表之前我无法设置过滤器值。为此，我尝试使用“loadComplete”函数（调用列表填充函数）。填充控件后，我将调用grid.jqGrid( 'setGridParam', { 'postData' : localStorage[ "filter" ]});。不幸的是，这似乎没有任何效果。

从我读过的所有内容来看，这是可行的。我错过了什么？

注意：我也尝试过this，但由于上面“loadComplete”中设置的值，我认为它不起作用。

---

编辑：过滤器值被保存在这里：

ondblClickRow: function( rowid, iRow, iCol, e )
{
    localStorage[ 'filter' ] = grid.getGridParam("postData").filters;
    window.location = "info.php?idx=" +  grid[0].p.data[ rowid - 1 ].IssueId;
}

有个值由此保存。我测试页面何时重新加载（并且还使用console.log() 观察它）

loadonce 绝对是true。

这是我使用的参数：

url: "loadIssues.php",
datatype: "json",
colNames: [  (list of values) ],
colModel: [ (array of values)  ],
pager: "#pager2",
viewrecords: true,
sortorder: "desc",
gridview: true,
autoencode: true,
ignoreCase : true,
loadonce : true,
width: 800,
height: "auto",
shrinkToFit: true,
search: true,
jsonReader: {
  repeatitems: false,
  root: "rows"
 },

---

编辑：

这是解决方法：使用 $( this ) 是我的错误。将其替换为对网格控件的引用可以解决问题。

这是我在loadComplete中使用的代码：

loadComplete: function( data )
{
    setSearchSelect( <column name> );

    if( localStorage.hasOwnProperty( 'filter' ))
    {
       postData = $( "#list2" ).jqGrid( "getGridParam", "postData" );
       paramNames = $( "#list2" ).jqGrid("getGridParam", "prmNames");

       postData.filters = JSON.parse( localStorage[ 'filter' ]);
       postData[paramNames.search] = true;

       localStorage.removeItem( 'filter' );

       setTimeout( function()
       {
           $( "#list2" ).trigger( "reloadGrid" );
       }, 100 );
   }
}

Answer 1

我在the answer 和this one 中回答了如何将首选项保存在localStorage 中并在加载网格时恢复它。

首先我要提一下，在您的代码中使用localStorage["filter"] 会产生一些冲突。每个域和子域都有自己独立的本地存储区域，但您可以在 Web 服务器的不同页面上使用不同的网格。一些页面可以有多个作为一个网格。因此，localStorage 的属性名称最好使用另一个规则，如 "filter"。我在the answer 中使用了将从window.location.pathname 和网格ID 构建的属性名称。

现在我回到你的主要问题。我看到您必须解决两个主要问题：

• 设置过滤器之前第一个请求将被发送到服务器
• 根据过滤器填充过滤器工具栏的字段

我在the answer 中描述的第二部分的可能解决方案（参见refreshSerchingToolbar 在loadComplete 内部调用的函数的代码）。我在the answer 中使用了相同的方法，我使用localStorage 来保持用户对jqGrid 的偏好。

jqGrid 中的过滤器设置可以通过不同的方式实现。在使用datatype: "json", loadonce: true 的情况下，指定您想要的行为非常重要。如果您实现了服务器端过滤，那么您可以在beforeRequest 回调中设置过滤器：

var storageName = "filters"; // or some better value

...

datatype: "json",
loadonce: true,
beforeRequest: function () {
    var $self = $(this),
        postData = $self.jqGrid("getGridParam", "postData"),
        filters = postData.filters,
        paramNames = $self.jqGrid("getGridParam", "prmNames"),
        dataType = $self.jqGrid("getGridParam", "datatype"),
        lastFilter = localStorage[storageName];

    // one can add in the below condition testing of dataType === "json" if one need to set
    // the filter on loading the data from the server only
    if ((filters === null || filters === "" || filters === undefined) && lastFilter !== undefined) {
        // current filter is not set, but it exists in localStorage
        // we need to applay it
        postData.filters = lastFilter;

        // set _search parameter to true
        postData[paramNames.search] = true;
    }

    return true;
},
loadComplete: function () {
    var filters = $(this).jqGrid("getGridParam", "postData").filters;
    if (filters !== null && filters !== "" && filters !== undefined) {
        localStorage[storageName] = filters;
    }
}

或者，您可以设置过滤器之前将像我在已经引用的答案（this one 和this one）中那样创建网格。

如果您未在服务器端实施过滤，则过滤器将自动不应用。在这种情况下，您可以关注the answer 并在从服务器加载数据后重新加载网格一次。会看到闪烁，但会应用排序和过滤器。