agorum.composite.form.element.grid

Dieses Element dient zur Darstellung von Werten und Eingabefeldern in nach Spalten angeordneten Listen. Sie können damit:

• jede andere Art von Element innerhalb der Liste verwenden
• Benutzeraktionen für Positionen der Liste festlegen, damit Benutzer die Positionen bearbeiten, verschieben, duplizieren oder löschen können
• beliebig lange Listen mit Scrollbalken darstellen

agorum.composite.form.element.grid erbt alle Grundeigenschaften von element.

Unterschiede zwischen list und grid

Die beiden Möglichkeiten zur Oberflächengestaltung, agorum.composite.form.element.grid und agorum.composite.form.element.list, unterscheiden sich darin, wie Benutzer die Informationen anzeigen lassen und bearbeiten können.

Beispiel einer Oberfläche

Beispiel einer Oberfläche

Ein Doppelklick auf eine Position (Zeile) öffnet folgende Ansicht:

Detailansicht einer Position

Ein fehlerhafter Eintrag wird wie folgt in der Detailansicht angezeigt, in diesem Beispiel nach Herauslöschen des erforderlichen Texts in Spalte 1:

Anzeige eines fehlerhaften Eintrags in der Detailansicht

Ein fehlerhafter Eintrag wird wie folgt in der Listenansicht angezeigt, in diesem Beispiel nach Herauslöschen des erforderlichen Texts in Spalte 1 in der Detailansicht:

Anzeige eines fehlerhaften Eintrags in der Listenansicht

Skript zur Oberfläche

let aguila = require('common/aguila');

// fill test values
let testValue = [];
for (let i = 0; i < 100; i++) {
  testValue.push({
    col1: {
      type: 'custom',
      value: 'Value1_' + i,
      hidden: false,
    },
    user_ag_tags: null,
    col2: null,
    col3: {
      type: 'custom',
      value: new Date(),
    },
    col4: 'value1',
    col5: 'Das ist ein Beispieltext.',
    col6: {
      type: 'custom',
      icon: 'aguila-icon local_airport',
    },
    col7: {
      type: 'custom',
      value: '+',
    },
    col8: {
      type: 'custom',
      value: 20520.24,
    },
  });
}

let form = aguila.create({
  width: 1200,
  height: 600,
  type: 'agorum.composite.form.basic',
  elements: [
    {
      type: 'agorum.composite.form.element.grid',
      name: 'listField',
      // showError: 'always',
      // readOnly: true,
      label: 'Test',
      // showAppend: true,
      // showRowDelete: true,
      // showRowMove: true,
      // hideHeader: true,
      // tableWidth: 2000,

      // general actions  
      actions: {
        duplicate: true,
        setColumnValues: true,
      },
      template: [
        {
          type: 'agorum.composite.form.element.text',
          name: 'col1',
          label: 'Spalte 1',
          flexible: true,
          hidden: false,
          width: 100,

          actions: {
            setColumnValues: false,
          },

          validation: [
            {
              required: true,
            },
          ],
        },
        {
          // use of metadata
          type: 'agorum.composite.form.element.text',
          name: 'user_ag_tags',
          label: 'Spalte 2',
          width: 100,
        },
        {
          // boolean sample
          type: 'agorum.composite.form.element.boolean',
          name: 'col2',
          label: 'Spalte 3',
          width: 100,
          text: 'Ja, bitte',
          readOnlyHidden: true,
        },
        {
         // date sample
          type: 'agorum.composite.form.element.date',
          name: 'col3',
          label: 'Spalte 4',
          width: 134,
        },
        {
         // select sample
          type: 'agorum.composite.form.element.select',
          name: 'col4',
          label: 'Spalte 5',
          restricted: true,
          data: [
            {
              value: 'value1',
              text: 'Wert 1',
            },
            {
              value: 'value2',
              text: 'Wert 2',
            },
            {
              value: 'value3',
              text: 'Wert 3',
            },
            {
              value: 'value4',
              text: 'Wert 4',
            },
          ],
          width: 134,
        },
        {
         // textDisplay sample
          type: 'agorum.textDisplay',
          name: 'col5',
          label: 'Spalte 6',
          width: 200,
          required: true,
        },
        {
         // button with icon sample
          type: 'agorum.composite.form.element.button',
          name: 'col6',
          label: 'Spalte 7',
          icon: 'aguila-icon drive_eta',
          width: 54,
        },
        {
         // button with text sample
          type: 'agorum.composite.form.element.button',
          name: 'col7',
          label: 'Spalte 8',
          value: 'Y',
          readOnlyHidden: true,
          width: 54,
        },
        {
          // number sample
          type: 'agorum.composite.form.element.number',
          name: 'col8',
          label: 'Spalte 9',
          width: 104,
          format: ',000.00',
          calculator: true,
        },
      ],
      value: testValue,
    },
  ],
});

form
  .down('listField')
  .on('action', data => {
    console.log('action', data);
  })
  .on('itemDeleted', data => {
    console.log('deleted', data);
  })
  .on('itemMoved', data => {
    console.log('moved', data);
  });

form;

grid Parameter

Zusätzlich zu den Parametern von element können Sie folgende Parameter verwenden:

Parameter	Beschreibung	Mögliche Werte
actions	Definiert Aktionen auf Zeilenebene, die ein Benutzer im Kontextmenü ausführen kann. Die Aktionen können global für grid angegeben werden oder auf template-Ebene pro Spalte.	Siehe actions Parameter
compactHeader	Stellt den Header in der Detailansicht in einer kompakten Form dar. Nur die Symbole für Vor und Zurück sowie die Anzeige der angezeigten Elemente auf der rechten Seite existieren, um Platz zu sparen.	Boolescher Wert, Standardwert: false
	Detailansicht mit kompaktem Header
hideHeader	Ausblenden der Kopfzeile mit den Spaltennamen in der Detailansicht	Boolescher Wert, Standardwert: false
	Detailansicht mit ausgeblendeter Kopfzeile
label	Angezeigter Name (Label) der Grid-Liste. Die Anzeige führt dazu, dass das System das grid-Element genauso eingerückt darstellt wie andere Elemente in einer form, wenn die Standardeinstellungen verwendet werden.	Zeichenkette
showAppend	Blendet das Symbol + zum Hinzufügen von neuen Positionen ein.	Boolescher Wert, Standardwert: false
showRowDelete	Blendet das Symbol Zeile löschen in der Listenansicht im Kontextmenü und in der Detailansicht ein, wodurch Benutzer eine Position aus der Liste löschen können.	Boolescher Wert, Standardwert: false
showRowMove	Blendet die Symbole zum Verschieben von Einträgen in der Listenansicht im Kontextmenü und in der Detailansicht ein, wodurch Benutzer Elemente in der Liste verschieben können.	Boolescher Wert, Standardwert: false
template	Definiert die Darstellung der jeweiligen Spalten einer Zeile in der Tabelle. Darin enthalten sind form-Elemente oder aguila-widgets. Sie können alle Parameter von element oder aguila-widget verwenden. Sie können durch die Angabe von actions die Standardeinstellungen von actions der Grid-Liste pro Spalte überschreiben. Definieren Sie mindestens eine Spalte als flexible=true und andere Spalten mit einer festen width, sodass die Liste sinnvoll die gesamte Breite verwendet. Das System lädt alle Angaben für die Darstellung aus der Metadaten-Definition, wenn name ein definiertes Metadatum ist. Sie können weitere Parameter definieren, die dann die Parameter aus der Metadaten-Definition überschreiben oder ergänzen. Sie können zu Spalten, die sich automatisch aus einer metadata-list-Definition ergeben, noch weitere eigene Spalten hinzuzufügen.	Hinweis: Die Spalte name darf nicht mit einem _ (Unterstrich) beginnen. Diese Schreibweise ist ausschließlich für interne Zwecke reserviert.
value	Übergibt die Werte für die Grid-Liste als Array mit map-Einträgen, die zu der Definition in template passen müssen.	Array Hinweis: Alle Werte befinden sich im Speicher und verbrauchen somit RAM.

actions Parameter

Parameter	Beschreibung	Mögliche Werte
duplicate	Aktiviert die Aktion Zeile duplizieren im Kontextmenü in der Listenansicht und in der Detailansicht, mit der Benutzer die aktuelle Zeile in der Liste kopieren können. Das System übernimmt die Zustände der Zellen, etwa disabled, readOnly, hidden.	Boolescher Wert, Standardwert: false
setColumnValues	Aktiviert das Vererben von Werten einer Spalte nach oben, unten oder in beide Richtungen. Das System übernimmt nur die Werte, nicht die Zustände wie disabled, readOnly, hidden.	Boolescher Wert, Standardwert: false

grid Events

Alle Events in element gelten. Zusätzlich gelten die folgenden Events.

{   
  name: 'col1', // Spaltenname
  index: 0,   // Position in der Liste (bezogen auf alle Werte)
  path: [ 0, 'col1' ]  // Pfad zum auslösenden Element
}

{
  value: 'current value',      // aktueller Wert des Felds
  index: 0,                    // Index der Zeile, in der die Änderung stattfand
  name: 'col1',                // Name des auslösenden Elements
                               // ist nicht belegt beim input-Event für die Zeile oder ganze grid
  path: [ 0, 'col1' ]          // Pfad zum auslösenden Element
}

{
  value: 'current value',      // aktueller Wert des Felds
  oldValue: 'previous value',  // Wert vor der Änderung
  index: 0,                    // Index der Zeile, in der die Änderung stattfand
  name: 'col1',                // Name des auslösenden Elements
                               // ist nicht belegt beim input-Event für die Zeile oder ganze grid
  path: [ 0, 'col1' ]          // Pfad zum auslösenden Element
}

{
  item: [ ... ],   // der Wert der neuen Zeile
  index: 99,       // Position in der Liste (bezogen auf alle Werte der Liste), zu der das Element hinzugefügt wurde
}

{
  item: [ ... ],  // der Wert dieser Zeile
  index: 0        // Position in der Liste (bezogen auf alle Werte der Liste), in der das Element zuvor war
}

{
  item: [ ... ],   // der Wert dieser Zeile
  fromIndex: 0,    // Position in der Liste (bezogen auf alle Werte der Liste), bevor das Element verschoben wurde
  toIndex: 1       // Position nach dem Verschieben
}

grid Funktionen

Für weitere Informationen zu den Funktionen set und get siehe list Funktionen.