4

データの読み込みが完了した直後に、JqGridにクライアント側のフィルタリング（および並べ替え）を実行させようとしています。検索フィールドを正しく設定できますが、TriggerToolbar（）を呼び出しても効果がないようです。

$("#list").GridUnload();
        var mygrid = $("#list").jqGrid({
            url: '@Url.Action("GetSearchCriteriaWithNoComponents", "SearchCriteria")',
            postData: { BookingSiteId: function () { return $("#BookingSiteId option:selected").val(); }, MethodId: function () { return $("#MethodId option:selected").val(); } },
            datatype: 'json',
            mtype: 'Post',
            colNames: ['Id', 'PID', 'Ori', 'Dest', 'Conn', 'Pos', 'Method', 'Billing', 'Filter', 'Pattern', 'Class', 'Wildcard', 'Components', 'Comment'],
            colModel: [
          { name: 'Id', index: 'Id', width: 30, hidden: true },
          { name: 'PID', index: 'PID', width: 35 },
          { name: 'Ori', index: 'Ori', width: 35 },
          { name: 'Dest', index: 'Dest', width: 35 },
          { name: 'Conn', index: 'Conn', width: 35 },
          { name: 'Pos', index: 'Pos', width: 35 },
          { name: 'Method', index: 'Method', width: 50 },
          { name: 'Billing', index: 'Billing', width: 45, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
          { name: 'Filter', index: 'Filter', width: 90, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
          { name: 'Pattern', index: 'Pattern', width: 100, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
          { name: 'Class', index: 'Class', width: 40 },
          { name: 'Wildcard', index: 'Wildcard', width: 50 },
          { name: 'Components', index: 'Components', width: 80, search: true, stype: 'text', searchoptions: { sopt: ['cn']} },
          { name: 'Comment', index: 'Comment', width: 75, search: true, stype: 'text', searchoptions: { sopt: ['cn']} }
          ],
            pager: '#pager',
            rowNum: 25,
            rowTotal: 1000,
            rowList: [25, 50, 100],
            sortname: 'Origin',
            sortorder: "asc",
            viewrecords: true,
            loadonce: true,
            multiselect: true,
            ignoreCase: true,
            gridview: true,
            height: "100%",
            caption: 'Subscribed Search Criteria without Components'
        }).jqGrid('navGrid', '#pager', { add: false, edit: false, del: false, search: false, refresh: false }
         ).jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-search", onClickButton: function () { mygrid[0].toggleToolbar() }, position: "first", title: "Toggle Search Toolbar", cursor: "pointer" })
          .jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-refresh", onClickButton: function () { mygrid[0].clearToolbar() }, title: "Clear Search Toolbar", cursor: "pointer" }
        );

        $("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });

        if(firstrun = true)
        {
            $("#gs_PID").val('AA');
            mygrid[0].triggerToolbar();
            firstrun = false;
        }
        else
        {
            mygrid[0].toggleToolbar(); //hide the toolbar by default
        }

一般的な考え方は、固定値にビューモデルからの何かが入力されるというものです。

また、gridUnload（）とその後のリロードを実行するときに、フィルターと並べ替えの選択を保存および復元するオプションも必要ですが、一度に1つのハードルがあります。@ Url.Actionなどの@prefixesが付いているものは、ページがブラウザに送信される前に処理されるRazorマークアップです。

4

1 に答える 1

6

datatype: 'json'と組み合わせて使用​​しloadonce: trueます。したがって、イベントハンドルmygrid[0].triggerToolbar()の内部を呼び出す必要があります。loadCompleteデータがロードされた後でのみ、データをフィルタリングする必要があります。おそらく、メソッドtriggerToolbar内にコードを配置して、がに変更された後setTimeout、すでにフィルタリングを開始する必要があります。したがって、イベントハンドルのコードは次のようになります。datatype'local'loadonce: trueloadComplete

loadComplete: function () {
    var gridDOM = this; // save $("#list")[0] in a variable
    if ($(this).jqGrid('getGridParam', 'datatype') === 'json') {
        // the first load from the server
        setTimeout(function () {
            $("#gs_PID").val('AA');
            gridDOM.triggerToolbar();
        }, 100);
    }
}

さらに、投稿したコードフラグメントをどのように使用するのか、なぜgridUnloadメソッドを使用する必要があるのか​​を完全には理解していません。

更新： jqGridの 無料のjqGridフォークは、データの最初のページを表示する前に、サーバーから返されたデータの並べ替えとオプションのフィルタリングforceClientSorting: trueを強制するオプションをサポートします。上記のコードは不要になります。その代わりに使用を設定することができますpostData.filters

forceClientSorting: true,
search: true,
postData: {
    filters: {
        groupOp: "AND",
        rules: [
            { op: "le", field: "PID", data: "AA" }
        ]
    }
}

デモを参照してください。

于 2011-10-07T14:58:16.230 に答える