Lesen von Zellenwerten aus einer Datenrasterkomponente

You can read the cell values from a Data Grid component. For example, you will learn how to dynamically sum all values in a Data Grid column. For any new item, the Total Quantity field displays the new total value.

1. Erstellen Sie ein neues Formular und fügen Sie eine Datenrasterkomponente hinzu.

2. Ziehen Sie im Datenraster eine Textfeld- Komponente und eine Zahlenkomponente per Drag-and-drop. Nennen Sie sie Item und Menge.

   Damit die weitere Logik funktioniert, stellen Sie sicher, dass die Eigenschaftsnamen für die beiden Komponenten genau wie die folgenden sind:

   • Textfeld – textField
   • Zahl – number

3. Fügen Sie eine weitere Textfeld- Komponente im Formular hinzu, jedoch außerhalb des Datenrasters. Nennen Sie sie Gesamtmenge und legen Sie den Eigenschaftsnamen als lastNumber fest.

4. Wählen Sie auf der Registerkarte Anzeige des Textfelds Gesamtmenge die Option Deaktiviert. Dadurch wird die Komponente schreibgeschützt.

5. Konfigurieren Sie auf der Registerkarte Logik des Textfelds Gesamtmenge eine Logik, um die Zahlen des Datenrasters in diesem Feld zu addieren.

   1. Wählen Sie Logik hinzufügen aus , um den Trigger und die Aktion so zu konfigurieren, dass die Werte summiert werden.

   2. Geben Sie im Abschnitt Trigger und im Feld Logikname einen Namen für Ihre Logik ein.

   3. Wählen Sie den Trigger- Typ als Einfach aus. Lassen Sie die restlichen Felder leer, damit die Logik bei jeder Änderung im Datenraster ausgelöst wird .

   4. Geben Sie im Abschnitt Aktionen und im Feld Aktionsname einen Namen für Ihre Aktion ein. In diesem Fall soll die ausgelöste Aktion den Gesamtwert aktualisieren, deshalb haben wir updateValue als Aktionsnamen verwendet.

   5. Wählen Sie den Aktionstyp Wert aus und geben Sie dann das folgende Skript in den Abschnitt Wert (Javascript) ein:

      var result = 0;
      for (var i = 0; i < data.dataGrid.length; i++) {
        result += +(data.dataGrid[i].number);
      }
      return result;
      

      Das obige Code-Snippet durchläuft die vorhandenen Werte im Datenraster und summiert sie. Mit jedem neuen Wert wird die Iteration neu gestartet, wodurch der Gesamtwert aktualisiert wird.

   6. Speichern Sie die Actions und die Logik und dann die Komponente.

Wenn Sie zur Laufzeit ein neues Element zum Raster hinzufügen, wird der Wert Gesamtmenge aktualisiert.

Workflow-Beispiel

Um den vollständigen Workflow zu überprüfen und das Tutorial selbst auszuprobieren, laden Sie den Beispielworkflow herunter .