wake-up-neo.com

So filtern Sie die jqGrid-Daten NICHT mit dem integrierten Such-/Filterfeld

Ich möchte, dass Benutzer Rasterdaten filtern können, ohne das intrinsische Suchfeld zu verwenden.

Ich habe zwei Eingabefelder für Datum (von und bis) erstellt und muss nun dem Raster mitteilen, es als seinen Filter zu übernehmen und dann neue Daten anzufordern.

Eine Serveranforderung für Netzdaten (unter Umgehung des Gitters) wird gefälscht und die Daten des Gitters werden als Antwortdaten festgelegt. Dies funktioniert nicht, da der Benutzer, sobald der Benutzer versucht, die Ergebnisse neu anzuordnen oder die Seite usw. zu ändern, neue Daten anfordert vom Server mit einem leeren Filter.

Ich kann keine Raster-API finden, um dies zu erreichen - hat jemand irgendwelche Ideen? Vielen Dank.

57
Jimbo

Ihr Problem kann in Bezug auf postData-Parameter einschließlich Funktionen und trigger('reloadGrid') sehr einfach gelöst werden. Ich versuche die Idee genauer zu erklären.

Lassen Sie uns mtype: "GET" verwenden. Das Standard-Such-/Filterfeld macht nach dem Anzeigen der Schnittstelle nur das Anhängen einiger zusätzlicher Parameter an die URL, das Senden an den Server und das erneute Laden der Rasterdaten. Wenn Sie über eine eigene Schnittstelle zum Suchen/Filtern verfügen (z. B. einige Auswahlsteuerelemente oder Kontrollkästchen), sollten Sie Ihre URL einfach selbst anhängen und das Raster in Bezug auf trigger('reloadGrid') neu laden. Zum Zurücksetzen der Informationen im Raster können Sie die von Ihnen bevorzugte Methode auswählen. Sie können zum Beispiel in die Auswahlsteuerelemente aufnehmen, für die Sie eine Option wie "keine Filterung" haben.

Um genauer zu sein, sollte Ihr Code aussehen wie der Code aus der Antwort wie man jqgrid in asp.net mvc lädt, wenn ich die Dropdownliste ändere :

var myGrid = jQuery("#list").jqGrid({
    url: gridDataUrl,
    postData: {
        StateId: function() { return jQuery("#StateId option:selected").val(); },
        CityId: function() { return jQuery("#CityId option:selected").val(); },
        hospname: function() { return jQuery("#HospitalName").val(); }
    }
    // ...
});
//
var myReload = function() {
    myGrid.trigger('reloadGrid');
};
var keyupHandler = function (e,refreshFunction,obj) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 33 /*page up*/|| keyCode === 34 /*page down*/||
        keyCode === 35 /*end*/|| keyCode === 36 /*home*/||
        keyCode === 38 /*up arrow*/|| keyCode === 40 /*down arrow*/) {

        if (typeof refreshFunction === "function") {
            refreshFunction(obj);
       }
    }
};

// ...
$("#StateId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});
$("#CityId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});

Wenn der Benutzer die ausgewählte Option im Auswahlfeld mit id=StateId oder einem anderen Auswahlfeld mit id=CityId (mit Maus oder Tastatur) ändert, wird die Funktion myReload aufgerufen, die das erneute Laden von Daten in jqGrid erzwingt. Während der entsprechenden $.ajax-Anforderung, die jqGrid für uns erledigt, wird der Wert aus dem Parameter postData als data-Parameter an $.ajax weitergeleitet. Wenn einige der Eigenschaften von data Funktionen sind, werden diese Funktionen von $.ajax aufgerufen. So werden die tatsächlichen Daten aus Auswahlfeldern geladen und alle Daten werden an die an den Server gesendeten Daten angehängt. Sie müssen nur das Lesen dieser Parameter in Ihrem Serverteil implementieren.

Daher werden die Daten aus dem Parameter postData an die URL angehängt (die Symbole '?' Und '&' werden automatisch hinzugefügt und alle Sonderzeichen wie Leerzeichen werden ebenfalls wie üblich codiert). Die Vorteile der Verwendung von postData sind:

  1. Die Verwendung von Funktionen im postData-Parameter ermöglicht das Laden von actual - Werten aus allen verwendeten Steuerelementen bis zum Zeitpunkt des erneuten Ladens.
  2. Ihr Code-Aufenthalt hat eine sehr klare Struktur.
  3. Alles funktioniert nicht nur mit HTTP-GET-Anforderungen, sondern auch mit HTTP POST.

Wenn Sie einige Einträge "keine Filterung" oder "alle" in der Auswahlbox StateId verwenden, können Sie die Funktion ändern, die den Wert des Parameters StateId berechnet, der an die Server-URL angehängt werden soll 

StateId: function() { return jQuery("#StateId option:selected").val(); }

auf etwas wie folgendes:

StateId: function() {
    var val = jQuery("#StateId option:selected").val();
    return val === "all"? "": val;
}

Auf der Serverseite sollten Sie nicht nach StateId filtern, wenn Sie einen leeren Wert als Parameter erhalten.

Optional können Sie myGrid.setCaption('A text'); verwenden, um einen Gittertitel zu ändern. Dadurch kann der Benutzer klarer erkennen, dass die Daten im Raster anhand einiger Kriterien gefiltert werden.

78
Oleg

Ich hatte die gleichen Anforderungen und kam (mit Olegs Hilfe) dazu:

enter image description here

Grundsätzlich beginnt der Benutzer in das Textfeld "Name des Mitarbeiters" einzugeben, und die Ergebnisse werden sofort im jqGrid angezeigt.

Details, wie ich dies umgesetzt habe, sind hier:

jqGrid - Filter/Such-Popup-Formular ändern - auf Seite flach sein - kein Dialog

Beachten Sie, dass ich insbesondere alle der JSON-Daten für mein jqGrid im Voraus lade, und dass bei großen Datensätzen beim Ausführen dieses Codes auf einem iPhone/Android-Gerät eine Verzögerung auftritt, wenn Sie jedes Zeichen eingeben . 

Für Desktop-Web-Apps ist dies jedoch eine großartige Lösung und macht jqGrid für den Benutzer viel freundlicher.

2
Mike Gledhill

Mit den Funktionen ReloadGrid() und jquery können Sie Ihre eigenen benutzerdefinierten Filterfunktionen erstellen.

0
신유진