3

私はjqGridを使用しており、高度な列検索ダイアログを使用して複数の列をフィルタリングしました。このURLを別の人に「送信」して、自分が見ているものを正確に見られるようにします。問題は、これはすべてajaxを使用しているため、URLにフィルタールールが含まれていないことです。

すべてのアドバンスフィルターを含む現在のjqGridURLを生成する「パーマリンク」リンクを作成して、他の人のブラウザーに入力すると、それらのフィルターセットが含まれるようにする方法はありますか？

4

2 に答える 2

2

その質問は面白いと思います。一般に、グリッドを表示するページのURLは、グリッドコンテンツを埋めるためのAjaxリクエストに使用されるURLと同じではないことは明らかです。それにもかかわらず、いくつかの制限の下で、問題の合理的な解決策を提供することができます。

パラメータを使用しない、または少なくとも、などの特定の名前のパラメータを使用しないHTMLページがあるとしますfilters。ページのURLオプションを使用して、ページをに転送できますpostData.filters。フィルタを作成したユーザーがURLにフィルタを追加できるようにします。ユーザーが誰かにURLを送信する場合、URLを開くとフィルターされたグリッドが表示されます。

アプローチの多くの実装方法を提案することができます。実装は、フィルタリングがクライアント側で行われるかサーバーで行われるかによって、原因によって異なります。サーバーからのデータのロードとクライアントでのフィルタリングでの使用法はloadonce: true、私が最も難しいと思う特殊なケースです。そこで、このケースで機能する小さなデモを用意しました

デモはサーバーからデータをロードし、loadonce: trueオプションを使用します。最初はフィルタリングされていないグリッドが表示されます

ここに画像の説明を入力してください

ユーザーがフィルターを設定した場合、たとえば次のフィルター

ここに画像の説明を入力してください

次に、グリッド塗りつぶしは1つのフィルターされた行を表示します。

ここに画像の説明を入力してください

次に、ユーザーはナビゲーターバーのカスタムボタンをクリックできます

ここに画像の説明を入力してください

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 に答える