j-DynamicValueList

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Komponent ten jest bardzo specjalnym składnikiem. może zachować wartości np. Number i w tym samym czasie może uczynić inny czytelny text. Komponent jest zoptymalizowany do dynamicznego użytku, więc musi być połączony z innym składnikiem lub częścią.

Konfiguracja:

Ikony icon {String} dla etykiet np. dom, cog itp.
etykieta label {String} (default jest treścią HTML)
Ikonę icon2 {String} w prawym pudełku np. dom, cog itp. (default: angle-down)
placeholder {String} dodaje tekst
disabled {Boolean} odwołuje się do tego składnika
find {String} important link do function(el, next(value)) dla wiążenia nowej wartości
read {String} link do function(array_of_values, next(array_response)) dla wiązania czytelnego text
url {String} próbuje wiązać wartość za pośrednictwem AJAX(), argument {0} w adresie URL jest zastąpiony przez wartość
Wzór html {String} Tangular do renderowania wartości (default: {{ name }})
remap {String} Funkcja Remap (default) nullNa przykład: value.length ? value[0] : null
required {Boolean} umożliwia „potrzebne” (default: false)
bind {String} - droga do metody lub zmiennej, w której zostanie powiązana wartość obciążona (opcjonalna)
dirsource {String} link do metody function(search_string, next(items_arr)) lub NEW: może zawierać adres URL do wyszukiwania w formularzu GET /api/partners/?q={0}
dircustom {String/Boolean} może zawierać ścieżkę do funkcji(val, następny(new_val)) lub może być Boolean. ta opcja może umożliwić dodanie wartości dostosowanej (wartość nie jest zdefiniowana w źródle danych)
dirrender {String} jest ścieżką do function(item, text) (musi powrócić HTML dla j-Directory), ta funkcja może wpływać na listę elementów w j-Directory
dirminwidth {Number} minimalna szerokość dla j-Directory, (default: 200)
dirmaxwidth {Number} Maksymalna szerokość dla j-Directory
dirplaceholder {String} miejsce dla j-Directory
dirempty {String} dodaje puste pole do j-Directory
dirkey {String} jest nazwą kluczową do czytania tekstu w źródle bezpośrednim (default: name)
dirvalue {String} jest nazwą kluczową do odczytu wartości w zasobie bezpośrednim (default: id)
key {String} jest nazwą kluczową (default: wartość od dirvalue)
NEW tapi {Boolean} umożliwia wezwanie TAPI() insteadof AJAX() (default: fałszywy)

AJAX użycie

Jeśli w value Zmiana zostanie dokonana, a następnie składnik AJAX automatycznie. serwer musi odpowiadać Array.

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

Inline użytkowanie

Jeśli value zostanie zmieniony, element wykonuje config.exec w celu uzyskania czytelnego tekstu wartości.

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

Użyj go z <ui-component name="dynamicvaluelist">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>