2

以下では、jqGridをコピーして、無関係な属性などを削除しましたが、以下の基本コードは、私の質問をカプセル化するのに十分です。

ajax呼び出しが正常に返されると入力される動的フィルターがあります。返されるjsonは、他の値の中でも特にドロップダウンの文字列値(uniqueRunDates)を保持します。文字列(uniqueRunDates)は、「setColProp」を使用して列に動的に追加されます。jgGridが完了すると、関数の次のコード行がグリッドのリロードを呼び出し、新しいフィルターが実行されます。

このフィルターは、静的('JobStatus'など)フィルターと同じように機能しますが、1つの例外があります。検索しています。

グリッドには、交換可能に使用できる3つの検索(テキストボックスと2つのドロップダウン[1つはuniqueRunDates])があります。ユーザーがテキストボックスに何かを入力すると、グリッドが正しく更新され、戻り値のjsonに新しい一意の日付が含まれるので、「setColProp」を使用してそれらを追加します。その最後の部分は「reloadGrid」を呼び出す必要があります。問題はどうやってそれをするかです???

最初の回避では、グリッドの作成後のコードが実行されます。検索が実行されると、このjgGridコードだけが実行されます。もちろん、成功の呼び出しに「reloadGrid」を入れることはできません。ループが発生するからです。ツールバーの「afterSearch」プロパティを使用しようとしましたが、必要なときに起動していないようです。

私はこの問題について正しい方法で進んでいますか?この一見一般的な概念を処理する簡単な方法はありますか?動的検索フィルター?あなたが提供できるどんな助けやガイダンスにも感謝します。

 $("#gridTable").jqGrid({
    async: false,
    datatype: function (jqGridModel) {
        $.ajax({
            async: false,
            url: 'Application.aspx/getJqGridData',
            data: JSON.stringify({ 'rptPath': rptPath, 'jqGridModel': jqGridModel, 'userId': userId }),
            success: function (data, textStatus, jqXHR) {
                populateGrid(data);
                var uniqueRunDates = (JSON.parse(data)).uniqueDates;

                $("#gridTable").jqGrid('setColProp', 'Run_Date', {
                    stype: 'select',
                    searchoptions: { value: uniqueRunDates, sopt: ['dateEq'] }
                });
            }                
        });
    },
    colNames: ['', 'Report Name', 'Run Status', 'Run Date', 'Expiring On', 'Category', 'Actions'],
    colModel: [
       { name: 'Run_Date', index: 'RunDate', align: 'center', title: false, sortable: true, width: 40 }
       { name: 'Report_Name', index: 'ReportNameDisplay', align: 'left', title: false, sortable: true, formatter: reportLinkFormatter },
       { name: 'Run_Status', index: 'JobStatus', align: 'left', title: false, sortable: true, width: 50,
            stype: 'select',
            searchoptions: { value: ':All Status;Completed:Completed;Failed:Failed;Pending:Pending;No Data Returned:No Data Returned;:Returned' }
        },
    ],
    pager: jQuery('#gridPager'),
    rowNum: 15,
    rowList: [15, 25, 35, 50],
    sortname: 'RunDate',
    sortorder: "desc",
    height: '100%',
    multiselect: true
    }
});

//Refresh necessary for the dynamically added 'run date' filter.
$("#gridTable").trigger("reloadGrid");

$('#gridTable').jqGrid('filterToolbar', {
    stringResult: true
});

。。。。。

更新 以下の提案に従うようにグリッドを更新しました。

サーバーにクエリを実行して、JSONオブジェクトの文字列バージョンを返すことができます。'beforeProcessing'メソッドで戻り値を確認することもでき、問題ないようです。ただし、グリッドは表示されなくなります。jsonReaderがリターンフォーマットで正しく設定されているかどうかはわかりません。data.d = {"total":2、 "page":1、 "records":25、 "rows":[{"id": "23"、 "cell":["0"、 "xxx"、 "xxx"、...]} ....]

タイプが並んでいないものだと思います…アイデア?

$("#gridTable").jqGrid({
    async: false,
    url: 'Application.aspx/getJqGridData',
    ajaxGridOptions: { contentType: "application/json" },
    serializeGridData: function (postData) {
        if (postData.filters == undefined) postData.filters = null;
        postData.jqGridModel = { page: postData.page, _search: postData._search, rows: postData.rows,
            sidx: postData.sidx, sord: postData.sord, filters: postData.filters
        };
        postData.rptPath = rptPath;
        postData.userId = userId;
        return JSON.stringify(postData);
    },
    contentType: 'application/json; charset=utf-8',
    datatype: "json",
    mtype: 'POST',
    beforeProcessing: function (data) {    
    },
    colNames: ['', 'Report Name', 'Run Status', 'Run Date', 'Expiring On', 'Category', 'Actions'],
    colModel: [
        { name: 'Is_Fav', index: 'Favorites', align: 'center', title: false, sortable: false, search: false, width: 5, formatter: favImageFormatter },
        { name: 'Report_Name', index: 'ReportNameDisplay', align: 'left', title: false, sortable: true, formatter: reportLinkFormatter },
        { name: 'Run_Status', index: 'JobStatus', align: 'left', title: false, sortable: true, width: 50,
            stype: 'select',
            searchoptions: { value: ':All Status;Completed:Completed;Failed:Failed;Pending:Pending;No Data Returned:No Data Returned;:Returned' }
        },
        { name: 'Run_Date', index: 'RunDate', align: 'center', title: false, sortable: true, width: 40,
            selectOptions: {
                dataUrl: 'Application.aspx/getJqGridData',
                buildSelect: function (data) {
                    var gData;
                    if (data.hasOwnProperty('d')) gData = data.d;
                    else gData = data;

                    var uniqueRunDates = (JSON.parse(gData)).uniqueDates;

                    var html = '<select>', length = gData.length, i = 0, item;
                    for (; i < length; i++) {
                        item = d[i];
                        html += '<option value=' + item + '>' + item + '</option>';
                    }
                    html += '</select>';
                    return html
                }
            }
        },
        { name: 'Expiring_On', index: 'ExpirationDate', align: 'center', title: false, sortable: true, width: 40, search: false },
        { name: 'Category', index: 'Category', align: 'left', title: false, sortable: true, width: 80 },
        { name: 'Actions', index: '', align: 'left', title: false, sortable: false, width: 25, search: false, formatter: actionsFormatter }
    ],
    pager: jQuery('#gridPager'),
    rowNum: 15,
    rowList: [15, 25, 35, 50],
    sortname: 'RunDate',
    sortorder: "desc",
    height: '100%',
    viewrecords: true,
    sortable: true,
    jsonReader: {
        root: "d.rows",
        page: "d.page",
        total: "d.total",
        records: "d.records"            
    },
    forceFit: true,
    multiselect: true,
    loadError: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
    },
    gridComplete: function () {
        doGridComplete(rptPath);
    },
    beforeSelectRow: function (rowid, event) {
        // Only allow row selection if the chekbox in the row is clicked
        var index = $.jgrid.getCellIndex(event.target);
        if (index == 0) {
            return true;
        }
        return false;
    },
    subGrid: true,
    subGridRowExpanded: function (subgrid_id, row_id) {
        getReportDetails(subgrid_id, row_id, rptPath);
    }
});

$('#gridTable').jqGrid('filterToolbar', {
    stringResult: true
});
4

1 に答える 1

2

私はあなたが何を必要としているかを正しく理解しているのかわかりません。

valueのプロパティを設定する代わりに、Ajaxが選択オプションを入力するように要求するプロパティをsearchoptions使用できます。ここここで、を実装するのに役立ついくつかのコード例を見つけることができます。dataUrldataUrl

さらに、自分で電話をかけるためだけに関数として使用しないでください。jqGridには、options、callbackなどの多くのオプションがあります。回答とダウンロードしてテストできるドームプロジェクトが含まれている回答を読むことをお勧めします。datatypejQuery.ajaxajaxGridOptionsjsonReaderserializeRowData

標準のjqGridメカニズムを使用していて、グリッド上のデータにいくつかの変更を加える必要がある場合(jqGridオプションの設定など)、beforeProcessingコールバックを使用できます。コールバックを使用すると、jqGridがサーバーから返されたデータを処理する前に、または任意のjqGridオプションbeforeProcessingを変更できます。colModel

于 2012-11-01T23:40:24.883 に答える