j-DynamicValueList

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Denna komponent är en mycket speciell komponent. Det kan hålla värden till exempel Number och på samma sätt det kan göra en annan läsbar text.Denna komponent är optimerad för dynamisk användning, så den måste kopplas till en annan komponent eller del.

Konfigurera:

icon {String} ikon för etikett t.ex. hem, cog, etc.
label {String} etikett (default är HTML-innehåll)
icon2 {String}-ikonen i högerfönstret t.ex. hem, cog, etc. (default: angle-down)
placeholder {String} lägger till en platsinnehavartext
disabled {Boolean} inaktiverar denna komponent
find {String} important länk till function(el, next(value)) för att binde ett nytt värde
read {String} en länk till function(array_of_values, next(array_response)) för att binde en läsbar text
url {String} försöker knyta ett värde via AJAX(), argumentet {0} i URL ersätts av värdet
html {String} Tangular för att ge ett värde (default: {{ name }})
remap {String} En remapfunktion (default) nulloch exempel: value.length ? value[0] : null
required {Boolean} möjliggör ”nödvändigt” (default: false)
bind {String} en väg till metoden eller variabel där det laddade värdet kommer att bindas (alternativt)
dirsource {String} en länk till metoden function(search_string, next(items_arr)) eller NEW: kan innehålla URL för sökning i backoformuläret GET /api/partners/?q={0}
dircustom {String/Boolean} kan innehålla en väg till funktion(val, nästa(new_val)) eller kan vara Boolean.
dirrender {String} en väg till function(item, text) (du måste returnera HTML för j-Directory), denna funktion kan påverka listan över objekt i j-Directory
dirminwidth {Number} en minsta bredd för j-Directory, (default: 200)
dirmaxwidth {Number} Maximal bredd för j-Directory
dirplaceholder {String} en platsinnehavare för j-Directory
dirempty {String} lägger till ett tomt fält för j-Directory
dirkey {String} ett nyckelnamn för läsning av text i direktkälla (default: name)
dirvalue {String} ett nyckelnamn för läsning av värde i direktkälla (default: id)
key {String} ett primärt nyckelnamn (default: ett värde från dirvalue)
NEW tapi {Boolean} möjliggör att ringa TAPI() insteadof AJAX() (default: falsk)

Ajax användning

Om den value kommer att ändras och komponenten utförs AJAX automatiskt. server måste svara med Array.

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

Inline användning

Om value ändras gör komponenten config.exec för att få en läsbar text av ett värde.

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

Använd den med <ui-component name="dynamicvaluelist">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>