web-dev-qa-db-fra.com

Rappelez-vous (persistez) le filtre, l'ordre de tri et la page actuelle de jqGrid

Les utilisateurs de mon application ont demandé s'il était possible pour les pages contenant un jqGrid de se souvenir du filtre, de l'ordre de tri et de la page actuelle de la grille (car, lorsqu'ils cliquent sur un élément de la grille pour exécuter une tâche, puis y reviennent, il le souhaite. ce soit "comme ils l'ont laissé")

Les cookies semblent être la voie à suivre, mais comment obtenir la page sur les charger et les configurer dans la grille avant fait sa première demande de données est un peu au-delà de moi à ce stade.

Quelqu'un at-il une expérience avec ce genre de chose avec jqGrid? Merci!

jquerycookiespersistencejqgridfiltering
27
Jimbo

PROBLÈME RÉSOLU

J'ai finalement fini par utiliser des cookies en javascript pour stocker la colonne de tri, l'ordre de tri, le numéro de page, les lignes de grille et les détails de filtrage de la grille (à l'aide de cookies JSON/Javascript - l'objet prefs

Enregistrer les préférences - Appelé depuis $(window).unload(function(){ ... });

var filters = {
    fromDate: $('#fromDateFilter').val(),
    toDate: $('#toDateFilter').val(),
    customer: $('#customerFilter').val()
};

prefs.data = {
    filter: filters,
    scol: $('#list').jqGrid('getGridParam', 'sortname'),
    sord: $('#list').jqGrid('getGridParam', 'sortorder'),
    page: $('#list').jqGrid('getGridParam', 'page'),
    rows: $('#list').jqGrid('getGridParam', 'rowNum')
};

prefs.save();

Préférences de chargement - Appelé depuis $(document).ready(function(){ ... });

var gridprefs = prefs.load();

$('#fromDateFilter').val(gridprefs.filter.fromDate);
$('#toDateFilter').val(gridprefs.filter.toDate);
$('#customerFilter').val(gridprefs.filter.customer);

$('#list').jqGrid('setGridParam', {
    sortname: gridprefs.scol,
    sortorder: gridprefs.sord,
    page: gridprefs.page,
    rowNum: gridprefs.rows
});

// filterGrid method loads the jqGrid postdata with search criteria and re-requests its data
filterGrid();

référence jqGrid: http://www.secondpersonplural.ca/jqgriddocs/_2eb0fi5wo.htm

PAR DEMANDE POPULAIRE - LE CODE FILTERGRID 

    function filterGrid() {
        var fields = "";
        var dateFrom = $('#dateFrom').val();
        var dateTo = $('#dateTo').val();

        if (dateFrom != "") fields += (fields.length == 0 ? "" : ",") + createField("shipmentDate", "ge", dateFrom);
        if (dateTo != "") fields += (fields.length == 0 ? "" : ",") + createField("shipmentDate", "le", dateTo);

        var filters = '"{\"groupOp\":\"AND\",\"rules\":[' + fields + ']}"';

        if (fields.length == 0) {
            $("#list").jqGrid('setGridParam', { search: false, postData: { "filters": ""} }).trigger("reloadGrid");
        } else {
            $("#list").jqGrid('setGridParam', { search: true, postData: { "filters": filters} }).trigger("reloadGrid");
        }

    }

    function createField(name, op, data) {
        var field = '{\"field\":\"' + name + '\",\"op\":\"' + op + '\",\"data\":\"' + data + '\"}';
        return field;
    }
27
Jimbo

Je travaillais sur la même chose, mais j'avais également besoin de récupérer et de sauvegarder le classement des colonnes. Ce n'est pas simple, car jqGrid.remapColumns est relatif à l'état actuel de la grille de la grille ...

Juste au cas où quelqu'un trouverait cela utile (et j'aimerais savoir s'il y a déjà quelque chose à faire qui me manque):

(function($){

$.jgrid.extend({

    getColumnOrder : function ()
    {
        var $grid = $(this);

        var colModel = $grid[0].p.colModel;

        var names = [];
        $.each(colModel, function(i,n){
            var name = this.name;
            if (name != "" && name != 'subgrid')
                names[names.length] = name;
        });

        return names;
        //return JSON.stringify(names);
        //$('#dbgout').val(j);

    },


    setColumnOrder : function (new_order)
    {
        var $grid = $(this);

        //var new_order = JSON.parse($('#dbgout').val());
        //new_order = ['a', 'c', 'd', 'b', 'e'];
        //              0    1    2    3    4

        var new_order_index = {};

        $.each(new_order, function(i,n){
            new_order_index[n] = i;
        });

        //new_order = ['a', 'c', 'd', 'b', 'e'];
        //              0    1    2    3    4
        // new_order_index a=>0 c=>1 d=>2 b=>3 e=>4

        var colModel = $grid[0].p.colModel;

        cur = [];
        $.each(colModel, function(i,n){
            var name = this.name;
            if (name != "" && name != 'subgrid')
                cur[cur.length] = name;
        });
        //cur = ['a', 'b', 'c', 'd', 'e'];
        //        0    1    2    3    4

        cur_index = {};
        $.each(cur, function(i,n){
            cur_index[n] = i;
        });


        // remapColumns: The indexes of the permutation array are the current order, the values are the new order.

        // new_order       0=>a 1=>c 2=>d 3=>b 4=>e
        // new_order_index a=>0 c=>1 d=>2 b=>3 e=>4

        // cur             0=>a 1=>b 2=>c 3=>d 4=>e
        // cur_index       a=>0 b=>1 c=>2 d=>3 e=>4

        // permutati       0    2    3    1    4
        //                 a    c    d    b    e
        var perm = [];
        $.each(cur, function(i, name){   // 2=>b

            new_item = new_order[i];     // c goes here
            new_item_index = cur_index[new_item];

            perm[i] = new_item_index;
        });

        if (colModel[0].name == 'subgrid' || colModel[0].name == '')
        {
            perm.splice(0, 0, 0);
            $.each(perm, function(i,n){
                ++perm[i]
            });
            perm[0] = 0;
        }

        $grid.jqGrid("remapColumns", perm, true, false);

    },



});
})(jQuery);
3
dlewicki

Je fais partie de ce que vous avez besoin de mettre en œuvre en respectant jqGridExport et jqGridImport (voir http://www.trirand.com/jqgridwiki/doku.php?id=wiki:import_methods ), mais cela me semble vous voulez plus, car jqGrid existe déjà. Quelques fonctionnalités supplémentaires que vous devrez implémenter vous-même.

2
Oleg

Si l'utilisateur se connecte, vous pourrez peut-être envoyer des demandes AJAX au serveur lorsque ces paramètres seront modifiés. Vous pouvez ensuite enregistrer les paramètres dans la base de données (pour les rendre permanentes), dans la session (pour les conserver temporairement) ou les deux (pour des raisons de performances).

Dans tous les cas, avec les paramètres stockés côté serveur, vous pouvez simplement les envoyer à la page lorsque celle-ci est demandée.

1
Justin Ethier

Bonjour, Vous pouvez rendre cela plus facile (aucune autre dépendance nécessaire) dans Pure Js et non dans un plugin jQuery

var prefs = {

    data: {},

    load: function () {
        var the_cookie = document.cookie.split(';');
        if (the_cookie[0]) {
            this.data = JSON.parse(unescape(the_cookie[0]));
        }
        return this.data;
    },

    save: function (expires, path) {
        var d = expires || new Date(2020, 02, 02);
        var p = path || '/';
        document.cookie = escape( JSON.stringify(this.data) )
                          + ';path=' + p
                          + ';expires=' + d.toUTCString();
    }

}

Comment utiliser ?

to_save = { "size": 40, "color": "green", "products":"jeans"};//and any other data/filters you wanna store here

prefs.data = to_save;
prefs.save();//now our json object is saved on the client document cookie


// delete
var date_in_the_past = new Date(2000,02,02);
prefs.save(date_in_the_past);


// read
var what = prefs.load();
// load populates prefs.data and also returns
alert(what.color);
// or ...
alert(prefs.data.color);

PS: tous les navigateurs modernes prennent en charge le codage/décodage JSON natif (Internet Explorer 8+, Firefox 3.1+, Safari 4+ et Chrome 3+). Fondamentalement, JSON.parse (str) en savoir plus . PSS: l’objet utilisé n’est qu’optimisation et suppression de la dépendance de .toJSONstring ... source

Jetez un coup d'oeil à ces plugins jQuery

N'utilisez pas la fonction personnalisée ci-dessus https://github.com/carhartl/jquery-cookie

https://github.com/ScottHamper/Cookies

0
ucefkh