j-Children

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

El componente representa los elementos que se pueden arrastrar como un árbol sin posibilidad de colapsar. La fuente de datos debe ser Object Array en el formato: { id: String, children: [ ], YOUR PROPERTIES }, { ... }.

Configuración:

empty {String} un texto vacío (predeterminado: null)
onchange {String} opcional, un enlace al function(arr) - captura elementos cuando se recurre

Plantilla:

{{ level }} contains a level (number)
{{ value }} contains an item (object)

Intente comprender la funcionalidad del ejemplo.

Es bueno saberlo:

component.items {Object} contiene todas las referencias de todos los artículos en el formulario items[item.id] = item.
component.parents {Object} contiene todas las referencias de todos los padres en el formulario parents[item.id] = parent.

Úselo con <ui-component name="children">. 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="children" path="mynav">
	<script type="text/html">
		<div style="background:#F0F0F0;padding:8px;border-radius:var(--radius);margin-bottom:2px;margin-left:{{ level * 30 }}px">{{ value.name }}</div>
	</script>
</ui-component>

<script>
	var mynav = [{ id: '1', name: 'Level 1', children: [{ id: '1-1', name: 'Level 1-1' }, { id: '1-2', name: 'Level 1-2', children: [{ id: '1-2-1', name: 'Level 1-2-1' }, { id: '1-2-2', name: 'Level 1-2-2' }, { id: '1-2-3', name: 'Level 1-2-3' }] }] }, { id: '2', name: 'Level 2' }];
</script>