j-DynamicValueList

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Acest component este un component foarte special. poate păstra valori, de exemplu Number și în același timp poate face un alt text. Acest componentă este optimizat pentru utilizare dinamică, astfel încât trebuie să fie conectat la un alt component sau parte.

Configurarea:

Iconul icon {String} pentru eticheta de exemplu, casa, cog etc.
Etichetă label {String} (default este conținutul HTML)
Iconul icon2 {String} din caseta dreaptă, de exemplu, casa, coșul etc. (default: angle-down)
placeholder {String} adăuga un text
disabled {Boolean} dezactiva acest component
find {String} important link la function(el, next(value)) pentru a lega o nouă valoare
read {String} este un link la function(array_of_values, next(array_response)) pentru a lega o lectură text
url {String} încearcă să conecteze o valoare prin AJAX(), argumentul {0} în URL este înlocuit cu valoarea
html {String} Tangular pentru a oferi o valoare (default: {{ name }})
remap {String} Funcţia de remap (default) nullExemplul este: value.length ? value[0] : null
required {Boolean} permite „required” (default: false)
bind {String} este o cale către metoda sau variabilă unde va fi legată valoarea încărcată (opțional)
dirsource {String} un link la metoda function(search_string, next(items_arr)) sau NEW: poate conține URL-ul pentru căutare în formularul GET /api/partners/?q={0}
dircustom {String/Boolean} poate conține o cale de funcționare(val, următor(new_val)) sau poate fi Boolean. Această opțiune poate permite adăugarea unei valori personalizate (vale nu sunt definite în sursa de date)
dirrender {String} o cale la function(item, text) (trebuie să se întoarcă HTML pentru j-Directory), această funcție poate afecta lista de elemente din j-Directory
dirminwidth {Number} o lățime minimă pentru j-Directory, (default: 200)
dirmaxwidth {Number} o lățime maximă pentru j-Directory
dirplaceholder {String} un locator pentru j-Directory
dirempty {String} adăuga un câmp gol pentru j-Directory
dirkey {String} este un nume cheie pentru citirea textului din sursa de bază (default: name)
dirvalue {String} este un nume cheie pentru citirea valorii în sursa directă (default: id)
key {String} este un nume cheie (default: o valoare de la dirvalue)
NEW tapi {Boolean} permite apelarea la TAPI() insteadof AJAX() (default: false)

Utilizare Ajax

În cazul în care value Se va schimba, apoi componenta se va AJAX Încercați să faceți apeluri automat. serverul trebuie să răspundă Array.

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

Utilizare inline

În cazul în care value Se va schimba, apoi componenta se va config.exec Pentru a obține un text de valoare citibilă.

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

Utilizați-l cu <ui-component name="dynamicvaluelist">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>