Table

Liaison de données

Propriétés de configuration

Définissez ou modifiez les propriétés de configuration du contrôle Tableau sur l'onglet de propriétés Configuration.

Les propriétés de configuration de l'apparence du contrôle Tableau sont répertoriées dans le tableau ci-dessous :

Tableau 1. Propriétés de configuration de l'apparence du contrôle Tableau

Propriété de configuration de l'apparence	Description	Type de données
Style de table	Style de la table.
Style de couleur	Style de couleur du contrôle. Les couleurs correspondent aux variables du thème spécifié.	Chaîne
Mettre la sélection en surbrillance	Ombre les lignes sélectionnées. Cette option ne fonctionne pas si le style de couleur est nul.	Booléen
Largeur	Spécifie la largeur de la table. Vous pouvez spécifier sa largeur en px (pixels), % (pourcentage), ou unités em. Par exemple, 50 px, 20 %, ou 0.4em. Si aucun type d'unité n'est spécifié, celui-ci est supposé être px.	Chaîne
Hauteur	Spécifie la hauteur du contrôle en px (pixels) ou en unités em. Si aucun type d'unité n'est spécifié, celui-ci est supposé être px. La hauteur n'inclut pas l'en-tête ou le pied de page. Si vous spécifiez une hauteur et que les rangées affichées dépassent l'espace vertical disponible dans le corps de la table, il est possible de faire défiler ce corps verticalement.	Chaîne
Aller à la ligne pour les en-têtes de colonnes	Renvoie à la ligne les en-têtes de colonnes en fonction de l'espace disponible dans la table.
Afficher les fenêtres en incrustation	Les menus et contrôles en incrustation s'affichent sur la table lorsque la hauteur n'est pas spécifiée. Par exemple, si cette option est sélectionnée, un contrôle Sélecteur de date/heure s'affiche sur la table. Dans le cas contraire, le Sélecteur de date/heure est intégré dans la cellule de tableau.	Booléen

Les propriétés de configuration du comportement du contrôle Tableau sont répertoriées dans le tableau ci-dessous :

Tableau 2. Propriétés de configuration du comportement du contrôle Tableau

Propriété de configuration du comportement	Description	Type de données
Mode de sélection	Définissez le nombre de lignes qu'un utilisateur peut sélectionner.	Chaîne
Afficher le bouton Supprimer	Afficher ou masquer le bouton pour supprimer une ligne.	Booléen
Afficher le pied de page	Afficher ou masquer le pied de page.	Booléen
Afficher le bouton Ajouter	Afficher ou masquer le bouton pour ajouter une ligne. Si la table applique un tri ou un filtre, il se peut que la nouvelle ligne ajoutée ne s'affiche pas à la dernière ligne de la table, ou qu'elle n'apparaisse pas du tout tant que l'option de tri ou de filtre n'a pas été désélectionnée Remarque : Vous devez également sélectionner l'option Afficher le pied de page.	Booléen
Afficher les statistiques du tableau	Permet l'affichage des statistiques de table dans le pied de page. Par exemple, Affichage de 1 à 5 sur 59 entrées. Remarque : Vous devez également sélectionner l'option Afficher le pied de page.	Booléen
Afficher le pager	Afficher ou masquer le nombre de pages. Le pager affiche seulement 5 pages, par conséquent, en fonction de la taille de la page initiale et du nombre d'enregistrements, les pages peuvent ne pas être consécutives (1, 2, 3...). Exemple : La table contient au total 50 entrées et la taille de la page initiale est définie sur 5. Les numéros de page qui sont affichés sont 1, 3, 5, 7, 10. L'utilisateur clique sur le bouton Suivant pour naviguer dans les pages dans l'ordre, ou utilise les boutons de numéros de page pour se déplacer rapidement dans les pages. Remarque : Vous devez également sélectionner l'option Afficher le pied de page.	Booléen
Afficher le dimensionneur de page	Afficher ou masquer le dimensionneur de page qui affiche le nombre de lignes sur une page.	Booléen
Taille de page initiale	Nombre de lignes affichées par page.	Entier

Les propriétés de configuration des colonnes du contrôle Tableau sont répertoriées dans le tableau ci-dessous.

Remarque : Ces propriétés déterminent la façon dont la table est rendue au moment de l'exécution.

Tableau 3. Propriétés de configuration des colonnes du contrôle Tableau

Propriété de configuration de colonne	Description	Type de données
Rendu en tant que	Façon dont le contenu d'une cellule est rendu : Vue Coach Vue Coach transparente HTML simple Personnalisé Les contrôles imbriqués dans des cellules de tableau, comme les contrôles Entier et Sélecteur de date, possèdent généralement des bordures visibles. Le tableau possède également sa propre bordure. Pour supprimer les bordures des contrôles imbriqués, utilisez Vue Coach transparente. Si vous utilisez vue Coach ou Vue Coach transparente, sélectionnez showLabel pour afficher le libellé de la vue Coach intégrée.	Chaîne
Visibilité	Colonne Visibilité.	Chaîne
Triable	Permettre de trier les données de cette colonne. Par défaut, seules les colonnes liées à des types simples peuvent être triées. Pour trier un type complexe, vous devez définir Rendu en tant que sur Personnalisé et utiliser un événement En cas de cellule personnalisée. Par exemple : var div = document.createElement("div"); div.innerHTML = cell.row.data["firstName"]; cell.setSortValue(cell.row.data["firstName"]); return div;	Booléen
Options	Options pour formater les données dans la colonne, selon le type de données. Sélecteur de date datePattern Par exemple, si le format souhaité est le lundi 08 juin 2015, entrez : "datePattern": "EEEE dd MMM, yyyy" Décimal thousandsSeparator, decimalPlaces, decimalSeparator, postfix, prefix Par exemple : "decimalPlaces": 2, "decimalSeparator": ".", "thousandSeparator": ",", "prefix": "$" Entier thousandSeparator Lien href Ces options ne fonctionnent que si la colonne est rendue en tant que HTML ou personnalisée. Avec le rendu personnalisé, à l'intérieur de l'événement En cas de cellule personnalisée, vous pouvez utiliser cell.getFormattedValue() pour obtenir une valeur avec le formatage appliqué.	Chaîne
CSS	Style CSS à appliquer à la colonne. Vous pouvez utiliser le style CSS (par exemple, color:#00ff00 ) ou les classes CSS. Si cette zone contient deux points, le contrôle Table suppose que vous avez spécifié un style CSS. Sinon, il suppose que vous avez spécifié un ou plusieurs noms de classe CSS.	Chaîne
Largeur	Largeur de la colonne en px, em ou %. Si aucune unité n'est spécifiée, px est utilisé. Remarque : envisagez de garder la largeur d'une colonne indéfinie afin que le navigateur puisse calculer l'espace restant et l'affecter à la colonne dont la largeur n'est pas spécifiée.	Chaîne
Libellé	Libellé de la colonne.	Chaîne
showLabel	Lorsque la cellule est présentée sous la forme d'une vue Coach ou d'une vue Coach transparente, affiche ou masque le libellé de la vue Coach.	Booléen

Exemple

var autoObject = [];
autoObject[0] = {};
autoObject[0].name = "Dylan";
autoObject[0].favoriteSport = "Tennis";
autoObject[0].favoritePlayer = "Federer";
autoObject[1] = {};
autoObject[1].name = "Max";
autoObject[1].favoriteSport = "Soccer";
autoObject[1].favoritePlayer = "Messi";
autoObject

Le service utilisateur côté client possède une variable privée profiles de type Profiles[].

Dans le service utilisateur côté client, créez une copie du Coach et reliez-la au premier Coach. Dans le deuxième Coach, remplacez le libellé de la Table par Profils - Coach Deux.

Voici le résultat que vous obtenez lorsque vous exécutez le Coach :

Cliquez sur le bouton Ajouter et entrez du texte dans la nouvelle ligne. Par exemple :

Lorsque vous cliquez sur le bouton OK, le deuxième Coach se charge et vous voyez que les données incluant la nouvelle ligne que vous avez créée s'affichent dans le tableau.

Evénements

Définissez ou modifiez les gestionnaires d'événements pour le contrôle dans l'onglet Evénements. Vous pouvez définir des événements à déclencher par programmation ou lorsqu'un utilisateur interagit avec le contrôle. Pour plus d'informations sur la façon de définir et coder des événements, voir Evénements définis par l'utilisateur. Le contrôle Tableau comporte les types de gestionnaire d'événements suivants :

• Lors du chargement : activé lors du chargement de la table. Exemple :

  me.setPageIndex(0);

• En cas de cellule personnalisée : activé lorsqu'une cellule disposant d'options de rendu personnalisées (configurées dans la configuration des colonnes) est chargée. Pour utiliser cet événement, vous devez configurer la valeur de configuration Rendu en tant sur Personnalisé dans la configuration des colonnes. Vous pouvez également utiliser cet événement pour configurer cell.setSortValue(cell.value) pour les types complexes. Exemple :

  var div = document.createElement("div"); 
  div.innerHTML = cell.row.data[cell.varName]; 
  return div;

• En cas de chargement de lignes : activé lorsque les lignes sont affichées. Cet événement ne s'applique qu'aux tables paginées. Exemple :

  alert("All rows have " + (all ? "" : "NOT") + " been loaded");

• En cas de sélection d'une ligne par un utilisateur : activé lorsque l'utilisateur sélectionne une ligne. Exemple :

  alert("Selected row has index " + row.index);

• En cas d'ajout d'une ligne par un utilisateur : activé lorsque l'utilisateur ajoute une ligne avec le bouton Ajouter une ligne. Si un objet JavaScript est renvoyé, il est ajouté en tant que nouvelle ligne, sinon un objet vide est ajouté. Exemple :

  alert("Selected row has index " + row.index);

• En cas de suppression d'une ligne : activé lorsque l'utilisateur demande à supprimer un enregistrement. Si l'événement renvoie une valeur false, l'enregistrement n'est pas supprimé. Cet événement peut être utilisé pour exiger la confirmation de l'utilisateur avant que l'enregistrement ne soit officiellement supprimé. Par exemple :

  return confirm("Are you sure you want to delete item " + item.str1);

Méthodes

Pour plus d'informations sur les méthodes disponibles pour le contrôle Tableau, voir API JavaScript du contrôle Tableau.

Ressources supplémentaires

Pour plus d'informations sur la création d'un Coach, voir Génération de Coaches.
Pour plus d'informations sur les propriétés standard (Général, Configuration, Positionnement, Visibilité et Attributs HTML), voir Propriétés de vue Coach.