Есть ли способ получить полный URL-адрес jquery jqGrid для поддержания состояния фильтров?

Я нахожу вопрос интересным. В целом ясно, что URL-адрес страницы, на которой отображается сетка, не совпадает с URL-адресом, используемым для запросов Ajax для заполнения содержимого сетки. Тем не менее, при некоторых ограничениях можно найти разумное решение проблемы.

Допустим, у нас есть 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});
          }
      }
});

Насколько мне известно, встроено, но если вы хотите, вы можете создать этот URL-адрес самостоятельно, а затем искать его при создании jqgrid, декодировать его и добавлять эти значения поиска в jqGrid.

Следующий пост может помочь вам получить доступ к этим параметрам для построения URL-адреса, а затем перестроить ссылку, которую получит другой человек.

очистить критерии поиска jqGrid