Question

我正在使用jqGrid，我使用advanced column search dialog来过滤多个列。我现在想要将此网址“发送”给其他人，以便他们可以看到完全我看到的内容。问题是，由于这都是使用ajax，因此URL不包含过滤规则。

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

Answer 1

我觉得这个问题很有意思。通常，很明显显示网格的页面的URL与用于填充网格内容的Ajax请求的URL不同。然而，在某种限制下，人们可以提供合理的解决方案。

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

可以提出该方法的许多实现方式。实现取决于过滤是在客户端还是在服务器上进行过滤。使用loadonce: true加载来自服务器的数据并在客户端上进行过滤是我遇到的特殊情况。所以我准备了一个小案例

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

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

它将filters选项附加到当前网址。结果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});
          }
      }
});

Answer 2

根据我的知识构建，但如果您想要自己构建该URL，然后在构建jqgrid时对其进行解码并对其进行解码并将这些搜索值添加到jqGrid中。

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

jqGrid clear search criteria

有没有办法获得jquery jqGrid的“完整”URL来维护过滤器的状态？

2 个答案: