
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.'
{up csv2table=emplacement-fichier}
2/ le contenu est saisi entre les shortcodes
{up csv2table}
article 1;5€
"article 2";25€
{/up csv2table}
- 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 |
---|---|
lorem-place | 30 December 2024 |
media-audio ~ fichier(s) audio en HTML5 | 7 June 2024 |
media-video ~ vidéo en HTML5 | 12 September 2023 |
random ~ choix aléatoire | 25 September 2023 |
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 | ![]() |
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 | ![]() |
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 | ![]() |
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 | ![]() |
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 | ![]() |
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 | ![]() |
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 | ![]() |
Footer-1 | Footer-2 | Footer-3 |
Options webmaster
🆙 fichier custom/prefs.iniupactionslist (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)