j-DynamicValueList

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Този компонент е много специален компонент. Той може да запази стойности, например Number и в същото време той може да направи друг четещ text. Този компонента е оптимизиран за динамична употреба, така че трябва да бъде свързан с друг компонент или част.

Конфигуриране:

icon {String} икона за етикета, например къща, ког и т.н.
label {String} етикет (предварително е HTML съдържание)
Икона на icon2 {String} в дясната кутия, например къща, ковчег и т.н. (предварително: angle-down)
placeholder {String} добавя текст на мястото
disabled {Boolean} деактивира този компонент
find {String} important връзка към function(el, next(value)) за обвързване на нова стойност
read {String} е връзка към function(array_of_values, next(array_response)) за свързване на прочетена text
url {String} се опитва да свърже стойност чрез AJAX(), аргументът {0} в URL се заменя с стойността
html {String} Tangular шаблон за представяне на стойност (предварително: {{ name }})
remap {String} Функция за поддръжка (дефолт: nullПримерът е: value.length ? value[0] : null
required {Boolean} позволява „необходимо“ (предварително: false)
bind {String} - път към метода или променлива, където ще бъде свързана натоварена стойност (опционално)
dirsource {String} е линк към метода function(search_string, next(items_arr)) или NEW: може да съдържа URL за търсене във формата на GET /api/partners/?q={0}
dircustom {String/Boolean} може да съдържа път към функцията(val, next(new_val)) или може да бъде Boolean. тази опция може да позволи добавяне на персонализирана стойност (цена, която не е дефинирана в източника на данни)
dirrender {String} пътят към function(item, text) (може да се върне HTML за j-Directory), тази функция може да повлияе на списъка с елементи в j-Directory
dirminwidth {Number} Минимална широчина за j-DirectoryЗадължително е: 200)
dirmaxwidth {Number} Максимална широчина за j-Directory
dirplaceholder {String} Местоположение за j-Directory
dirempty {String} добавя празно поле за j-Directory
dirkey {String} е ключово име за четене на текст в пряк източник (предварително: name)
dirvalue {String} е ключово име за четене на стойност в източник (предварително: id)
key {String} е основно ключово име (предварително: стойност от dirvalue)
NEW tapi {Boolean} позволява повикване на TAPI() insteadof AJAX() (дефолт: фалшив)

Използване на AJAX

Ако е value След това ще се променят компонентите. AJAX Изпратете се автоматично. сървърът трябва да отговори с Array.

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

Интерактивна употреба

Ако value се променя, тогава компонентът изпълнява config.exec за получаване на честен текст от стойност.

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

Използвайте го с <ui-component name="dynamicvaluelist">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>