1

jQgridデータ(つまり、ソートされた列、ソート順、ページ)をCookieからロードして、ユーザーが再度ページを再度開いたときにjQgridがCookieから変更を取得できるようにします。コードはcokkieから変更を取得する必要があります:

function loadGridFromCookie(name) 
    {
        var c = $.cookie(name /*+ window.location.pathname*/);
        if (c == null)
            return;
        gridInfo = $.parseJSON(c);
        var grid = $("#" + name);
        grid.jqGrid('setGridParam', { sortname: gridInfo.sortname });
        grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder });
        grid.jqGrid('setGridParam', { page: gridInfo.page });
        grid.trigger("reloadGrid");
    }

私のコード全体:

<script type="text/javascript">
    function getData(jqGridParams) 
    {
        var params = new Object();
        params.pageIndex = jqGridParams.page;
        params.pageSize = jqGridParams.rows;
        params.sortIndex = jqGridParams.sidx;
        params.sortDirection = jqGridParams.sord;
        params._search = jqGridParams._search;
        if (jqGridParams.filters === undefined)
            params.filters = null;
        else
            params.filters = jqGridParams.filters;

        // AJAX call
        $.ajax({
            url: 'WSAjax.asmx/GetDataForGrid',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(params),
            success: function (data, textStatus) 
            {
                if (textStatus == "success") 
                {
                    var grid = $("#ItemGrid")[0];
                    grid.addJSONData(data.d);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) 
            {
                alert(textStatus, errorThrown);
            }
        });
    }

    function saveGridToCookie(name, grid)     // save data into cookie
    {
        var gridInfo = new Object();
        //name += window.location.pathname;
        gridInfo.sortname = grid.jqGrid('getGridParam', 'sortname');
        gridInfo.sortorder = grid.jqGrid('getGridParam', 'sortorder');
        gridInfo.page = grid.jqGrid('getGridParam', 'page');
        //$('#Hidden').val(JSON.stringify(gridInfo));
        //alert($('#Hidden').val());
        $.cookie(name, JSON.stringify(gridInfo), {expires: 3});
    }

    function loadGridFromCookie(name)  // load data from cookie
    {
        var c = $.cookie(name /*+ window.location.pathname*/);
        if (c == null)
            return;
        var gridInfo = $.parseJSON(c);
        var grid = $("#" + name);
        grid.jqGrid('setGridParam', { sortname: gridInfo.sortname });
        grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder });
        grid.jqGrid('setGridParam', { page: gridInfo.page });
        grid.trigger("reloadGrid");
    }

    // Jquery code
    $(document).ready(function () {
        var oItemGrid = $("#ItemGrid");
        oItemGrid.jqGrid({
            datatype: 
                function (jqGridParams) {
                getData(jqGridParams);
                },
            colNames: ['Type', 'Name', 'Desc'],
            colModel: [
                { name: 'Type', index: 'Type', width: 40 },
                { name: 'Name', index: 'Name', width: 40 },
                { name: 'Desc', index: 'Desc', width: 40, sortable: false}],
            autowidth: true,
            height: 'auto',
            rowNum: 10,
            rowList: [10, 20, 30, 40],
            viewrecords: true,
            gridview: true,
            autoencode: true,
            ignoreCase: true,
            caption: 'Remember Sorting and Filtering Functionality',
            pager: '#IGPager',
            loadComplete: function(data) 
            {
                var cookieval = $.cookie("ItemGrid");
                if (cookieval != null) 
                {
                    alert("From loadComplete: " + cookieval);
                    loadGridFromCookie("ItemGrid");
                }
            },
            gridComplete: function () {
                var prvData = $.cookie("ItemGrid");
                alert("stored Data from cookie : " + prvData);
                loadGridFromCookie("ItemGrid", gridInfo);
                saveGridToCookie("ItemGrid", $("#ItemGrid"));
                var storeval = $.cookie("ItemGrid");
                alert("From gridComplete: " + storeval);
            }
            //loadonce: true
        }).jqGrid('navGrid', '#IGPager', { edit: false, add: false, del: false }, {}, {}, {}, {}, {});
    });
</script>
4

1 に答える 1

2

最初のグリッド宣言の前にこれらのオプションを取得し、グリッド イベント中に実行しようとするのではなく、グリッド宣言中にこれらのオプションを設定できる必要があります。

質問の最初の情報に基づいて、次のようにリファクタリングすることをお勧めloadGridFromCookieします。

function loadGridFromCookie(name) 
{
    var c = $.cookie(name /*+ window.location.pathname*/);
    if (c == null)
        return null;
    return $.parseJSON(c);
}

次に、結果を使用して、ドキュメント準備ハンドラーでグリッドを初期化します。

var oItemGrid = $("#ItemGrid");
var gridSettings = loadGridFromCookie("ItemGrid");
oItemGrid.jqGrid({
    sortname: gridInfo ? gridInfo.sortname : "Type",
    sortorder: gridInfo ? gridInfo.sortorder : "ASC",
    page: gridInfo ? gridInfo.page : 1,
    ...
});

これが不可能な場合、jqGrid はジョブを実行するイベントをサポートしますが、グリッドが 2 回読み込まれる可能性があるため、呼び出しbeforeRequestを削除する必要がある場合があります。reloadGrid

さらに、プログラムでグリッドを再ソートする場合は、sortGridメソッドを使用することをお勧めします。これにより、列ヘッダーにソートキャレットが正しく設定され、最後のパラメーターが true に設定されている場合はグリッドのリロードも呼び出されます。

例えば

grid.jqGrid('setGridParam', { sortorder: gridInfo.sortorder, page: gridInfo.page })
    .jqGrid('sortGrid', gridInfo.sortname, true);
于 2013-08-07T13:11:25.943 に答える