j-DynamicValueList

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Questo componente è un componente molto speciale. può mantenere i valori per esempio Number e allo stesso tempo può rendere un altro leggibile text.Questo componente viene ottimizzato per l'uso dinamico, quindi deve essere collegato ad un altro componente o parte.

Configurazione:

Icon icon {String} per l'etichetta, ad esempio casa, cog, ecc.
L’etichetta label {String} (contenuto predefinito HTML)
L'icona di icon2 {String} nella casella destra, ad esempio casa, cog, ecc. (default: angle-down)
placeholder {String} aggiunge un testo di localizzazione
disabled {Boolean} disabilita questo componente
find {String} important collegamento a function(el, next(value)) per legare un nuovo valore
read {String} un collegamento a function(array_of_values, next(array_response)) per legare una text leggibile
url {String} cerca di collegare un valore tramite AJAX(), l'argomento {0} nell'URL viene sostituito dal valore
Il modello html {String} Tangular per rendere un valore (default: {{ name }})
remap {String} La funzione di rimborso (default) nullIl esempio: value.length ? value[0] : null
required {Boolean} permette “necessario” (default: false)
bind {String} un percorso per il metodo o variabile in cui verrà collegato il valore caricato (opzionale)
dirsource {String} un collegamento al metodo function(search_string, next(items_arr)) o NEW: può contenere URL per la ricerca nel modulo GET /api/partners/?q={0}
dircustom {String/Boolean} può contenere un percorso a funzione(val, next(new_val)) o può essere Boolean.Questa opzione può consentire l'aggiunta di un valore personalizzato (valore non definito nella fonte dati)
dirrender {String} un percorso a function(item, text) (deve essere restituito HTML per j-Directory), questa funzione può influenzare l'elenco degli articoli in j-Directory
dirminwidth {Number} una larghezza minima per j-Directory, (default: 200)
dirmaxwidth {Number} a larghezza massima per j-Directory
dirplaceholder {String} per il sito di j-Directory
dirempty {String} aggiunge un campo vuoto per j-Directory
dirkey {String} un nome chiave per la lettura del testo in dirsource (default: name)
dirvalue {String} un nome chiave per la lettura del valore in dirsource (default: id)
key {String} un nome chiave primario (default: un valore da dirvalue)
NEW tapi {Boolean} consente di chiamare TAPI() insteadof AJAX() (default: falso)

Uso di Ajax

Se il value Si cambierà il componente AJAX Chiamate automaticamente. il server deve rispondere con Array.

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

Uso in linea

Se il value viene modificato, allora il componente esegue config.exec per ottenere un testo leggibile di un valore.

<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>

Utilizzare con <ui-component name="dynamicvaluelist">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>