Un moyen rapide de saisir des données tabulaires,
mais aussi de mettre en forme des fichiers ou le résultat d'autres actions UP.'

🆙 csv2table : Conversion d'un contenu au format CSV en table

Cliquer pour lire la documentation

1/ le contenu est lu dans un fichier
{up csv2table=emplacement-fichier}
2/ le contenu est saisi entre les shortcodes
{up csv2table}
article 1;5€
"article 2";25€
{/up csv2table}
@author: LOMART @version: UP-1.6 @license: GNU/GPLv3 @tags: layout-static
  • csv2table: URL ou chemin et nom d'un fichier local
  • separator = ;: séparateur des colonnes
  • HTML: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (strip_tags)
  • model: nom de la classe modèle dans le fichier csv2table.css : noborder, line, blue, green

style de la table

  • class: classe(s) pour la table
  • style: style inline pour la table

style des colonnes

  • col-list: liste des colonnes utilisées. ex: 1,2,5 (v2.8)
  • col: alignement et largeur des colonnes sous la forme x-D-C5-100 pour rien-droite-centre 5%-100% (voir doc)
  • col-style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-6

style des lignes

  • color-contrast: couleur des lignes impaires. la couleur des lignes paires est à définir dans class ou style

Entête des colonnes

  • header: 0: pas de titre, 1: premiere ligne contenu, titre des colonnes format CSV
  • header-class: classe(s) pour la balise thead
  • header-style: style pour la balise thead

Pied des colonnes

  • footer: 0: pas de pied, 1: dernière ligne contenu, pied colonne
  • footer-class: classe(s) pour la balise tfoot
  • footer-style: style pour la balise tfoot

style et options secondaires

  • id: identifiant
  • css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)

Version 2.8 ajout option col-list et model noborder

Version 2.9 2 nouveaux modèles $primary et $secondary qui utilisent les couleurs définies dans la feuille de style de UP (voir color - informations sur les couleurs UP)

Un simple exemple

Ayant besoin d'un moyen rapide et lisible de saisir des tableaux en HTML, j'ai créé cette action.

Réf Description Prix
123 un super produit 25.30€
456 un autre; aussi bien 18.00€
TOTAL 43.30€
{up csv2table | model=green | header=1 | footer=1 | col=G10-90-D}
  Réf; Description;            Prix
  123; un [b]super[/b] produit;       25.30€
  456; "un autre; aussi bien"; 18.00€
  [2]TOTAL;                    43.30€
{/up csv2table}	

Le tableau est généré à partir de ce shortcode. Vous remarquerez que les données du tableau sont présentées de manière à faciliter la relecture et les corrections. Chaque ligne du tableau doit être sur une seule ligne avec des points virgules pour séparer les colonnes. Si le texte d'une colonne contient le séparateur, il suffit de le mettre comme entre guillemets comme il est d'usage pour le format CSV. Il est possible de fusionner plusieurs cellules de la même ligne (colspan), mais pas de la même colonne (rowspan)

Le shortcode qui encadre les données contient ces paramètres :

  • model green est une classe définie dans le fichier CSS de l'action
  • header et footer indique que la première et dernière ligne sont utilisées comme titre et pied de tableau
  • col permet d'indiquer rapidement les largeurs et justifications des colonnes. G10-90-D indique que la première colonne est justifiée à gauche avec une largeur de 10%, la deuxième à 90% et la dernière est alignée à droite

Version 1.8  Les données peuvent être saisies en utilisant le nouveau format 🆙 BB-Code by UP

Version 2.8 

  • Ajout d'une option col-list qui permet de sélectionner les colonnes à afficher. Il suffit d'indiquer le numéro d'ordre des colonnes (de 1 à n) séparé par des virgules
  • noborder: nouvelle classe pour l'option model pour un tableau sans aucune bordure. Utile pour partir de zéro pour créer son style.

Tous les paramètres

Pour montrer toutes les possibilités, je vais présenter les paramètres des 3 actions csv2table, csv2list et csv2def dans un unique tableau.

Rendez-vous à la fin du tableau pour le shortcode et les explications.


Paramètre Tbl List Def Commentaires
nom_action fic fic fic URL ou chemin et nom d'un fichier local
id ID qui sera attribuée à la balise principale de l'action
gestion des données
separator ; ; ; séparateur des colonnes. Chaque action a ses spécificités, voir sa documentation.
HTML pour contenu CSV: 0= aucun traitement, 1=affiche le code ou liste des tags conserves (strip_tags). O par défaut , sauf pour csv2list : b,a,span,strong,i,em,u,mark,small,img,code
style général
model nom de la classe modèle dans le fichier CSS de l'action.
class classe(s) pour la balise principale
style style inline pour la balise principale
css-head règles CSS définies par le webmaster (ajout dans le head). #ID est remplacé par l'ID réel
gestion et style colonnes
col alignement et largeur des colonnes sous la forme x-D-C5-100 (voir doc)
col-type vide toutes les colonnes, sinon position des colonnes affichées (de 1 à n). Exemple : 1,3
col-style-* style inline pour tous les blocs colonnes. sinon voir style-1 à style-6
gestion et style entête
header 0 par défaut: pas de titre, 1: premiere ligne du contenu, les titres des colonnes au format CSV
header-class classe(s) pour la balise thead
header-style style pour la balise thead
header-style-* style inline pour les entetes. sinon voir style-1 à style-6
gestion et style pied
footer 0 par défaut: pas de pied, 1: derniere ligne du contenu, le texte pour la dernière au format CSV
footer-class classe(s) pour la balise tfoot
footer-style style pour la balise tfoot
footer-style-* style inline pour tous les pieds de colonnes. sinon voir style-1 à style-6
spécifique csv2table
color-contrast couleur des lignes impaires. la couleur des lignes paires est à définir dans class ou style
spécifique csv2list
leaders points de conduite, 0 par defaut
leaders-color couleur des points de conduite
list-style code hexadecimal et couleur du caractère (bb,red ou 26BD,#F00)
bgcolor couleur de fond. #FFF par défaut
header-bgcolor couleur de fond du titre
footer-bgcolor couleur de fond de la dernière ligne
spécifique csv2def
flex-vgap espace vertical (px) entre les blocs dt/dd
flex-hgap espace horizontal (px) entre les blocs dt et dd
flex-term-width largeur en pourcentage de la colonne des termes
term-class classe(s) pour le bloc des termes
term-style style pour le bloc des termes
term-style-separator style pour séparer les différents termes
def-class classe(s) pour le bloc des definitions
def-style style pour le bloc des definitions
def-style-separator style pour séparer les differentes definitions

Le shortcode

Le code, avec seulement les premières lignes de données

{up table-par-lignes}
{up csv2table | model= blue
| header=Paramètre;Tbl;List;Def;[t-jaune tl]Commentaires 
| col=d-c-c-c-100
| col-style-1=font-weight:bold;white-space:nowrap
| css-head=#id.restables-clone tr td:nth-child(2)[text-align:left]td.st[background:yellowGreen;text-align:left !important]}
nom_action;     fic;  fic;  fic;   <strong>URL ou chemin et nom d'un fichier local</strong>
id;             [oui];[oui];[oui]; ID qui sera attribuée à la balise principale de l'action
[5st]gestion des données
separator;      "[b];";"[b];";"[b];"; séparateur des colonnes. Chaque action a ses spécificités. <mark>Voir sa documentation</mark>.
...

Les explications

en utilisant bien sûr l'action csv2table avec le "model=line"

ligne paramètre explication
1 up table-par-lignes on utilise une autre action de UP pour rendre le tableau responsive.
A partir de la version 1.6, UP analyse les shortcodes en commençant par les plus inclus. Cela permet, dans ce cas, de créer le code pour la table avec le shortcode enfant 'csv2table' puis de le transmettre au shortcode parent 'table-par-ligne' afin qu'il adapte ce code.
2 model l'appel de l'action avec le model de rendu bleu
3 header la première ligne ne contenant pas le titre, nous les spécifions directement dans le shortcode. [t-jaune tl] est le nom des classes standards de UP pour afficher le texte de la cellule en jaune et à gauche
4 col permet de définir la largeur et/ou la justification des colonnes. G ou L pour left, D ou R pour right, C pour center suivi de la largeur en pourcentage. Les infos pour chaque colonne sont séparées par un tiret. Pour ne pas spécifier de règle pour une colonne, il suffit de ne rien mettre ou mettre une valeur nulle. Exemple : x--0-c centre la 4ème colonne, les 3 précedentes étant non reconnues. Pour une question de relecture, je préfère la forme x-x-x-C
5 col-style-1 contient des règles CSS pour la 1ère colonne. ici, nous voulons le nom des paramètres en gras et sans retour à la ligne
6 css-head permet d'écrire un style directement dans le head de la page. Cette possibilité nous permet de corriger un effet non désiré lors du passage en responsive par table-par-lignes. Sur grand écran, le paramètre col centre la 2ème colonne, mais sur petit écran, c'est toutes les données qui sont dans cette colonne. #id.restables-clone tr td:nth-child(2)[text-align:left] y remédie en forçant une justification à gauche lors de la vue responsive (.restables-clone). #id sera remplacé par l'ID réel de l'instance de l'action afin de limiter la portée de cette règle. L'autre règle définit la classe 'st' qui sera utilisée ligne 9
7 une ligne de donnée simple. Notez la possibilité de mettre des balises HTML. Voir le paramètre HTML pour savoir comment gérer cette possibilité
8 si les données d'une colonne commencent par des crochets [], on considère qu'il s'agit des noms des classes pour la cellule. Sur cette ligne, [oui] est une classe CSS définie dans la feuille de style de l'action qui affiche la coche verte au milieu de la cellule : td.oui {background:url(img/oui.png) no-repeat center 8px}.
9 si le tag [..] commence par 2,3,4,5,6 , on considère que c'est le nombre de cellules sur lesquelles s'étend la cellule (colspan en HTML). [ 5 st] permet d'afficher un sous-titre en lieu et place des 5 colonnes avec les propriétés CSS définies pour la classe st (voir ligne 6 du shortcode).
10 nous devons indiquer que le séparateur est un point-virgule; Pour éviter qu'il soit pris pour une nouvelle colonne, nous le mettons entre guillemets. permet l'afficher en gras pour plus de visibilité.
11 et la suite sans oublier les shortcodes fermants

Origine et mise en forme des données

Fichier externe

Pour les exemples précédents, nous avons saisi le contenu entre les shortcodes.
Il est possible d'indiquer le chemin et le nom d'un fichier comme argument de l'action

Le shortcode :

{up csv2table=https://lomart.fr/images/doc/android-version.csv 
| model=green | style=width:auto 
| header= version Android; nom de code }

Le fichier brut :

2.3.3 – 2.3.7; Gingerbread
4.0.3 – 4.0.4; Ice Cream Sandwich 
4.1.x, 4.2.x et 4.3;Jelly Bean
4.4;KitKat
5.0 et 5.1;Lollipop
6.0;Marshmallow
7.0 et 7.1;Nougat
8.0 et 8.1;Oreo
9;Pie

Le résultat :

version Android nom de code
2.3.3 – 2.3.7 Gingerbread
4.0.3 – 4.0.4 Ice Cream Sandwich
4.1.x, 4.2.x et 4.3 Jelly Bean
4.4 KitKat
5.0 et 5.1 Lollipop
6.0 Marshmallow
7.0 et 7.1 Nougat
8.0 et 8.1 Oreo
9 Pie

Dans le cas d'un fichier contenant du code HTML, il est possible de le nettoyer avec l'option HTML

  • html=0 : le code HTML est affiché. Les balises sont visibles.
  • html=1 : aucun traitement, le code est exécuté
  • html=liste balise : toutes les balises seront supprimées à l'exclusion de celles passées en paramètres sous la forme a,img,...

Pour les utilisateurs de Mac avec Excel, il faut utiliser l'enregistrement sous CSV UTF8 et même s'il indique que le séparateur sera une virgule, dans le paramètre de csv2list utiliser "separator=;"

Action UP

Les actions jcontent_... peuvent produire du contenu formaté qui peut être repris par csv2table

action date création
meteo-concept ~ des prévisions sur mesure 18 December 2022
gotop ~ bouton pour retour haut de page 18 December 2022
ajax-view 1 October 2022
file-office-view 15 September 2022

La liste des 4 dernières action de UP est obtenu par les shortcodes ci-dessous que je vous laisse analyser.
L'important étant le point-virgule entre les mots-clés pour définir le contenu renvoyé.

{up csv2table | model= blue | col=g-c | header=action;date création}
   {up jnews=8 | maxi=4 | main-tag=0 | item-tag=0}
      {title};{date-crea}
   {/up jnews=8}
{/up csv2table}

Code style dans contenu

Il est possible de styler classiquement le contenu à l'aide de balise HTML : mon texte en <strong>gras</strong>

Pour agir globalement sur la cellule, vous pouvez indiquer la ou les classes à appliquer sous la forme : [nom_classe(s)]contenu au tout début du texte. Vous pouvez utiliser toutes les classes disponibles : celles de UP, celles de votre template et celles de l'action. A l'heure où j'écris cette démo, l'action csv2table propose ces classes :

oui non red green orange blue

Vous pouvez très facilement ajouter les vôtres dans la feuille de style ou dans le paramètre css-head.

Mise en forme de la table

L'aspect général est donné par le paramètre model.
Ci-dessous les modèles (classes) fournis dans le fichier csv2table.css.

model non spécifié

title-1 title-2 title-3
Line-1-Col-1 Line-1-Col-2 Line-1-Col-3
Line-2-Col-1 Line-2-Col-2 Line-2-Col-3
Line-3-Col-1 Line-3-Col-2 Icône hamburger pour un tutoriel Firefox réalisé par Sorgin Informatique.
Footer-1 Footer-2 Footer-3

model=blue

title-1 title-2 title-3
Line-1-Col-1 Line-1-Col-2 Line-1-Col-3
Line-2-Col-1 Line-2-Col-2 Line-2-Col-3
Line-3-Col-1 Line-3-Col-2 Icône hamburger pour un tutoriel Firefox réalisé par Sorgin Informatique.
Footer-1 Footer-2 Footer-3

model=green

title-1 title-2 title-3
Line-1-Col-1 Line-1-Col-2 Line-1-Col-3
Line-2-Col-1 Line-2-Col-2 Line-2-Col-3
Line-3-Col-1 Line-3-Col-2 Icône hamburger pour un tutoriel Firefox réalisé par Sorgin Informatique.
Footer-1 Footer-2 Footer-3

model=line

title-1 title-2 title-3
Line-1-Col-1 Line-1-Col-2 Line-1-Col-3
Line-2-Col-1 Line-2-Col-2 Line-2-Col-3
Line-3-Col-1 Line-3-Col-2 Icône hamburger pour un tutoriel Firefox réalisé par Sorgin Informatique.
Footer-1 Footer-2 Footer-3

model=noborder v2.8

title-1 title-2 title-3
Line-1-Col-1 Line-1-Col-2 Line-1-Col-3
Line-2-Col-1 Line-2-Col-2 Line-2-Col-3
Line-3-Col-1 Line-3-Col-2 Icône hamburger pour un tutoriel Firefox réalisé par Sorgin Informatique.
Footer-1 Footer-2 Footer-3

model=primary v2.9

title-1 title-2 title-3
Line-1-Col-1 Line-1-Col-2 Line-1-Col-3
Line-2-Col-1 Line-2-Col-2 Line-2-Col-3
Line-3-Col-1 Line-3-Col-2 Icône hamburger pour un tutoriel Firefox réalisé par Sorgin Informatique.
Footer-1 Footer-2 Footer-3

model=secondary v2.9

title-1 title-2 title-3
Line-1-Col-1 Line-1-Col-2 Line-1-Col-3
Line-2-Col-1 Line-2-Col-2 Line-2-Col-3
Line-3-Col-1 Line-3-Col-2 Icône hamburger pour un tutoriel Firefox réalisé par Sorgin Informatique.
Footer-1 Footer-2 Footer-3

Options webmaster

🆙 fichier custom/prefs.ini
Pour info, cette page utilise 26 action(s) :
upactionslist (1) readmore (1) span (2) tabslide (1) toc (1) csv2table (13) modal (2) listup (1) table-par-lignes (1) file-view (1) jnews (1) jcontent-info (1)