j-ServerList

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

VERSIÓN BETA. Este componente está diseñado para aplicaciones empresariales y de una sola página. Tiene casi la misma funcionalidad que el j-ServerGrid, pero brinda a los desarrolladores más libertad para crear renderizados de elementos personalizados.

Fuente de datos debe contener:

{
	columns: [
		{
			id: 'name',
			name: 'Name',
			width: 150, // optional (default: config.colwidth)
			filtering: false, // optional (default: false)
			sorting: false, // optional (default: false)
			align: 1, // optional: 0 or left (default), 1 or center, 2 or right
			alignheader: 1, // optional: 0 or left (default), 1 or center, 2 or right
			alignfilter: 1, // optional: 0 or left (default), 1 or center, 2 or right
			icon: 'ti ti-home', // optional: column icon
			dirsource: [{ id: 'String|Number|Boolean', name: '...' }] // optional: a dropdown filter (it needs "directory" component)
		}
	],
    items: [{ name: 'Row <b>1</b> will be bold', html: 'RENDER' }, { name: 'Row 2', html: 'RENDER' }, ...] // 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:

colwidth {Number} un ancho de columna predeterminado en píxeles (predeterminado: 150)
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)
margin {Number} un margen superior para la altura (opcional, predeterminado: 0)
noborder {Boolean} puede eliminar un borde (predeterminado: false)
Selector parent {String} para la opción de altura auto (predeterminado: window)
height {Number} una altura fija
filter {String} un marcador de posición predeterminado para todos los filtros (opcional)
click {String} un enlace a una ruta o function(row, row_element)
exec {String} un enlace a function(type, filter, sort, page) para operaciones del lado del servidor (tipos admitidos: filter, page y sort)
display {Boolean} permite agregar automáticamente la clase de respuesta jComponent d-xs, d-lg, etc. según el ancho de la pantalla (predeterminado: true)
empty {String} un mensaje vacío (predeterminado: No records found.)
NUEVO: scrollbarshadow {Boolean} habilita la sombra de la barra de desplazamiento (predeterminado: false)
NUEVO: scrolltop {Boolean} se desplaza automáticamente hacia la parte superior después de cambiar la fuente de datos (predeterminado: true)

Es bueno saberlo:

NULL('link.to.data') evalúa config.exec

Plantillas personalizadas

El componente ServerList intenta localizar una plantilla Tangular. Si existe uno, el componente lo usa. De lo contrario, intenta representar un contenido de la propiedad html de cada elemento/fila.

<ui-component name="serverlist" ...>
	<script type="text/html">
		<!-- "value" represents each row -->
		<!-- "$" represents the entire datasource -->
		<div>{{ value.name }}</div>
	</script>
</ui-component>

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

<style>
	/* CUSTOM FORMATTING */
	.ui-serverlist-items { display: grid; column-gap: var(--gap); grid-template-columns: repeat(4, minmax(0,1fr)); padding: 20px; }
	.ui-serverlist-item { border: 2px solid #E0E0E0; padding: 10px; border-radius: 10px; }
	.ui-serverlist-check { position: absolute; margin: -20px 0 0 -20px; }
</style>

<ui-component name="serverlist" path="data" config="checkbox:1;height:500;exec:filtering">
	<script type="text/html">
		<div>{{ value.name }}, total pages: {{ $.pages }}</div>
	</script>
</ui-component>

<script id="datasource" type="text/json">
{
	"items": [
		{
			"id": "1",
			"name": "Hello world! 1",
			"createdby": "Peter Sirka",
			"dtcreated": "2024-11-25T22:43:53.455Z"
		},
		{
			"id": "2",
			"name": "Hello world! 2",
			"createdby": "Peter Sirka",
			"dtcreated": "2024-11-25T22:43:53.455Z"
		},
		{
			"id": "3",
			"name": "Hello world! 3",
			"createdby": "Peter Sirka",
			"dtcreated": "2024-11-25T22:43:53.455Z"
		}
	],
	"count": 1,
	"page": 2,
	"limit": 50,
	"pages": 3,
	"columns": [
		{
			"id": "name",
			"name": "Message",
			"icon": "ti ti-envelope",
			"filtering": true,
			"sorting": true
		},
		{
			"id": "createdby",
			"name": "Created by",
			"filtering": true,
			"sorting": true
		},
		{
			"id": "dtcreated",
			"name": "Created",
			"icon": "ti ti-calendar",
			"filtering": true,
			"sorting": true
		}
	]
}
</script>


<script>

	var data = PARSE('#datasource');

	function filtering(type, filter, sort, page) {
		console.log('Type:', type, 'Filter:', filter, 'Sort:', sort, 'Page:', page);
		UPD('data');
	}

</script>