3

我正在使用jqGrid，并且我使用了高级列搜索对话框来过滤多个列。我现在想将此 URL “发送”给另一个人，以便他们可以准确地看到我看到的内容。问题是，由于这都是使用 ajax，所以 URL 不包含过滤规则。

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

4

2 回答 2

2

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

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

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

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

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

它将filters选项附加到当前 URL。结果，新的 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});
          }
      }
});
于 2013-03-23T15:30:56.627 回答
0

据我所知，不是内置的，但是如果您愿意，可以自己构建该 url，然后在构建 jqgrid 时查找它并对其进行解码并将这些搜索值添加到 jqGrid。

以下帖子可能会帮助您了解如何访问这些参数以构建 url，然后在其他人将获得的链接中进行重建。

jqGrid 清除搜索条件

于 2013-03-23T02:39:08.270 回答