web-dev-qa-db-ja.com

jqGrid：POST行データをフェッチするためのサーバーへのデータ（フィルタリングおよび検索）

私はこのようなフォームを持っています：

<form id='myForm'>
<input type='text' name='search' />
<input type='text' name='maxPrice' />
</form>

そして私のjqGridのテーブル：

<table id='myGrid'></table>

POST（GETではない）行データをフェッチしてグリッドに入力するために、myFormからサーバーメソッドにデータを送信する必要があります。これまでのところ、 jqGridをPOST何かに取得できます。データのシリアル化を再確認したところ、フォームデータが適切にシリアル化されています。jqGridコードは次のとおりです。

$("#myGrid").jqGrid({
    url: '/Products/Search") %>',
    postData: $("#myForm").serialize(),
    datatype: "json",
    mtype: 'POST',
    colNames: ['Product Name', 'Price', 'Weight'],
    colModel: [
        { name: 'ProductName', index: 'ProductName', width: 100, align: 'left' },
        { name: 'Price', index: 'Price', width: 50, align: 'left' },
        { name: 'Weight', index: 'Weight', width: 50, align: 'left' }
    ],
    rowNum: 20,
    rowList: [10, 20, 30],
    imgpath: gridimgpath,
    height: 'auto',
    width: '700',
    //pager: $('#pager'),
    sortname: 'ProductName',
    viewrecords: true,
    sortorder: "desc",
    caption: "Products",
    ajaxGridOptions: { contentType: "application/json" },
    headertitles: true,
    sortable: true,
    jsonReader: {
        repeatitems: false,
        root: function(obj) { return obj.Items; },
        page: function(obj) { return obj.CurrentPage; },
        total: function(obj) { return obj.TotalPages; },
        records: function(obj) { return obj.ItemCount; },
        id: "ProductId"
    }
});

私が間違っていることを確認できますか、別の方法で実行する必要がありますか？

jqueryjqgrid
20
Byron Sommardahl

主なエラーは、次の形式のpostDataパラメータの使用です。

_postData: $("#myForm").serialize()
_

この使用法には2つの問題があります。

  1. 値$("#myForm").serialize()は、追加のパラメーターを追加する代わりに、POST要求のすべてのパラメーターを上書きします。
  2. 値$("#myForm").serialize()は、グリッドの初期化時に1回だけ計算されます。したがって、常に_search=""_および_maxPrice=""_をサーバーに送信します。

フォームを名前付き編集フィールドに置き換えることをお勧めします

_<fieldset>
<input type='text' id='search' />
<input type='text' id='maxPrice' />
<button type='button' id='startSearch'>Search</button>
</fieldset>
_

メソッドを持つオブジェクトとしてpostDataパラメータを定義します。

_postData: {
    search: function() { return $("#search").val(); },
    maxPrice: function() { return $("#maxPrice").val(); },
},
_

onclickイベントハンドラーを[検索]ボタンに追加します（上記のHTMLフラグメントを参照）

_$("#startSearch").click(function() {
    $("#myGrid").trigger("reloadGrid");
});
_

さらに、使用するサーバーテクノロジーについては何も記述しません。サーバー側でパラメーターを読み取ることができるようにするには、追加の変更が必要になる場合があります（たとえば、serializeRowData: function (data) {return JSON.stringify(data);}this および this を参照）。私はまた別の古い回答を読むことをお勧めします： 組み込みの検索/フィルターボックスを使用せずにjqGridデータをフィルターする方法 。

'/ Products/Search'の代わりに_'/Products/Search") %>'_のような他のいくつかの小さなエラーや廃止されたパラメーターimgpath（ documentation を参照）の使用はそれほど重要ではありません。 _align: 'left'_のようなデフォルトの列オプションは削除する必要があります。

グリッドでの検索の使用も検討してください。例 高度な検索

_$("#myGrid").jqGrid('navGrid','#pager',
                    {add:false,edit:false,del:false,search:true,refresh:true},
                    {},{},{},{multipleSearch:true});
_

また ツールバー検索 ：

_$("#myGrid").jqGrid('filterToolbar',
                    {stringResult:true,searchOnEnter:true,defaultSearch:"cn"});
_

それはおそらくあなたが使用する検索フォームを置き換えることができます。

42
Oleg