jqgrid 加载保存状态数据不会动态加载

Question

我有很多列的 jqgrid 页面。想法是允许用户在表格中选择列及其顺序，并将此顺序和列数保存在 cookie 中。为此，我使用 $.jgrid.saveState() 进行保存，使用 $.jgrid.loadState() 从 cookie 中恢复 jqgrid 选项。这种方法效果很好。但我不想将数据保存到存储中：只有列顺序和过滤器。我尝试了选项 restoreData: false 和 storeData: false，但它不起作用。 这里是我的 jqgrid 的代码：

jQuery(function ($) {
var table = $("#table");
var pager = "#pager";
var search_panel = "#search";
var localization = globalLocale;
var colNames = [ "Mobile direction total time (sec)", "Mobile direction q-ty  ", "Mobile time Percent",
    "City direction total time (sec)", "City  direction q-ty", 'City time Percent'   ];
var exportToCsvBut = "Export to excell";

resizeToFitPageSize(table);
resizeOnSidebar(table);

$(function () {
    var d = new Date();
    var month = d.getMonth();
    var day = d.getDate();
    var year = d.getFullYear();
    var defCurDate = moment().startOf('day').format('DD.MM.YYYY HH:mm:ss');
    var defNextDate = moment().endOf('day').format('DD.MM.YYYY HH:mm:ss');
    var from = $('#datetimepickerFrom');
    var to = $('#datetimepickerTo');
    if (from.val() === "" || to.val() === "") {
        from.val(defCurDate);
        to.val(defNextDate);
    }
    $("#datetimepickerFrom").datetimepicker({
        dateFormat: 'dd.mm.yy',
        timeFormat: 'HH:mm:ss',
        defaultDate: new Date(year, month, day + 1, 00, 00),
        onClose: function () {
            beforeRefresh();
        }
    });
    $("#datetimepickerTo").datetimepicker({
        dateFormat: 'dd.mm.yy',
        timeFormat: 'HH:mm:ss',
        defaultDate: new Date(year, month, day + 1, 00, 00),
        onClose: function () {
            beforeRefresh();
        }
    });


    defCurDate = $('#datetimepickerFrom').val();
    defNextDate = $('#datetimepickerTo').val();
});


var initDate = function (elem) {
    $(elem).datetimepicker({
        dateFormat: 'd.m.Y H:i:s',
        showButtonPanel: true
    });
};

var template = {width: 160, fixed: true, align: 'center', editable: false, stype: 'text'};


var colModel = [

    {
        name: 'mobileDirectionTotalTime',
        index: 'mobileDirectionTotalTime',
        sortname: 'mobileDirectionTotalTime',
        template: template,
        formatter: nullFormatter,
        sorttype: 'number'
    },
    {
        name: 'mobileDirectionQty',
        index: 'mobileDirectionQty',
        sortname: 'mobileDirectionQty',
        template: template,
        formatter: nullFormatter,
        sorttype: 'number'
    },
    {
        name: 'mobileDirectionPercent',
        index: 'mobileDirectionPercent',
        sortname: 'mobileDirectionPercent',
        width: 120,
        fixed: true, align: 'center', editable: false,
        template: "number",
        sorttype: 'number'
    },
    {
        name: 'cityDirectionTotalTime',
        edittype: "custom",
        sortname: 'cityDirectionTotalTime',
        formatter: null,
        sorttype: 'number'

    },
    {
        name: 'cityDirectionQty',
        index: 'cityDirectionQty',
        sortname: 'cityDirectionQty',
        template: template,
        sorttype: 'number'
    },
    {
        name: 'cityDirectionTimePercent',
        index: 'cityDirectionTimePercent',
        sortname: 'cityDirectionTimePercent',
        template: template,
        sorttype: 'number'
    },

];

table.jqGrid({
    url: URL_DATA,
    datatype: "json",
    jsonReader: {
        repeatitems: true
    },
    height: 'auto',
    colNames: colNames,
    colModel: colModel,
    shrinkToFit: false,
    forceFit: true,
    pager: pager,
    toppager: true,
    rowNum: 10,
    rowList: [5, 10, 15, 20, 25, 30],
    loadonce: true,
    viewrecords: true,
    storeNavOptions : true,
    //    navOptions: {reloadGridOptions: {fromServer: true}},
    loadComplete: function () {
        var table = this;
        setTimeout(function () {
            updatePagerIcons(table);
            enableTooltips(table);
        }, 0);
    },
    gridComplete: function () {
        /*var idarray = table.jqGrid('getDataIDs');
        if (idarray.length > 0) {
            var firstid = table.jqGrid('getDataIDs')[0];
            table.setSelection(firstid);
        }*/
    }
});

$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size


function beforeRefresh() {
    var from = $('#datetimepickerFrom');
    var to = $('#datetimepickerTo');
    if (from.val() != null && from.val() != '' && to.val() != null && to.val() != '') {
        resetFilter('table', 'globalSearchText');
        table.jqGrid().setGridParam({datatype: 'json'}).setGridParam({url: URL_DATA + "?from=" + from.val() + "&to=" + to.val()}).trigger("reloadGrid")
        if (from.val() === "" || to.val() === "") {
            from.val(defCurDate);
            to.val(defNextDate);
        }
    }

}

//navButtons
table.jqGrid('navGrid', pager,
    {   //navbar options
        cloneToTop: true,
        edit: false,
        add: false,
        del: false,
        search: true,
        searchicon: 'ace-icon fa fa-search orange',

        refresh: true,
        beforeRefresh: function () {
            var from = $('#datetimepickerFrom');
            var to = $('#datetimepickerTo');
            if (from.val() != null && from.val() != '' && to.val() != null && to.val() != '') {
                resetFilter('table', 'globalSearchText');
                table.jqGrid().setGridParam({datatype: 'json'}).setGridParam({url: URL_DATA + "?from=" + from.val() + "&to=" + to.val()}).trigger("reloadGrid")
                if (from.val() === "" || to.val() === "") {
                    from.val(defCurDate);
                    to.val(defNextDate);
                }
            }
        },
        refreshicon: 'ace-icon fa fa fa-refresh green',
        view: true,
        viewicon: 'ace-icon fa fa-search-plus grey'
    }, {}, {}, {},
    {
        multipleSearch: true,
        searchOnEnter: true,
        closeOnEscape: true,
        multipleSearch: true,
        closeAfterSearch: true
    },
    {
        //view record form
        recreateForm: true,
        beforeShowForm: function (e) {
            var form = $(e[0]);
            form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
            form.closest('div.ui-jqdialog').center();
        }
    }
);

addToolButton({
    caption: "",
    buttonicon: "ace-icon fa fa-calculator blue",
    title: "Выбрать столбцы",
    onClickButton: function () {

        $(this).jqGrid('columnChooser',
            {
                width: 550,
                msel_opts: {dividerLocation: 0.5}, modal: true
            });
        $("#colchooser_" + $.jgrid.jqID(this.id) + ' div.available>div.actions')
            .prepend('<label style="float:left;position:relative;margin-left:0.6em;top:0.6em">Поиск:</label>');
    }
}, table, pager);


addSearchField('table', 'globalSearchText');
$(window).triggerHandler('resize.jqGrid');
table.triggerHandler("jqGridAfterGridComplete");
destroyGrid(table);



    $('#table')
        .append($("<div style='margin-top: 10px'>" +
            "<button id='savestate'>save state</button>" +"<button id='loadstate'>load state</button>" +
            "</div>"));


    $("#savestate").click(function(){
        $.jgrid.saveState("table");
    });
    $("#loadstate").click(function(){
        $.jgrid.loadState("table", {}, {});
    })
});

document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});

这里是表格页面的视图：

用户按下加载状态并保存状态后，它会显示之前但不是实际的数据：

它只显示保存在本地存储中的数据。 如果我添加 storeData: false 它只是显示没有数据的表并且不会从服务器加载新数据。 有人可以帮忙吗？

P.S 如果有人遇到同样的问题： $("#table").jqGrid().setGridParam({datatype:'json'}).setGridParam({url : URL_DATA}).trigger("reloadGrid"); $.jgrid.loadState("table", '', { restoreData: false});将在加载的网格中加载新数据。

Answer 1

我建议您在 loadState 中使用 restoreData: false 并在此命令之后通过示例触发重新加载网格

$("#loadstate").click(function(){
   $.jgrid.loadState("table", '', { restoreData: false});
   $("#table").trigger("reloadGrid");
});

这将使用当前设置从服务器重新加载新的网格数据