Beispiele Forum Support
Dokumentation
StartAnsichten

Available only in PRO Edition

Grid-Ansicht

Diese Ansicht ist nur in der Scheduler PRO-Version enthalten.

Die Grid-Ansicht zeigt eine Liste bevorstehender Ereignisse an und ermöglicht es Ihnen im Gegensatz zur Agenda-Ansicht, beliebig viele Spalten zu konfigurieren.

Related sample:  Grid view

Initialisierung

So fügen Sie die Grid-Ansicht dem Scheduler hinzu:

  1. Aktivieren Sie die "grid view"-Erweiterung auf Ihrer Seite: 
    scheduler.plugins({
    grid_view: true
});
  2. Fügen Sie den Tab der Ansicht in das Markup des Schedulers ein: 
    <div id="scheduler_here" class="dhx_cal_container" ...>
    <div class="dhx_cal_navline">
       ...
       <div class="dhx_cal_tab" name="grid_tab" style="right:300px;"></div>
    </div>
    ... 
</div>
  3. Legen Sie das Label für den Tab fest: 
    //'grid_tab' ist der Name unseres div
scheduler.locale.labels.grid_tab = "Grid";
  4. Rufen Sie die Methode createGridView auf: 
    scheduler.createGridView({
    name:"grid",
    fields:[    // definiert die Spalten des Grids
        {id:"id",   label:'Id',   sort:'int',  width:80,  align:'right'},
        {id:"date", label:'Date', sort:'date', width:'*'},
        {id:"text", label:'Text', sort:'str',  width:200, align:'left'}
    ],
    from:new Date(2019, 3, 10),//linke Grenze des erlaubten Datumsbereichs
    to:new Date(2019, 5, 23)    //rechte Grenze des erlaubten Datumsbereichs
});

Related sample:  Grid view

Datumsbereich begrenzen

Mit dieser Erweiterung können Sie die aktiven Daten einschränken, sodass Benutzer den angegebenen Bereich nicht überschreiten können.

Wenn Sie beispielsweise die aktiven Daten vom 1. Januar 2010 bis zum 1. Januar 2011 begrenzen möchten, konfigurieren Sie es wie folgt:

scheduler.createGridView({
    name:"grid",
    ..
    from:new Date(2019, 0, 1),
    to:new Date(2020, 0, 1)
});

Navigation aktivieren

Um die Navigation mit den Schaltflächen im Grid zu aktivieren, stellen Sie einfach die paging-Eigenschaft auf true:

scheduler.createGridView({
    name:"grid",
    ...
    paging:true
});

Related sample:  Grid view


Mit aktivierter Navigation scrollen die Schaltflächen das Grid jeweils einen Monat vor oder zurück.

Um das Standardzeitintervall für das Scrollen anzupassen, verwenden Sie die Eigenschaften unit und step:

  • unit - (minute, hour, day, week, month, year) die Zeiteinheit für das Scrollen. Standard ist 'month'
  • step - (number) wie viele Einheiten auf einmal gescrollt werden. Standard ist 1. 
//Scrollen in 2-Wochen-Schritten
scheduler.createGridView({
    name:"grid",
    ...
    paging:true,
    unit:"week",
    step:2
});

Sortierung

Ein Klick auf einen Spaltenkopf aktiviert eine Steuerung, die anzeigt, nach welcher Spalte das Grid sortiert ist und ob auf- oder absteigend sortiert wird.
Ein erneuter Klick auf denselben Kopf kehrt die Sortierreihenfolge um.

Da Spalten verschiedene Datentypen enthalten können (Zahlen, Zeichenketten, Daten), benötigt jeder Typ seine eigene Sortiermethode.

Deshalb unterstützt die Ansicht 3 Sortiertypen, um dies korrekt zu handhaben:

  1. int;
  2. date;
  3. str.

Um die Sortierung zu aktivieren und den Sortiertyp einer Spalte festzulegen, verwenden Sie die sort-Eigenschaft.

scheduler.createGridView({
    name:"grid",
    fields:[
        {id:"date",  label:'Date', sort:'date'},
        {id:"text",  label:'Text', sort:'str'}
    ]
});

Eigene Sortierfunktionen

Wenn Sie eigene Sortierlogik verwenden möchten, definieren Sie eine Funktion und weisen Sie sie dem sort-Parameter zu.

Diese Funktion wird für jedes Wertepaar aufgerufen und sollte 1, -1 oder 0 zurückgeben:

  • 1 - der erste Wert soll vor dem zweiten erscheinen;
  • -1 - der zweite Wert soll vor dem ersten erscheinen;
  • 0 - beide Werte sind gleich.

Hier ein Beispiel für eine allgemeine Sortierfunktion:

scheduler.createGridView({
    name:"grid",
    fields:[
        {id:"id",   label:'Id',   sort: sortById},
        {id:"text", label:'Text', sort:'str'}
    ]
});
 
function sortById(a,b){
    a = a.id;
    b = b.id;
    return a>b?1:(a<b?-1:0);
}

Daten-Templates

Standardmäßig zeigt jede Spalte die Daten aus der als id angegebenen Eigenschaft an.

Wenn Sie den in einer Spalte angezeigten Inhalt anpassen möchten, können Sie Templates verwenden. In diesem Fall zeigt die Spalte die von der Template-Funktion zurückgegebenen Daten an.

Daten-Templates werden Spalten mit der template-Eigenschaft zugewiesen.

scheduler.createGridView({
    name:"grid",
    fields:[
      {id:"date",label:'Date',template:function(start,end,ev){return "1# "+ev.text}},
       ...
    ]
});

Die Template-Funktion erhält 3 Parameter:

  • start - das Startdatum des Ereignisses
  • end - das Enddatum des Ereignisses
  • ev - das Ereignisobjekt

Verwandte Anleitungen

 Nach oben