it-swarm.com.de

Denken Sie an den Filter, die Sortierreihenfolge und die aktuelle Seite von jqGrid

Meine Anwendungsbenutzer haben gefragt, ob Seiten, die ein jqGrid enthalten, sich an den Filter, die Sortierreihenfolge und die aktuelle Seite des Rasters erinnern können (weil sie auf ein Rasterelement klicken, um eine Aufgabe auszuführen, und dann zurückkehren, wenn sie möchten es sei "wie sie es verlassen haben")

Cookies scheint der richtige Weg zu sein, aber wie man die Seite auf laden Sie diese und gesetzt im Raster vorher bekommt, wird sie zuerst angezeigt Die Datenabfrage liegt zu diesem Zeitpunkt etwas außerhalb meiner.

Hat jemand Erfahrung mit jqGrid? Vielen Dank!

27
Jimbo

PROBLEM Gelöst

Ich habe schließlich Cookies in Javascript verwendet, um die Sortierspalte, Sortierreihenfolge, Seitennummer, Rasterzeilen und Filterdetails des Rasters zu speichern (mithilfe von JSON/Javascript Cookies - dem prefs-Objekt)

Einstellungen speichern - Von $(window).unload(function(){ ... }); aufgerufen

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();

Preferences laden - Von $(document).ready(function(){ ... }); aufgerufen

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();

jqGrid-Referenz: http://www.secondpersonplural.ca/jqgriddocs/_2eb0fi5wo.htm

NACH BELIEBIGER NACHFRAGE - DER FILTERGRID-CODE

    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

Ich arbeitete an der gleichen Sache, musste aber auch die Spaltenreihenfolge abrufen und speichern. Es ist nicht einfach, da jqGrid.remapColumns relativ zu dem aktuellen Stand des Gitters ist ...

Nur für den Fall, dass jemand dies hilfreich findet (und ich würde gerne wissen, ob es bereits etwas gibt, was ich vermisst habe):

(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

Ich mache einen Teil der Arbeit, die Sie benötigen, können Sie in Bezug auf jqGridExport und jqGridImport implementieren (siehe http://www.trirand.com/jqgridwiki/doku.php?id=wiki:import_methods ), aber es scheint mir Sie möchten mehr als aus der Box in JqGrid existieren. Einige zusätzliche Funktionen müssen Sie selbst implementieren.

2
Oleg

Wenn sich der Benutzer anmeldet, können Sie möglicherweise AJAX -Anforderungen an den Server senden, wenn sich diese Parameter ändern. Sie können die Einstellungen dann entweder in der Datenbank (um sie dauerhaft zu machen), in der Sitzung (um sie temporär zu speichern) oder in beiden (aus Leistungsgründen) speichern.

In jedem Fall können Sie die Parameter auf der Serverseite speichern, wenn Sie sie an die Seite senden, wenn Sie dazu aufgefordert werden.

1
Justin Ethier

Hallo, du kannst das einfacher machen (keine andere Abhängigkeit). In Pure Js ist kein jQuery-Plugin

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();
    }

}

Wie benutzt man ?

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: Alle modernen Browser unterstützen native JSON-Codierung Decodierung (Internet Explorer 8+, Firefox 3.1+, Safari 4+ und Chrome 3+). Grundsätzlich ist JSON.parse (str)/- read more . PSS: das dort verwendete Objekt ist nur die Optimierung und das Entfernen der Abhängigkeit von .toJSONstring ... source

Schauen Sie sich diese jQuery-Plugins an

VERWENDEN Sie dies nicht mit der benutzerdefinierten Funktion über https://github.com/carhartl/jquery-cookie

https://github.com/ScottHamper/Cookies

0
ucefkh