J'ai créé cette action pour répondre à une demande du forum pour modifier la couleur de fond en fonction du contenu des données lues par l'action data2table.
Plutôt qu'une modification du code de l'action data2table, j'ai préféré créer une action à part qui pourra être utilisée partout où le contenu est créé par des plugins de contenus.
{up replace=ancien:nouveau, ...}- replace: liste des remplacements sous la forme ancien:nouveau, ... BBcode admis
- sep-item: séparateur entre les groupes ancien:nouveau. virgule par défaut
- sep-oldnew = :: séparateur entre les parties recherche et remplace. 2 points par défaut
- tags: vide: conserve les balises autorisées par défaut, liste (a,b,p) ou en plus des balises par défaut (+a,b,p)
- regex: 1 si la partie recherche est une expression régulière
Un exemple simple
Les shortcodes
{up replace=TERRIEUR:[b class="t-red"]TERRIEUR[/b]}
{up data2table=images/actions-demo/data/select.json}
{/up replace}L'argument de replace est le terme recherché, un séparateur deux-points et le texte de remplacement. Le bbcode est accepté.
Le résultat
| id | prenom | nom |
|---|---|---|
| 1 | Alain | TERRIEUR |
| 2 | Alex | TERRIEUR |
| 3 | Alain | PROVISTE |
| 4 | Anne | ANAS |
| 5 | Kelly | DIOTE |
Les recherches simples ne sont pas sensible aux minuscules/majuscules.
Un autre exemple
Les shortcodes
{up replace=
[td]Alain[/td]:[td class="bg-jaune"]Alain[/td],
TERRIEUR:[b class="t-red"]TERRIEUR[/b]
| tags=td,b
}
{up data2table=images/actions-demo/data/select.json}
{/up replace}Le résultat
| id | prenom | nom |
|---|---|---|
| 1 | Alain | TERRIEUR |
| 2 | Alex | TERRIEUR |
| 3 | Alain | PROVISTE |
| 4 | Anne | ANAS |
| 5 | Kelly | DIOTE |
Il est possible d'avoir plusieurs paires "recherche/remplacement" en les séparant par une virgule. Pour faciliter la relecture, des sauts de ligne sont permis.
Comme la balise TD qui n'est pas reconnu par le bbcode, nous définissons la liste des balises utilisées avec l'option tags.
La balise b étant connue, il était possible d'ajouter la balise TD aux balises connues avec tags=+td
Avec des expressions régulières
Nous voulons mettre sur fond bleu toutes les personnes dont le prénom commence par un A.
Les shortcodes
{up replace=#[td](A.*)[/td]#U : [td class="bg-bleuPale"]$1[/td]
| regex | tags=td
}
{up data2table=images/actions-demo/data/select.json}
{/up replace}Le résultat
| id | prenom | nom |
|---|---|---|
| 1 | Alain | TERRIEUR |
| 2 | Alex | TERRIEUR |
| 3 | Alain | PROVISTE |
| 4 | Anne | ANAS |
| 5 | Kelly | DIOTE |
L'argument principal se décompose en 2 parties :
- la chaîne recherchée
#[td](A.*)[/td]#U- # est le délimiteur de la regex
- [td] et [/td] permettent de limiter la recherche au contenu complet d'une cellule
- (A.*) recherche et capture toutes les cellules commençant par un A
- #U est le délimiteur avec l'option de recherche non gourmande
- la chaine de remplacement
[td class="bg-bleuPale"]$1[/td]- la balise ouvrante td avec la classe pour avoir un fond bleu
- $1 est la variable capturée par (A.*), soit le contenu de la cellule sans les balises
- la balise fermante td
Le problème est que toutes les cases commençant par A sont affectées.
Aucune solution n'est possible au niveau de l'action replace, il faut mieux cibler les chaines recherchées. Je vous propose une solution ci-dessous.
Les shortcodes
{up replace=#[td class="prenom"](A.*)[/td]#U : [td class="bg-bleuPale"]$1[/td]
| regex | tags=td}
{up data2table=images/actions-demo/data/select.json
| col-class=prenom:prenom
| css-head=.prenom[background-color:yellow]
}
{/up replace}Le résultat
| id | prenom | nom |
|---|---|---|
| 1 | Alain | TERRIEUR |
| 2 | Alex | TERRIEUR |
| 3 | Alain | PROVISTE |
| 4 | Anne | ANAS |
| 5 | Kelly | DIOTE |
La modification principale concerne l'action data2table. On affecte une classe à toutes les cellules de la colonne "prenom" avec l'option col-class. Pour visualiser l'effet, j'ajoute une règle avec css-head pour colorer le fond de la colonne en jaune.
Il suffit ensuite de modifier la chaine recherchée en ajoutant la classe prenom.
Étant lue dans le script de l'action, elle a toujours les dernières informations
span (1) upactionslist (1) flexauto (4) replace (4) data2table (4) div (1) html (1) text-blink (1) jcontent-info (1) tabslide (1) toc (1)