free-jqgrid:更简单的方法来保存，加载和应用过滤器数据，包括过滤器工具栏文本和页面设置? [英] free-jqgrid: easier way to save, load and apply filter data including filter-toolbar text and page-settings?

问题描述

我使用free-jqGrid 4.13和loadonce: true;

有一个相当标准的jqGrid

我想做的是几次遇到的事情:
我想保存网格状态(没有数据)；
这表示设置(例如当前页数)将过滤应用的用户以及过滤工具栏中的文本.
然后将这些数据加载并应用到网格.

jqGrid是一个功能强大的工具，但是要完成这样的工作似乎很痛苦.

经过几个小时的工作，我想出了一个复杂的解决方案.它正在工作，但是恕我直言，这不是一个很好的解决方案:

1)保存jqGrid过滤器数据(本地):

// in this example i am using the "window unload" event,
// because i want the filters to be saved once you leave the page:

$(window).on("unload", function(){

    // i have to access the colModel in order to get the names of my columns
    // which i need to get the values of the filter-toolbar textboxes later:
    var col_arr = $("#list").jqGrid("getGridParam", "colModel");

    // my own array to save the toolbar data:
    var toolbar_search_array = [];
    for(var i = 0, max = col_arr.length; i < max; i++)
    {
        // only saving the data when colModel's "search" is set to true
        // and value of the filterToolbar textbox  got a length
        // the ID of the filterToolbar text-input is "gs_" + colModel.name
        if(col_arr[i].search && $("#gs_" + col_arr[i].name).val().length)
        {
             toolbar_search_array.push({ name: col_arr[i].name, value: $("#gs_" + col_arr[i].name).val() });
        }
    }

    // putting everything into one object
    var pref = {
        // 1. toolbar filter data - used to fill out the text-inputs accordingly
        toolbar :   toolbar_search_array,

        // 2. postData - contains data for the actual filtering 
        post :      $("#list").jqGrid("getGridParam", "postData"),

        // 3. settings - this data is also included in postData - but doesn't get applied 
        // when using 'setGridParam'
        sortname:   $('#list').jqGrid('getGridParam', 'sortname'),
        sortorder:  $('#list').jqGrid('getGridParam', 'sortorder'),
        page:       $('#list').jqGrid('getGridParam', 'page'),
        rowNum:     $('#list').jqGrid('getGridParam', 'rowNum')

    };

    //saving in localStorage
    localStorage.setItem("list",  JSON.stringify( pref ));
});

2)加载和应用jqGrid过滤器数据:

用于文档准备就绪的封包，例如

var localsave = JSON.parse(localStorage.getItem("list"));

// these settings are also saved in postData, 
// but they don't get applied to the grid when setting the postData:
$('#list').jqGrid('setGridParam', {
    sortname: localsave.sortname,
    sortorder: localsave.sortorder,
    page: localsave.page,
    rowNum: localsave.rowNum
});

// this applies the filtering itself and reloads the grid. 
// it's important that you don't forget the "search : true" part:
$("#list").jqGrid("setGridParam", { 
    search : true,
    postData : localsave.post
}).trigger("reloadGrid");

// this is loading the text into the filterToolbar 
// from the array of objects i created:
console.log(localsave.toolbar);
for(i = 0, max = localsave.toolbar.length; i < max; i++)
{
    $("#gs_" + localsave.toolbar[i].name).val( localsave.toolbar[i].value );
}

对于我来说，postData包含所有必要的数据似乎很奇怪，但是无法应用这些数据；至少据我所知.

我的问题:

应用所有过滤数据和分页数据是否真的很不方便，还是我遗漏了什么?
为什么这不能这么简单:

// saving:
var my_save = $("#list").jqGrid("getGridParam", "postData");

// loading:
$("#list").jqGrid("setGridParam", { 
    search : true,
    postData : my_save
}).trigger("reloadGrid");

?

感谢您的帮助和/或建议！

解决方案

答案与

2) loading and applying jqGrid filter-data:

for use in a document-ready closure, for example

var localsave = JSON.parse(localStorage.getItem("list"));

// these settings are also saved in postData, 
// but they don't get applied to the grid when setting the postData:
$('#list').jqGrid('setGridParam', {
    sortname: localsave.sortname,
    sortorder: localsave.sortorder,
    page: localsave.page,
    rowNum: localsave.rowNum
});

// this applies the filtering itself and reloads the grid. 
// it's important that you don't forget the "search : true" part:
$("#list").jqGrid("setGridParam", { 
    search : true,
    postData : localsave.post
}).trigger("reloadGrid");

// this is loading the text into the filterToolbar 
// from the array of objects i created:
console.log(localsave.toolbar);
for(i = 0, max = localsave.toolbar.length; i < max; i++)
{
    $("#gs_" + localsave.toolbar[i].name).val( localsave.toolbar[i].value );
}

it seems strange to me that postData contains all the data necessary but it's impossible to apply this data; at least as far as i know.

my question(s):

is it really this inconvenient to apply all the filter- and paging-data or am i missing something?
why can't this be as simple as:

// saving:
var my_save = $("#list").jqGrid("getGridParam", "postData");

// loading:
$("#list").jqGrid("setGridParam", { 
    search : true,
    postData : my_save
}).trigger("reloadGrid");

?

thank you for any help and/or suggestions!

解决方案

The answer with the demo provides an example of the implementation. The method refreshSerchingToolbar is relatively long. On the other side the code is still not full. It's not restore the state of operands, if the option searchOperators: true is used. I wanted to rewrite many parts of the filterToolbar method to make easier the saving/restoring of the the state of the filter toolbar or refreshing based on the changed postData. It's just the problem of the time and nothing more. What you describe is close to the feature forceClientSorting: true, which was difficult to implement in original code of jqGrid 4.7, but it was easy to implement after I rewrote large part of processing of the server response. The same problem is with the code of filterToolbar. The changes of filterToolbar is still in my TODO list and I'll made the corresponding changes soon.

这篇关于free-jqgrid:更简单的方法来保存，加载和应用过滤器数据，包括过滤器工具栏文本和页面设置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！