j-DataGrid

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

Esta cuadrícula fue creada para aplicaciones de una sola página y aplicaciones empresariales.

se necesita sistema de rejilla bootstrap
puedes renderizar más de 30 000 filas sin ningún problema
admite columnas de arrastrar y soltar
admite clasificación
admite el cambio de tamaño de las columnas
admite desplazamiento vertical/horizontal
admite filtros
admite casillas de verificación
barras de desplazamiento personalizadas independientes del sistema operativo
receptivo
admite modo oscuro
El filtro de opciones de columna IMPORTANTE necesita el componente j-Directory

PARA HACER:

multiclasificación
cambiar el tamaño de las columnas para dispositivos táctiles
reordenar columnas para dispositivos táctiles

Fuente de datos debe contener:

{
	schema: 'schema_id', // NEW: optional, DataGrid supports multiple schemas (it means: multiple declaration of columns)
    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
}

o Array sin formato, pero no puedes usar paginación ni filtros externos:

[{ name: 'Row 1' }, { name: 'Row 2' }];

Configuración:

filterlabel {String} un marcador de posición predeterminado para todos los filtros (opcional)
rememberfilter {Boolean} con verdadero recuerda los filtros para cada esquema (predeterminado: true)
schema {String} un esquema predeterminado (predeterminado: default)
pluralizepages {String} pluralización de páginas (opcional, predeterminado: # pages,# page,# pages,# pages)
pluralizeitems {String} pluralización para elementos (opcional, predeterminado: # items,# item,# items,# items)
height {Number/String} altura de la cuadrícula, valores admitidos: auto (predeterminado), NEW fluid, parent (o parent1, parent2) o NUMBER como altura o selector para jQuery.más cercano()
minheight {Number} altura mínima de la rejilla, funciona con altura fluid y auto (predeterminado: 200)
Selector parent {String} para la opción de altura auto (predeterminado: window)
margin {Number} un margen superior para la altura (opcional, predeterminado: 0)
boolean {String} valores para filtrar valores booleanos (opcional, predeterminado: true|on|yes)
resize {Boolean} permite cambiar el tamaño de las columnas (opcional, predeterminado: true)
reorder {Boolean} permite reordenar las columnas (opcional, predeterminado: true)
sorting {Boolean} habilita la clasificación (opcional, predeterminado true)
remember {Boolean} recuerda reordenar y cambiar el tamaño de las columnas (opcional, predeterminado true)
checkbox {Boolean} habilita casillas de verificación
colwidth {Number} un ancho de columna predeterminado en píxeles (opcional, predeterminado 150)
rowheight {Number} una altura de fila predeterminada en píxeles (opcional, predeterminado: 24) + depende de CSS
alignheader {String/Number} se alinea para el encabezado right (o 2) o center (o 1) (opcional, predeterminado: left)
alignfilter {String/Number} se alinea para la entrada del filtro right (o 2) o center (o 1) (opcional, predeterminado: left)
align {String/Number} se alinea para un valor de columna right (o 2) o center (o 1) (opcional, predeterminado: left)
click {String} un enlace a una ruta o function(row, grid, row_el), se asignará/ejecutará un registro si el usuario hace clic en una fila
clickid {String} un identificador/nombre de propiedad para redibujar hacia atrás (para resaltar la fila anterior), predeterminado: id
highlight {Boolean} cada fila seleccionada (después de click) se resaltará (predeterminado: false)
unhighlight {Boolean} habilita undo highlighting de la fila seleccionada (predeterminado: true)
checked {String} path a una variable o ruta a function(rows, grid) se ejecuta si el usuario seleccionó/marcó algunas filas
autoselect {Boolean} habilita la selección automática de la primera fila en la cuadrícula, realiza EXEC(config.click), predeterminado: false
limit {Number} un límite de clúster, predeterminado: 80
numbering {Boolean}, valor predeterminado opcional false
allowtitles {Boolean}, habilita títulos para todos los valores de fila, valor predeterminado opcional false
button {String} se ejecuta un enlace a function(btn_name, row, btn_element, event, name) si el usuario hace clic en un botón en la fila
exec {String} un enlace a function(type, filter, sort, page) solo para operaciones del lado del servidor (deshabilita la clasificación y el filtrado del lado del cliente), tipos admitidos: refresh o page
changed {String} path a una variable o ruta a function(rows, grid) se ejecuta si el usuario cambió algunas filas

change {String/Boolean} booleano permite la edición interna o la cadena debe contener un path a una variable o la ruta a function(meta, next(meta)) se ejecuta si el usuario hace doble clic en una columna (meta puede ser null si se actualiza la cuadrícula) + next(null) reemplaza el contenido anterior nuevamente
columns {String} un camino hacia la definición de columns {Array}
dblclick {String} un enlace al método function(row, grid, row_el), se ejecuta si el usuario hace doble clic en una fila
noborder {Boolean} puede desactivar un borde alrededor de la cuadrícula (predeterminado: false)
clusterize {Boolean} puede desactivar el desplazamiento agrupado (predeterminado: true)
contextmenu {String} un enlace a function(e, grid) cuando el usuario abre el menú contextual
autoformat {Boolean} habilita tipos de formato automático como email, phone y number (predeterminado: true)
controls {Boolean} habilita los controles definidos en columns (predeterminado: true)
hfunc {String} un enlace al método function(el), se ejecuta si el usuario hace clic en el icono agregado a la primera fila del encabezado. Útil para integrar otros componentes con DataGrid. p.ej. filtro j
hfuncicon {String} icono hfunc, p. hogar, engranaje, etc.
pagination {Boolean} habilita/deshabilita la paginación (predeterminado: true)
- config.exec se ejecutará si la barra de desplazamiento está al final, y puede usar como respuesta sin formato array de filas
ovalue {String} una clave predeterminada para obtener value de column.options (predeterminada: id)
otext {String} una clave predeterminada para obtener text de column.options (predeterminada: name)

Propiedades de la columna:

name {String} un nombre de campo en el objeto de fila
text {String} una etiqueta de columna, el texto con .ti ti-home representará el ícono Total
title {String} una información sobre herramientas de columna (opcional)
width {Number} un ancho de columna (opcional, predeterminado config.colwidth)
filter {String/Boolean} un marcador de posición para el filtro o boolean puede desactivar el filtro para esta columna (opcional)
filtervalue {Object} opcional, un valor de filtro predefinido (predeterminado: undefined)
filtertype {Number/String}, 1 deshabilita la búsqueda inteligente (predeterminado: 0 - significa búsqueda inteligente habilitada)
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.
sorting {Boolean} habilita la clasificación (opcional, predeterminado: true)
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.
format {String/Number} se puede utilizar para el campo de fecha y números (recuento de decimales) (opcional), p. dd.MM.yyyy
hide {Boolean} oculta una columna
listcolumn {Boolean} valor predeterminado: verdadero, falso para eliminar una columna de la lista de columnas
hidden {String} como función de flecha column => true --> la columna estará oculta (por ejemplo, para restringir usuarios)
options {Object Array} opcional, un filtro personalizado, por ejemplo [{ text: 'yes', value: true }, { text: 'no', value: false }] o {String}r enlace a la fuente de datos
otext {String} opcional, una clave para el campo text en options, valor predeterminado config.otext
ovalue {String} opcional, una clave para el campo value en options, valor predeterminado config.ovalue
buttonapply {String} opcional, una etiqueta para el botón Apply en columnas, predeterminado: Apply
class {String} opcional, un nombre de clase de columna personalizado
empty {String/Boolean} opcional, puede reescribir el valor vacío con el valor definido en el campo vacío (el valor true usa --- como valor predeterminado)
min {Number} solo editable al min. valor numérico
max {Number} solo editable un máx. valor numérico
required {Boolean} solo editable
dirsearch {String/Boolean} un marcador de posición para la búsqueda j-Directory, el valor booleano con false deshabilitará la búsqueda
type {String} opcional, puede contener un tipo de datos (string, boolean, date, number, email, phone o url) para el campo
editable {Boolean} permite editar
currency {String} un nombre de moneda (debe definirse en DEF.currencies)
editable {String} Una ruta a function(meta) editable y personalizado, importante: meta.next(new_value) o meta.cancel()
colorize {Boolean} permite colorear el valor
monospace {Boolean} habilita el tipo de fuente monoespaciado
NEW raw {Boolean} habilita/deshabilita el escape HTML en los filtros de columna (predeterminado: false)
NEW pair {Boolean} habilita/deshabilita el emparejamiento automático de valores con la configuración options (predeterminado: false)

Controles de fila (NUEVO):

se puede definir como tipo de columna controls
debe definirse la columna template (Tangular, row es un modelo para Tangular para cada fila)
mira el ejemplo
El evento del botón click se captura en config.button.

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 -- 02.12.2017 - 13.03.2017 es un intervalo entre fechas, (3) 12-20 - 12-31 -- 20.12 - 31.12 un intervalo entre fechas del año actual ir (4) 2017-01 - 2018-05 -- 01.2017 - 05.2018 o (5) -5 days -- -1 week -- -10 years

Métodos:

component.redraw([reselect_again]) puede volver a dibujar filas (solo para modificaciones, si elimina alguna fila necesita actualizar todo el modelo)
component.resetfilter() puede restablecer un filtro
component.exportrows(page_from or true from the current page, pages_count, callback(rows, internal_options), [reset_to_page or true for the current page]) puede exportar filas con renderizado del lado del servidor
component.appendrow(row_object, [scrolldown], [prepend]) agrega y renderiza la fila
component.redrawrow(row_object, [new_object_row]) vuelve a dibujar la fila o NEW: reemplaza+redibuja row_object con un nuevo new_object_row
component.clear() borra todos los cambios
component.select(row) selecciona row debe ser el mismo objeto que en la fuente de datos
component.editcolumn(row_index, col_index) ejecuta config.change internamente (solo para uso avanzado)
component.applyfilter(obj) puede aplicar un filtro personalizado { name: 'Peter', age: '20 - 50' }
component.resetcolumns() restablece columnas
component.readfilter() devuelve un filtro actual
component.rebind(schemaname__or__columnsdeclaration) el método vuelve a vincular el esquema
component.reload() ejecuta config.exec con el filtro y clasificación actuales
component.empty() vacía todas las filas
component.redrawcolumns() volver a dibujar columnas sin restablecerlas
NUEVO: component.schema(name) cambia un esquema y actualiza datos

Propiedades:

component.meta devuelve metainformación interna sobre filtros, columnas y filas.

Es bueno saberlo:

NULL('link.to.data') evalúa config.exec
SET('link.to.data', data, 'noscroll') --> El tipo noscroll desactiva el reinicio del desplazamiento.

¿Cómo extender una clase de fila?

mire la línea {{ if active }}, extiende una clase de fila agregando dg-active-class si active será válida

[
	'{{ if active }} dg-active-class{{ fi }}',
	{ name: 'name', text: 'Name', width: 200 },
	// other columns ...
]

Múltiples esquemas:

<ui-component name="datagrid" path="obj">

	<script type="text/plain" data-id="SCHEMA_A">
		[
			{ name: 'name', text: 'Name', width: 200 },
			// ...
		]
	</script>

	<script type="text/plain" data-id="SCHEMA_B">
		[
			{ name: 'price', text: 'Price', width: 100 },
			// ...
		]
	</script>

</ui-component>

<script>
	// Usage
	var obj = {};
	obj.schema = 'SCHEMA_A';
	obj.items = [];

	// Changing of schema
	setTimeout(function() {
		obj.schema = 'SCHEMA_B';
		obj.items = [];
		UPD('obj');
	}, 5000);
</script>

Úselo con <ui-component name="datagrid">. 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="LAZY directory"></ui-component>
<ui-component name="datagrid" path="items" config="margin:22;button:clicked">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', width: 200 },
			{ name: 'price', text: 'Price', align: 1, alignfilter: 1 },
			{ name: 'published', text: 'Public', align: 1, options: [{ name: 'yes', id: true }, { name: 'no', id: false }], type: 'boolean' },
			{ name: 'description', text: 'Description', filter: 'Search in description' },
			{ name: 'created', text: 'Created', template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignfilter: 2, alignheader: 2 },
			{ type: 'controls', template: '<button name="show"><i class="ti ti-search"></i><span>Show</span></button><button name="edit"><i class="ti ti-pencil"></i></button><button name="remove"><i class="ti ti-trash red"></i></button>' }
		]
	</script>
</ui-component>

<script>

	var items = [];
	for (var i = 1; i < 90; i++)
		items.push({ name: '{0} Lorem ipsum dolor'.format(i), published: i % 5 !== 0, description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: i + 100, created: new Date().add('-5 days') });

	function clicked(btnname, row, button, e) {
		console.log(btnname, row);
	}

</script>