Gestionnaire JSON - Plusieurs source de donnée afin de générer un tableau de donné
- Exemple principal
- Plusieurs source de donnée afin de générer un tableau de donné
Note technique:
- Le plugiciel data JSON
data-wb-json
dois être défini sur l'élément<table>
du tableau. - Les liens (URLs) configuré dans le gestionnaire JSON doit référer à un tableau JSON (array), sinon le contenu ne pourra pas être fusionné (concatenated)
L'exemple suivant fusionné deux fois la même source de donnée. Le résultat obtenue est un duplicata de chaque ligne.
Nom | Adresse | Courriel |
---|
[[num]] [[rue]], [[ville]], [[codep]] | adresseCourriel |
Code source
<div data-wb-jsonmanager='{
"url": [
"../wb-data-json/demo/data-fr.json#/listeAdresses",
"../wb-data-json/demo/data-fr.json#/listeAdresses"
],
"name": "source-fusionné"
}'></div>
<!-- data-wb-json doit être définie sur le "table" element -->
<table class="table wb-tables" data-wb-json='{
"url": "#[source-fusionné]",
"source": "#tbl3",
"mapping": [
{ "selector": "a", "value": "/nom" },
{ "selector": "a", "value": "/homeUrl", "attr": "href" },
{ "selector": ".adresseRurale", "value": "/num", "placeholder": "[[num]]" },
{ "selector": ".adresseRurale", "value": "/rue", "placeholder": "[[rue]]" },
{ "selector": ".adresseRurale", "value": "/ville", "placeholder": "[[ville]]" },
{ "selector": ".adresseRurale", "value": "/codePostal", "placeholder": "[[codep]]" },
{ "selector": ".courriel", "value": "/courriel", "attr": "href", "placeholder": "adresseCourriel@example.com" },
{ "selector": ".courriel", "value": "/courriel" }
]
}'>
<caption>Connection avec le plugiciels d'amélioration des tableaux <code>wb-tables</code></caption>
<thead>
<tr>
<th>Nom</th>
<th>Adresse</th>
<th>Courriel</th>
</tr>
</thead>
<tbody></tbody>
</table>
<template id="tbl3">
<table>
<tr>
<td><a href=""></a></td>
<td>
<span class="adresseRurale">[[num]] [[rue]], [[ville]], [[codep]]</span>
</td>
<td><a class="courriel" href="mailto:adresseCourriel@example.com">adresseCourriel</a></td>
</tr>
</table>
</template>
Détails de la page
- Date de modification :