Lecture des valeurs de cellule à partir d'un composant Data Grid

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. Créez un nouveau formulaire et ajoutez un composant Grille de données .

2. Dans la Grille de données, faites glisser et déposez un composant Champ de texte et un composant Nombre . Nommez-les Élément et Quantité.

   Pour que l'autre logique fonctionne, assurez-vous que les noms de propriété des deux composants sont exactement les mêmes que ceux ci-dessous :

   • Champ de texte - textField
   • Nombre - number

3. Ajoutez un autre composant de champ de texte dans le formulaire, mais en dehors de la grille de données. Nommez-la comme Quantité totale et définissez le Nom de la propriété sur lastNumber.

4. Dans l'onglet Afficher du champ de texte Quantité totale , sélectionnez Désactivé. Le composant est ainsi en lecture seule.

5. Dans l'onglet Logique du champ de texte Quantité totale , configurez une logique pour additionner le nombre de cellules de la grille de données dans ce champ.

   1. Sélectionnez Ajouter une logique pour configurer le déclencheur et l'action pour additionner les valeurs.

   2. Dans la section Déclencheur et dans le champ Nom de la logique , saisissez un nom pour votre logique.

   3. Sélectionnez le type de déclencheur sur Simple. Laissez le reste des champs vides afin que la logique se déclenche pour toute modification dans la grille de données.

   4. Dans la section Actions , et dans le champ Nom de l'action , saisissez un nom pour votre action. Dans ce cas, l’action déclenchée consiste à mettre à jour la valeur totale. Nous avons donc utilisé updateValue comme nom d’action.

   5. Sélectionnez le type d'action Valeur , puis saisissez le script suivant dans la section Valeur (Javascript) :

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

      L'extrait de code ci-dessus parcourt les valeurs existantes de la grille de données et les additionne. Toute nouvelle valeur redémarre l’itération, mettant ainsi à jour la valeur totale.

   6. Enregistrez les Actions et la logique, puis le composant.

Au moment du runtime, lorsque vous ajoutez un nouvel élément à la grille, la valeur Quantité totale est mise à jour.

Exemple de workflow

Pour vérifier le workflow complet et essayer vous-même le tutoriel, téléchargez l’ exemple de workflow.