j-DataSource

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Le composant charge les données de la source externe via la méthode AJAX() et lie la valeur selon le config.path.

Configuration :

path {String} required un chemin où la valeur sera définie
url {String} en option, une adresse URL pour obtenir des données
delay {Number} en option, un délai (en millisecondes) pour l'obtention des données (par défaut : 0)

Bon à savoir :

config.path = '#codelist' définit une valeur dans les listes de codes DEF.cl.codelist
config.path = '%codelist' définit une valeur comme temporaire
config.path = '?.path définit une valeur en fonction du chemin du plugin
config.path = 'absolute.path définit une valeur en fonction du chemin

Puis-je utiliser une adresse URL dynamique ?

Oui, vous pouvez utiliser <ui-component name="datasource" path="..." pour l'obtention dynamique de données.

<ui-component name="datasource" path="?.urlcities" config="path:#cities"></ui-component>

Comment puis-je modifier les données avant de les lier ?

<ui-component name="datasource" config="url:https://www.yourdomain.com/api/countries/;path:#countries">
	<script type="text/plain">
		var output = [];
		for (var item of value)
			output.push({ id: item.Id, name: item.Name });
		return output;
	</script>
</ui-component>

Utilisez-le avec <ui-component name="datasource">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

example.html

<ui-component name="datasource" config="url:https://www.totaljs.com/dashboard.json;path:#mycodelist">
	<script type="text/plain">
		return value.children;
	</script>
</ui-component>

<ui-bind path="#mycodelist" config="html pre:JSON.stringify(value, null, '  ')" class="block">
	<pre></pre>
</ui-bind>