j-Grid

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

se necesita sistema de rejilla bootstrap

Fuente de datos debe contener:

{
    items: [{ name: 'Row 1' }, { name: 'Row 2' }, ...] // items
    page: 1,    // current pages
    pages: 30,  // count of pages
    limit: 5,   // items limit per page
    count: 150  // count of items in DB
}

Configuración:

filter {Booleano} muestra un filtro (opcional, predeterminado: true)
filterlabel {String} un marcador de posición predeterminado para todos los filtros (opcional)
external {Booleano} es una fuente de datos externa (carga de datos dinámica) (opcional, predeterminado: false)
pluralizepages {String} pluralización para páginas (opcional, predeterminado: # pages,# page,# pages,# pages)
pluralizeitems {String} pluralización para elementos (opcional, predeterminado: # items,# item,# items,# items)
exec {String} un enlace a function(type, filter, sort, page), se evalúa si el grid realiza algunas operaciones
padding {Número} relleno de altura (opcional, predeterminado: 0)
autosize {Booleano} habilita el tamaño automático de altura completa (opcional, predeterminado true)
boolean {String} valores para filtrar valores booleanos (opcional, predeterminado: true|on|yes)
pagination {Booleano} muestra el panel de paginación (opcional, predeterminado: false)
init {Función} una función de inicio para, por ejemplo. columnas personalizadas
checked {Función} si las filas contendrán <input type="checkbox, esta función se evaluará cuando se marque la casilla de verificación

Propiedades de la columna:

name {String} un nombre de campo en el objeto
text {String} una etiqueta de columna
title {String} información sobre herramientas de columna (opcional)
size {Número} un ancho de columna: 1 pequeño, 2 mediano, 3 grande, 4 muy grande (opcional, predeterminado 1)
size {Cadena} un ancho de columna en píxeles, el valor debe contener px, p. 20px
filter {String/Boolean} un marcador de posición para el filtro o boolean puede desactivar el filtro para esta columna (opcional)
format {Cadena/Número} para formatear valores (string para fecha, number para números)
background {String} un color de fondo (opcional)
align {String} puede ser center o right (opcional, predeterminado: left)
template {String} puede ser una plantilla Tangular y el modelo es el objeto completo de la fila
render {Cadena/Función(valor, columna, fila)} una representación personalizada, string se evalúa como una función de flecha
header {Cadena/Función(columna)} una representación personalizada del encabezado, string se evalúa como una función de flecha
sort {Booleano} habilita la clasificación (opcional, predeterminado: true)
class {String} clases adicionales para la columna, p.e. hidden-xs
search {Boolean/String} true filtrará un valor según el resultado template o String puede ser una plantilla Tangular que se utilizará como valor para la búsqueda.

Filtrado:

numbers: (1) number busca un número exacto, (2) number / number es un intervalo entre números
strings: (1) string busca una cadena exacta, (2) string1, string2, string3 es un criterio de búsqueda múltiple
dates: (1) año 2017 busca todas las fechas de este año, (2) 2017-02-12 / 2017-03-13 es un intervalo entre fechas, (3) 20.12 / 31.12 un intervalo entre fechas del año actual

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

example.html

<style>
	body{padding:50px;margin:0;background-color:#F0F0F0;font-family:Arial;height:100%;}
	html{height:100%;}
</style>

<ui-component name="grid" path="griddata" config="exec:filtering">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', size: 2, render: 'n => n.toUpperCase()', filter: 'Search in name' },
			{ name: 'price', text: 'Price', size: 1, format: 2, filter: 'Search in prices', align: 'right' },
			{ name: 'description', text: 'Description', size: 3, filter: 'Search in description' },
			{ name: 'created', text: 'Created', size: 1, filter: 'Search in dates', format: 'dd.MM.yyyy', align: 'center' }
		]
	</script>
</ui-component>

<script>
	var griddata = { page: 1, count: 18, pages: 3, limit: 6, items: [] };
	var items = griddata.items;

	items.push({ name: '1 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 233, created: new Date().add('-5 days') });
	items.push({ name: '2 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 122, created: new Date().add('-1 year') });
	items.push({ name: '3 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 119, created: new Date().add('-1 month') });
	items.push({ name: '4 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 35.34, created: new Date().add('-14 days') });
	items.push({ name: '5 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 439.33, created: new Date().add('-5 hours') });
	items.push({ name: '6 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 111.12, created: new Date().add('-349 minutes') });

	// Auto-resize
	$(window).on('resize', function() {
		setTimeout2('resize', function() {
			EMIT('resize');
		}, 100);
	});

	function filtering(type, filter, sort, page) {
		console.log(type, filter, sort, page);
	}

</script>