j-TableGrid

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

El componente crea una cuadrícula de tabla simple (compuesta por elementos div) dividida por un borde simple que puede modificar.

Configuración:

count {Number} un recuento predeterminado de elementos por fila
countxs {Number} elementos por fila para visualización móvil
countsm {Number} elementos por fila para pantalla pequeña
countmd {Number} elementos por fila para visualización mediana
countlg {Number} elementos por fila para una pantalla grande
parent {String} para obtener el tamaño (predeterminado: window)
margin {Number} un margen vertical (predeterminado: 0)
scrollbar {Boolean} habilita la barra de desplazamiento personalizada (predeterminado: false)
fill {Boolean} llena la cuadrícula con filas vacías. Es necesario definir row y scrollbar.
row {Number} una altura de fila predeterminada para todas las pantallas (predeterminado: 0)
rowxs {Number} una altura de fila predeterminada para visualización móvil (predeterminado: 0)
rowsm {Number} una altura de fila predeterminada para pantallas pequeñas (predeterminado: 0)
rowmd {Number} una altura de fila predeterminada para visualización media (predeterminado: 0)
rowlg {Number} una altura de fila predeterminada para pantallas grandes (predeterminado: 0)
scrolltop {Boolean} se desplaza hacia la parte superior después de cambiar los datos (predeterminado: true)

Clases:

ui-tablegrid-bl significa borde izquierdo
ui-tablegrid-bt significa borde superior
ui-tablegrid-first primer elemento de la fila
ui-tablegrid-last último elemento de la fila
ui-tablegrid-empty artículo vacío

Úselo con <ui-component name="tablegrid">. 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

<div style="width:500px;padding:10px">
	<ui-component name="tablegrid" path="items" config="count:3" style="border:1px solid #EBECF2">
		<script type="text/html">
			<div style="padding:20px 0;text-align:center">{{ value.name }}</div>
		</script>
		<script type="text/html">
			<div style="padding:20px 0;text-align:center" class="b">Optional: empty</div>
		</script>
	</ui-component>
</div>
<script>
	var items = [{ name: 'Total.js' }, { name: 'SuperAdmin' }, { name: 'Code Editor' }, { name: 'jComponent' }];
</script>