Sortieren von Spalten

dhtmlxGantt ermöglicht das Sortieren von Daten in den Gitterspalten auf der Client-Seite. Es gibt zwei Hauptmethoden, um das Sortieren zu aktivieren:

  1. Durch Klicken auf einen Spaltenkopf, der das Attribut sort aktiviert hat.
  2. Durch einen API-Aufruf der Methode sort, die durch Ereignisse oder Aktionen wie Schaltflächenklicks oder Seitenladevorgänge ausgelöst werden kann.

Gantt kann Aufgaben nur basierend auf Datenwerten sortieren und wird keine Werte sortieren, die aus dem Template-Attribut einer Spalte abgeleitet sind.

Sortieren durch Klicken auf den Kopf

Wenn jemand auf einen Spaltenkopf klickt, zeigt das Gantt-Diagramm eine Steuerung an, die die sortierte Spalte und die Sortierrichtung (entweder aufsteigend oder absteigend) hervorhebt. Ein erneutes Klicken auf denselben Kopf kehrt die Sortierreihenfolge um.

Um diese Funktion zu aktivieren, setzen Sie einfach die Eigenschaft sort auf true:

gantt.config.sort = true; 
gantt.init("gantt_here");

Related sample:  Built-in sorting

Programmatisches Sortieren

Wenn Sie das Gitter basierend auf einem Ereignis oder einer Aktion sortieren möchten, wie z.B. einem Schaltflächenklick oder beim Laden der Seite, können Sie die Methode sort verwenden.

Sortieren beim Schaltflächenklick

<input type='button' value='Nach Aufgabenname sortieren' onclick='gantt.sort("text", true);'>
 
<script type="text/javascript" charset="utf-8">
    gantt.init("gantt_here"); 
    gantt.parse(tasks);
</script>

Related sample:  Using sorting methods

Benutzerdefinierte Sortierfunktionen

Sie können auch benutzerdefinierte Sortierlogiken erstellen, indem Sie die Methode sort verwenden. Übergeben Sie einfach Ihre benutzerdefinierte Funktion als ersten Parameter.

Eine benutzerdefinierte Sortierfunktion vergleicht Paare benachbarter Werte und gibt eines der folgenden zurück:

  • 1 - der erste Wert sollte vor dem zweiten kommen.
  • -1 - der zweite Wert sollte vor dem ersten kommen.
  • 0 - die Reihenfolge bleibt gleich.

Verwenden einer benutzerdefinierten Funktion, um ein Gantt-Diagramm zu sortieren

<input type='button' value='Nach Anzahl der Inhaber sortieren' 
       onclick='sortByHolders(direction)'>
 
<script type="text/javascript" charset="utf-8">
    var direction = false;
 
    function sortByHolders(direction1){
        direction = !direction;
        gantt.sort(sortHolders);
    };
    function sortHolders(a,b){
         a = a.users.length;
         b = b.users.length;
 
         if (direction){
            return a>b?1:(a<b?-1:0);
         } else {
            return a>b?-1:(a<b?1:0);
         }
    };
</script>

Related sample:  Custom sorting function

Pro-Spalten-Gitter-Sortierung

Sie können die Sortierregeln für einzelne Spalten anpassen. Hier sind drei gängige Methoden, um spaltenspezifisches Sortieren zu handhaben:

1) Deaktivieren der Sortierung für eine Spalte: Setzen Sie die sort-Eigenschaft auf false.

gantt.config.columns[1].sort = false;

2) Verwenden einer benutzerdefinierten Sortierfunktion: Weisen Sie der sort-Eigenschaft eine Funktion zu.

gantt.config.columns[1].sort = function(a,b){
    return custom_function(a,b);
};

Die benutzerdefinierte Sortierfunktion vergleicht zwei Aufgabenobjekte (a und b) und gibt eines der folgenden zurück:

  • 1 - der erste Wert sollte vor dem zweiten kommen.
  • -1 - der zweite Wert sollte vor dem ersten kommen.
  • 0 - die Reihenfolge bleibt unverändert.

3) Sortieren nach einem anderen Aufgabenfeld: Weisen Sie der sort-Eigenschaft den Namen des Feldes zu.

gantt.config.columns[1].sort = 'other_field';
Zurück nach oben