JqGrid Sortierung auf der Clientseite

Question

Ich habe ein Baumgitter mit automatischem Laden von Zeilen. Das Ziel ist es, das Gitter nach dem Baumspalten auf der Client-Seite zu sortieren.

Aber jedes Mal, wenn ich auf die Spaltenüberschrift zur Sortierung klicke, wird ein Ajax-Aufruf zur Sortierung ausgeführt, aber alles, was ich brauche, ist eine Sortierung vor Ort unter Verwendung der lokalen Daten.

Habe ich falsche Gitterparameter oder funktioniert der Baum nicht mit einer clientseitigen Sortierung in der Baumspalte?

Aktuelle jqGrid-Parameter für die Sortierung sind:

loadonce: true, // um die Sortierung auf der Client-Seite zu aktivieren
sortable: true // um die Sortierung zu aktivieren

Answer 1

Um das clientseitige Sortieren zum Laufen zu bringen, musste ich reloadGrid aufrufen, nachdem das Raster geladen wurde:

loadComplete: function() {
    jQuery("#myGridID").trigger("reloadGrid"); // Aufruf um das clientseitige Sortieren zu fixieren
}

Ich musste dies nicht bei einem anderen Raster in meiner Anwendung tun, weil es konfiguriert war, um Daten abzurufen über einen anderen AJAX-Aufruf, anstatt Daten direkt vom Raster abzurufen:

editurl: "clientArray"
datatype: "local"

Answer 2

Ich verwende das clientseitige Sortieren auf jqGrid und rufe einen neuen Satz von JSON-Daten ab, wenn sich eine Auswahlliste ändert. Sie müssen rowTotal auf einen Betrag setzen, der höher oder gleich der Anzahl der zurückgegebenen Zeilen ist, und dann den Datentyp kurz vor dem Neuladen des Rasters auf 'json' setzen.

// Wert der Auswahlliste geändert
$('#alertType').change(function () {
        var val = $('#alertType').val();
        var newurl = '/Data/GetGridData/' + val;
        $("#list").jqGrid().setGridParam({ url: newurl, datatype: 'json' }).trigger("reloadGrid");        
});

// jqGrid Einrichtung
$(function () {
        $("#list").jqGrid({
            url: '/Data/GetGridData/-1',
            datatype: 'json',
            rowTotal: 2000,
            autowidth: true,
            height:'500px',
            mtype: 'GET',
            loadonce: true,
            sortable:true,
            ...
            viewrecords: true,
            caption: 'Übersicht',
            jsonReader : { 
                root: "rows", 
                total: "total", 
                repeatitems: false, 
                id: "0"
            },
            loadtext: "Lade Daten...",
        });
    });

Answer 3

$(function () {
        $("#list").jqGrid({
            url: '/Data/GetGridData/-1',
            datatype: 'json',
            rowTotal: 2000,
            autowidth: true,
            height:'500px',
            mtype: 'GET',
            loadonce: true,
            sortable:true,
            ...
            viewrecords: true,
            caption: 'Übersicht',
            jsonReader : { 
                root: "rows", 
                total: "total", 
                repeatitems: false, 
                id: "0"
            },
            loadtext: "Daten werden geladen...",
        });
    });