jquery - 有没有办法获取 jquery jqGrid 的 "full"URL 来维护过滤器的状态？

Question

我正在使用jqGrid我已经使用了 advanced column search dialog对多列进行过滤。我现在想将此 URL“发送”给其他人，以便他们可以准确看到我所看到的内容。问题是，由于这一切都使用ajax，因此URL不包含过滤规则。

有没有办法让我有一个“永久链接”链接来生成当前的 jqGrid URL，包括所有高级过滤器，这样当我在另一个人的浏览器上输入它时，它将包括这些过滤器集？

Answer 1

我觉得这个问题很有趣。一般来说，很明显，显示网格的页面的 URL 与用于填充网格内容的 Ajax 请求的 URL 不同。尽管如此，在一定的限制下，我们还是可以提供一种合理的解决方案。

让我们有一个不使用和参数的 HTML 页面，或者至少不使用具有某些特定名称的参数，例如 filters。我们可以使用页面的 URL 选项将其转发到 postData.filters。创建过滤器的用户可以将过滤器添加到 URL。如果用户将 URL 发送给某人，则打开 URL 将显示过滤网格。

人们可以提出该方法的多种实现方式。实现取决于过滤是在客户端还是在服务器上进行。使用 loadonce: true 从服务器加载数据并在客户端进行过滤是我发现最困难的特殊情况。所以我准备了一个可以在案例中使用的小演示

The demo从服务器加载数据并使用 loadonce: true 选项。它显示最初未过滤的网格

如果用户设置了一些过滤器，例如下面的

然后网格填充显示一个过滤后的行:

然后用户可以单击导航栏中的自定义按钮

它将filters选项附加到当前URL。结果the new URL将包含

?filters=%7B"groupOp"%3A"AND"%2C"rules"%3A%5B%7B"field"%3A"Name"%2C"op"%3A"cn"%2C"data"%3A"1"%7D%5D%7D

部分。

演示代码只是一个实现示例。您可以根据您的要求进行修改。我在演示中使用的代码如下:

// parse URL and get filters option if it exists
var urlOptions = window.location.href.split("?"), urlParams, filters, i, params;
if (urlOptions.length === 2) {
    urlParams = urlOptions[1].split("&");
    for (i=0; i<urlParams.length; i++) {
        params = urlParams[i].split("=");
        if (params.length === 2 && params[0] === "filters") {
            filters = decodeURIComponent(params[1]);
        }
    }
}

$.extend($.jgrid.search, {multipleSearch: true, multipleGroup: true});

$("#list").jqGrid({
    ... // some non-important options
    datatype: "json",
    loadonce: true,
    beforeRequest: function () {
        var $self = $(this), postData = $self.jqGrid("getGridParam", "postData");
        if (filters && !postData.filters) {
            // use filters from the URL if no other filter specified
            postData.filters = filters;
            $self.jqGrid("setGridParam", {search: true});
        }
    },
    loadComplete: function () {
        // disable custom button if no filter set
        var $self = $(this), postData = $self.jqGrid("getGridParam", "postData");
        if (postData.filters && filters !== postData.filters) {
            $("#addFilterToUrl").prop("disabled", false).removeClass("ui-state-disabled");
        } else {
            $("#addFilterToUrl").prop("disabled", true).addClass("ui-state-disabled");
        }

        if ($self.jqGrid("getGridParam", "loadonce") && $self.jqGrid("getGridParam", "datatype") !== "local") {
            setTimeout(function() {
                $self.trigger("reloadGrid");
            }, 100);
        }
    }
}).jqGrid("navGrid", "#pager")
  .jqGrid("navButtonAdd", "#pager", {
      caption: "",
      title: "add filter to the current URL",
      id: "addFilterToUrl",
      buttonicon: "ui-icon-comment",
      onClickButton: function () {
          // append filter to the current URL
          var postData = $(this).jqGrid("getGridParam", "postData");
          if (postData.filters) {
              window.location.href = window.location.href.split("?")[0] + "?" +
                  $.param({filters: postData.filters});
          }
      }
});