j-DynamicValueList

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Este componente es un componente muy especial. Puede mantener valores, por ejemplo, Number y al mismo tiempo puede representar otro text legible. Este componente está optimizado para uso dinámico, por lo que debe vincularse con otro componente o pieza. Este componente funciona con matriz.

Configuración:

icon {String} icono de etiqueta, p. hogar, engranaje, etc.
Etiqueta label {String} (el valor predeterminado es contenido HTML)
Icono icon2 {String} en el cuadro derecho, p. inicio, engranaje, etc. (predeterminado: angle-down)
placeholder {String} agrega un texto de marcador de posición
disabled {Boolean} desactiva este componente
find {String} important enlace a function(el, next(value)) para vincular un nuevo valor
read {String} un enlace a function(array_of_values, next(array_response)) para vincular un text legible
url {String} intenta vincular un valor a través de AJAX(), el argumento {0} en la URL se reemplaza por el valor
html {String} Tangular plantilla para representar un valor (predeterminado: {{ name }})
remap {String} una función de reasignación (predeterminada: null), ejemplo: value.length ? value[0] : null
required {Boolean} habilita "requerido" (predeterminado: false)
bind {String} una ruta al método o variable donde se vinculará el valor cargado (opcional)
dirsource {String} un enlace al método function(search_string, next(items_arr)) o NEW: puede contener una URL para búsqueda en el formulario GET /api/partners/?q={0}
dircustom {String/Boolean} puede contener una ruta a la función (val, siguiente (nuevo_val)) o puede ser booleana. Esta opción puede permitir agregar un valor personalizado (valor no definido en la fuente de datos)
dirrender {String} una ruta a function(item, text) (debe devolver HTML para j-Directory), esta función puede afectar la lista de elementos en j-Directory
dirminwidth {Number} un ancho mínimo para j-Directory, (predeterminado: 200)
dirmaxwidth {Number} un ancho máximo para j-Directory
dirplaceholder {String} un marcador de posición para j-Directory
dirempty {String} agrega un campo vacío para j-Directory
dirkey {String} un nombre clave para leer texto en dirsource (predeterminado: name)
dirvalue {String} un nombre clave para leer el valor en dirsource (predeterminado: id)
key {String} un nombre de clave principal (predeterminado: un valor de dirvalue)
NEW tapi {Boolean} permite llamar a TAPI() en lugar de AJAX() (predeterminado: falso)

uso de AJAX

Si se cambiará value, el componente realizará la llamada AJAX automáticamente. El servidor debe responder con Array.

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

Uso en línea

Si se cambiará value, el componente realiza config.exec para obtener un texto legible de un valor.

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

Úselo con <ui-component name="dynamicvaluelist">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>