j-DynamicValueList

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

Ce composant est un composant très spécial. Il peut conserver des valeurs par exemple Number et en même temps rendre un autre text lisible. Ce composant est optimisé pour une utilisation dynamique, il doit donc être lié à un autre composant ou pièce. Ce composant fonctionne avec un tableau.

Configuration :

Icône icon {String} pour l'étiquette, par ex. maison, rouage, etc.
Étiquette label {String} (la valeur par défaut est le contenu HTML)
Icône icon2 {String} dans la case de droite, par ex. maison, rouage, etc. (par défaut : angle-down)
placeholder {String} ajoute un texte d'espace réservé
disabled {Boolean} désactive ce composant
Lien find {String} important vers function(el, next(value)) pour lier une nouvelle valeur
read {String} un lien vers function(array_of_values, next(array_response)) pour lier un text lisible
url {String} tente de lier une valeur via AJAX(), l'argument {0} dans l'URL est remplacé par la valeur
Modèle html {String} Tangular pour le rendu d'une valeur (par défaut : {{ name }})
remap {String} une fonction de remappage (par défaut : null), exemple : value.length ? value[0] : null
required {Boolean} active "obligatoire" (par défaut : false)
bind {String} un chemin vers la méthode ou la variable où sera liée la valeur chargée (facultatif)
dirsource {String} un lien vers la méthode function(search_string, next(items_arr)) ou NEW : peut contenir l'URL de recherche sous la forme GET /api/partners/?q={0}
dircustom {String/Boolean} peut contenir un chemin vers function(val, next(new_val)) ou peut être booléen. Cette option peut permettre l'ajout d'une valeur personnalisée (valeur non définie dans la source de données)
dirrender {String} un chemin vers function(item, text) (doit renvoyer du HTML pour j-Directory), cette fonction peut affecter la liste des éléments dans j-Directory
dirminwidth {Number} une largeur minimale pour j-Directory, (par défaut : 200)
dirmaxwidth {Number} une largeur maximale pour j-Directory
dirplaceholder {String} un espace réservé pour j-Directory
dirempty {String} ajoute un champ vide pour j-Directory
dirkey {String} un nom de clé pour la lecture du texte dans le répertoire (par défaut : name)
dirvalue {String} un nom de clé pour la lecture de la valeur dans le répertoire (par défaut : id)
key {String} un nom de clé primaire (par défaut : une valeur de dirvalue)
NEW tapi {Boolean} permet d'appeler TAPI() au lieu de AJAX() (par défaut : false)

Utilisation d'AJAX

Si le value est modifié, le composant effectue automatiquement l'appel AJAX. Le serveur doit répondre avec Array.

<ui-component name="dynamicvaluelist" path="path.to.property" config="url:/users/?id={0};dirsource:GET /users/?search={0}"></ui-component>

Utilisation en ligne

Si le value doit être modifié, le composant exécute config.exec pour obtenir un texte lisible d'une valeur.

<ui-component name="dynamicvaluelist" path="path.to.property" config="read:my_function"></ui-component>

<script>
	function my_function(arr, next) {
		// the component automatically pairs "response" with "arr"
		next([{ id: 1, name: 'This text will be displayed as a value '}]);
	}
</script>

Utilisez-le avec <ui-component name="dynamicvaluelist">. 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="directory"></ui-component>

<div class="m" style="width:300px">
	<ui-component name="dynamicvaluelist" path="common.users" config="read:getusers;dirsource:findusers;placeholder:Add user">Users</ui-component>
</div>

<script>
	var names = [];
	names.push({ id: '1', name: 'Denis' });
	names.push({ id: '2', name: 'Peter' });
	names.push({ id: '3', name: 'Tomáš' });
	names.push({ id: '4', name: 'Lucka' });
	names.push({ id: '5', name: 'Lenka' });

	function getusers(value, next) {
		var temp = [];
		for (var i = 0; i < value.length; i++) {
			var user = names.findItem('id', value[i]);
			user && temp.push(user);
		}
		next(temp);
	}

	function findusers(search, next) {
		var items = names.slice(0);
		next(items);
	}

</script>