web-dev-qa-db-ja.com

組み込みの検索/フィルターボックスを使用せずにjqGridデータをフィルター処理する方法

ユーザーが組み込みの検索ボックスを使用せずにグリッドデータをフィルタリングできるようにしたいと思います。

日付（開始と終了）の2つの入力フィールドを作成しました。次に、これをフィルターとして採用し、新しいデータを要求するようにグリッドに指示する必要があります。

グリッドデータに対するサーバーリクエストの偽造（グ​​リッドのバイパス）と、グリッドのデータを応答データに設定することは機能しません。ユーザーが結果の並べ替えやページの変更などを行うとすぐに、グリッドは新しいデータを要求するためです。空白のフィルターを使用してサーバーから。

私はこれを達成するためのグリッドAPIを見つけることができないようです-誰にもアイデアがありますか？ありがとう。

jquerysearchfilterjqgrid
58
Jimbo

関数とtrigger('reloadGrid')を含むpostDataパラメーターに関しては、問題を非常に簡単に解決できます。アイデアをもっと詳しく説明してみます。

_mtype: "GET"_を使用してみましょう。インターフェイスを表示した後に標準の検索/フィルターボックスが行う唯一のことは、URLにいくつかの追加パラメーターを追加し、サーバーに送信し、グリッドデータを再ロードすることです。検索/フィルタリング用の独自のインターフェース（一部の選択コントロールやチェックボックスなど）がある場合は、URLを自分で追加し、trigger('reloadGrid')に関してグリッドを再ロードする必要があります。グリッド内の情報をリセットするには、任意の方法を選択できます。たとえば、「フィルタリングなし」などのオプションがある選択コントロールに含めることができます。

より正確には、コードは回答のコードのように見えるはずです ドロップダウンリストを変更したときにasp.net mvcでjqgridをリロードする方法 ：

_var myGrid = jQuery("#list").jqGrid({
    url: gridDataUrl,
    postData: {
        StateId: function() { return jQuery("#StateId option:selected").val(); },
        CityId: function() { return jQuery("#CityId option:selected").val(); },
        hospname: function() { return jQuery("#HospitalName").val(); }
    }
    // ...
});
//
var myReload = function() {
    myGrid.trigger('reloadGrid');
};
var keyupHandler = function (e,refreshFunction,obj) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 33 /*page up*/|| keyCode === 34 /*page down*/||
        keyCode === 35 /*end*/|| keyCode === 36 /*home*/||
        keyCode === 38 /*up arrow*/|| keyCode === 40 /*down arrow*/) {

        if (typeof refreshFunction === "function") {
            refreshFunction(obj);
       }
    }
};

// ...
$("#StateId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});
$("#CityId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});
_

ユーザーが選択ボックスで_id=StateId_を使用して選択したオプションを変更するか、_id=CityId_を使用して別の選択ボックスを変更すると（マウスまたはキーボードを使用）、関数myReloadが呼び出されます。 jqGrid。 jqGridが行う対応する_$.ajax_リクエスト中に、postDataパラメーターの値がdataパラメーターとして_$.ajax_に転送されます。 dataのプロパティの一部が関数である場合、これらの関数は_$.ajax_によって呼び出されます。そのため、選択ボックスからの実際のデータがロードされ、すべてのデータがサーバーに送信されるデータに追加されます。サーバー部分でこのパラメーターの読み取りを実装するだけです。

したがって、postDataパラメーターからのデータがURLに追加されます（記号「？」および「＆」が自動的に追加され、ブランクなどのすべての特殊記号も通常どおりエンコードされます）。 postDataを使用する利点は次のとおりです。

  1. postDataパラメータ内の関数の使用法は、actual使用されたすべてのコントロールからリロードの瞬間までの値。
  2. コードの構造は非常に明確です。
  3. すべてがHTTP GETリクエストだけでなく、HTTP POST ;;

選択ボックスStateIdで「フィルタリングなし」または「すべて」のエントリを使用する場合、サーバーURLに追加するStateIdパラメーターの値を計算する関数を変更できます

_StateId: function() { return jQuery("#StateId option:selected").val(); }
_

次のようなものに：

_StateId: function() {
    var val = jQuery("#StateId option:selected").val();
    return val === "all"? "": val;
}
_

サーバー側では、空の値をパラメーターとして受け取った場合、StateIdのフィルタリングを行わないでください。

オプションで、myGrid.setCaption('A text');を使用してグリッドタイトルを変更できます。これにより、ユーザーはグリッド内のデータがいくつかの基準でフィルターされていることをより明確に確認できます。

78
Oleg

私は同じ要件を持っていて、（オレグの助けを借りて）これを思い付きました：

enter image description here

基本的に、ユーザーは「従業員名」テキストボックスへの入力を開始し、すぐに結果がjqGridに表示されます。

これをどのように実装したかの詳細はこちらです：

jqGrid-フィルター/検索ポップアップフォームの変更-ダイアログではなくページ上でフラットにする

特にjqGridのJSONデータのallを読み込む事前であり、大きなデータセットの場合、iPhone/Androidでこのコードを実行すると遅延が発生することに注意してください。各文字を入力するデバイス。

しかし、デスクトップWebアプリの場合、これは優れたソリューションであり、jqGridをユーザーにとってより使いやすくします。

2
Mike Gledhill

ReloadGrid()およびjquery関数を使用すると、独自のカスタムフィルタリング関数を作成できます。

0
신유진