j-DataTable

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

BETA: este componente está destinado a SPA y listado del lado del servidor.

soporta paginación
se necesita sistema de rejilla bootstrap
admite clasificación
admite desplazamiento vertical/horizontal
receptivo
admite modo oscuro

Fuente de datos debe contener:

{
	cols: [{ name: 'id', ... }], // optional, can be defined inline in HTML
    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:

pluralizepages {String} pluralización de páginas (opcional, predeterminado: # pages,# page,# pages,# pages)
pluralizeitems {String} pluralización de elementos (opcional, predeterminado: # items,# item,# items,# items)
height {Number/String} altura de la cuadrícula, valores admitidos: auto (predeterminado), NEW fluid, parent o NUMBER como altura o selector para jQuery.closest()
NEW minheight {Number} altura mínima de la rejilla, funciona con altura fluid y auto (predeterminado: 300)
NEW parent {String} selector para la opción de altura auto (predeterminado: window)
margin {Number} un margen superior para la altura (opcional, predeterminado: 0)
click {String} un enlace a function(row, grid, row_el), se ejecuta si el usuario hace clic en una fila
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
exec {String} un enlace a function(type, page, sort) 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
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)
colwidth {Number} un ancho predeterminado para columnas (predeterminado: 150)
editable {String} un enlace a function(opt) cuando el usuario realiza la edición
contextmenu {String} un enlace a function(e, grid) cuando el usuario abre el menú contextual

Propiedades de la columna:

name {String} un nombre de campo en el objeto de fila
text {String} una etiqueta de columna, el texto con .fa fa-home representará el ícono FontAwesome
width {Number} un ancho de columna (opcional, predeterminado config.colwidth)
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.
sort {Boolean} habilita la clasificación (opcional, predeterminado: false)
format {String/Number} se puede utilizar para el campo de fecha y números (recuento de decimales) (opcional), p. dd.MM.yyyy
currency {String} un formateador de moneda, solo agregue una moneda
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)
type {String} opcional, puede contener un tipo de datos (boolean, date o number) para el campo
editable {Boolean} permite editar

Métodos:

component.redrawrow(row_object/index) 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.rebind(columnsdeclaration) el método vuelve a vincular el esquema
NUEVO: component.reload() ejecuta config.exec con el filtro y la clasificación actuales
NEW: component.empty() vacía todas las filas

Es bueno saberlo:

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

Úselo con <ui-component name="datatable">. 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;height:400px">
	<ui-component name="datatable" path="data" config="highlight:1;exec:paginate;editable:editable;checked:checked;margin:22">
		<script type="text/html">
			[
				{ name: 'name', text: 'Opportunity name', width: 200, sort: 1, editable: 1 },
				{ name: 'value', text: 'Value', width: 100, sort: 1, type: 'number', format: 2 },
				{ name: 'status', text: 'Status', width: 100, editable: 1 },
				{ name: 'owner', text: 'Owner', width: 200 },
				{ name: 'newsletter', text: 'Newsletter', width: 100, type: 'boolean' },
				{ name: 'date', text: 'Date', width: 200, sort: 1, type: 'date', format: 'yyyy-MM-dd' }
			]
		</script>
	</ui-component>
</div>

<script>

	function checked(rows) {
		console.log(rows);
	}

	function editable(opt) {
		// opt.row
		// opt.col
		// opt.value
		// opt.next(NEW_VALUE);
		opt.next(opt.value + ' (modified)');
	}

	function paginate(type, page, sort) {
		console.log('Page:', page, 'sort:', sort);
	}

		var data = {};

		data.items = [];
		data.pages = 53;
		data.page = 3;

		// data.cols.push({ name: 'name', text: 'Opportunity name', width: 200, sort: true });
		// data.cols.push({ name: 'value', text: 'Value', width: 100, sort: true });
		// data.cols.push({ name: 'status', text: 'Status', width: 100 });
		// data.cols.push({ name: 'owner', text: 'Owner', width: 200 });
		// data.cols.push({ name: 'date', text: 'Date', width: 200, sort: true });

		for (var i = 0; i < 50; i++)
			data.items.push({ name: GUID(20), value: Math.random() * 1000 >> 0, status: GUID(10), owner: 'Peter Širka', newsletter: i % 3 === 0, date: NOW });
</script>