Tableau HTML/CSS

[JeremieDENAEGEL]

Bonjour,

J'ai un tableau HTML/CSS qui affiche des données de compteurs.
Actuellement j'ai un additionnel pour chaque case du tableau.

Est-il possible de faire les liaisons directement dans le contenu HTML de l'acteur sans passer par la case additionnels ?
En sachant que les données sont liées à des fournisseurs relatifs de variable différents pour chaque ligne

Merci d'avance

[manufitoussiwit]

Salut, j'essais des solutions et je reviens vers toi dès qu'il y en a une satisfaisante ;-)

[manufitoussiwit]

Salut,

Alors j'ai une proposition. J'en avais plusieurs à coup de javascript. Voila celle qui en utilise pratiquement pas.

L'idée est d'utiliser un composite pour aller chercher les données qui se répètent sur chaque ligne. J'ai vu que l'entrée de chaque ligne, c'est une ressource. Ensuite les données des colonnes sont prises sur des ressources/fonctions en dessus de la ressource.

Alors j'ai fais le composite suivant :

En propriété du composite, on a :

• path est le chemin depuis :easy.RESS de la ressource qui porte les données de la ligne du tableau.
• row qui est en lecture seule va permettre de récupérer par liaison la ligne html de tableau avec les données bien renseignées et synchro en plus.

Pour comprendre comment c'est généré

Dans le composite, on fait autant d'acteur variable relatif que de colonne dans le tableau.

data1 par exemple va chercher le nom de la ressource (1x d'ailleurs)

data2 va chercher la donnée de la première colonne (à chaque rafraichissement):

On fait la même chose pour chaque colonne.

Ensuite, l'acteur html4 va permettre plusieurs chose :

Il va permettre de construire la ligne html de tableau :

avec des jokers, un par valeur de colonne. Au passage, on notera que j'ai ajouté une classe CSS. C'est pour personnaliser la cellule plus tard.

Ensuite, on voit qu'il y a une liaison vers les données que je récupère avec les acteurs relatifs.

Pour finir, on voit une additionnelle qui sert à exposer la ligne construite sur la proprité row du composite.

Maintenant dans la scène :

On ajoute autant de composite que de ligne à ajouter.

Chaque composite va aller chercher la ligne pour une ressource :

Ensuite, l'acteur html tab va permettre de construire le tableau :

Le contenu :

Il y a un joker par ligne à placer dans le tableau. Au passage on voit le CSS pour personnaliser le tableau et les cellules de nombre.

Chaque joker est finalement lié à son composite.

Et voila !

Je pense que tu devrais pouvoir adapter ça à ton cas ;-)

La scène

SYNAPPS-STUDIO-SCENE|{"config":{"key":"scene124","name":"Exemple de tableau de données"},"leadActor":{"type":"layout/stack","key":"stack1","children":[{"type":"composite/data-row","key":"data-row1"},{"type":"composite/data-row","key":"data-row2","properties":{"path":"R00039.R00041"}},{"type":"composite/data-row","key":"data-row3","properties":{"path":"R00039.R00042"}},{"type":"composite/data-row","key":"data-row4","properties":{"path":"R00039.R00043"}},{"type":"display/html","key":"tab","properties":{"content":"<table class=\"data\">\n  <thead>\n    <tr>\n      <th>Nom des compteurs</th>\n      <th>Conso. d'aujourd'hui</th>\n      <th>Conso. d'hier</th>\n      <th>Conso. mois en cours</th>\n    </tr>\n  </thead>\n  <tbody>\n    {{row1}}\n    {{row2}}\n    {{row3}}\n    {{row4}}\n  </tbody>\n</table>\n\n<style>\n  table.data tr th {\n    font-weight: bold;\n    color: #6699cc;\n  }\n\n  table.data tr td,\n  table tr th {\n    border: 1px solid #aaa;\n    padding: 5px 10px;\n  }\n\n  table.data tbody tr:nth-child(odd) {\n    background-color: #99bbee;\n  }\n\n  table.data tbody tr:nth-child(even) {\n    background-color: #6699cc;\n  }\n\n  table.data tbody tr td.col2,\n  table.data tbody tr td.col3,\n  table.data tbody tr td.col4 {\n    text-align: right;\n  }\n</style>","horizontalAlignment":"middle","verticalAlignment":"middle"},"additionalDefs":{"row1":{"type":"text"},"row2":{"type":"text"},"row3":{"type":"text"},"row4":{"type":"text"}},"bindings":{"additionals.row1":"actor#[email protected]","additionals.row2":"actor#[email protected]","additionals.row3":"actor#[email protected]","additionals.row4":"actor#[email protected]"}}]}}

Le composite

SYNAPPS-STUDIO-COMPOSITE|{"config":{"key":"data-row","name":"Ligne de données","additionalDefs":{"path":{"type":"wos-path","value":"R00039.R00040","relativeToPath":":easy.RESS","variableType":"resourcesOnly"},"row":{"type":"text","isReadOnly":true,"value":""}}},"leadActor":{"type":"layout/stack","key":"root","children":[{"type":"redy/data-source/wos-relative-variable","key":"resource","properties":{"dataReadMode":"always","relativeTo":"global/ress","relativePath":"R00039.R00040"},"bindings":{"properties.relativePath":"[email protected]"}},{"type":"redy/data-source/wos-relative-variable","key":"data1","properties":{"fieldName":"name","relativeTo":"resource"}},{"type":"redy/data-source/wos-relative-variable","key":"data2","properties":{"fieldName":"value","relativeTo":"resource","relativePath":"FNCT.F0001.In","dataReadMode":"always"}},{"type":"redy/data-source/wos-relative-variable","key":"data3","properties":{"fieldName":"value","relativeTo":"resource","relativePath":"FNCT.F0002.In","dataReadMode":"always"}},{"type":"redy/data-source/wos-relative-variable","key":"data4","properties":{"fieldName":"value","relativeTo":"resource","relativePath":"FNCT.F0003.In","dataReadMode":"always"}},{"type":"display/html","key":"html1","properties":{"content":"<tr>\n  <td class=\"col1\">{{data1}}</td>\n  <td class=\"col2\">{{data2}}</td>\n  <td class=\"col3\">{{data3}}</td>\n  <td class=\"col4\">{{data4}}</td>\n</tr>","visible":false},"additionalDefs":{"data1":{"type":"text"},"data2":{"type":"text"},"data3":{"type":"text"},"data4":{"type":"text"},"completedContent":{"type":"text"}},"bindings":{"additionals.data1":"actor#data1@data","additionals.data2":"actor#data2@data","additionals.data3":"actor#data3@data","additionals.data4":"actor#data4@data","additionals.completedContent":{"canWrite":true,"scripts":[{"path":"additionals/completedContent/binding/onWriteTransform","value":"return this.completedContent;"}],"source":"[email protected]"}},"events":{"additionals/completedContent/binding/onWriteTransform":["return this.completedContent;"],"onRender":["this.additionals.completedContent = this.completedContent;"]}}]}}