Search code examples
javascriptjavajqgridthymeleaf

jqgrid load save state data doesn't load dynamicly

I have jqgrid page with a lot of columns. Idea is to allow user choose columns and their order in table and save this order and column count in cookies. For this purposes I use $.jgrid.saveState() for saving and $.jgrid.loadState() for restoring jqgrid options from cookies. This methods works fine. But I don't want to save data to storage: only column order and filter. I tried option restoreData: false and storeData: false, but it didn't work. Here the code of my 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();
});

Here the view of table page: view before load state

After user press load state and save state it displays data which was before but not actual: data not changed after another date selecting

It just show data which was saved in localstorage. If I add storeData: false it just diplayed table with no data and doens't load new data from server. Can anyone help?

P.S In case someone will have the same problem: $("#table").jqGrid().setGridParam({datatype:'json'}).setGridParam({url : URL_DATA}).trigger("reloadGrid"); after $.jgrid.loadState("table", '', { restoreData: false}); will load new data in loaded grid.

Solution

  • I recommend you to use restoreData: false in loadState and after this command to reload the grid with trigger by example

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

    This will reload fresh grid data from server with the current setting