1

我想从 cookie 中加载 jQgrid 数据（即排序的列、排序顺序、页面），以便当用户再次重新打开页面时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 支持beforeRequest应该完成工作的事件，但您可能需要删除reloadGrid调用，因为这可能导致网格被加载两次。

此外，如果您想以编程方式重新排序网格，最好使用该sortGrid方法，因为这将在列标题上正确设置排序插入符，并且如果最终参数设置为 true，还会调用网格重新加载。

例如

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