j-ServerList

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

BETA VERSION. Questo componnet è progettato per applicazioni singole e aziendali.Ha raggiunto la stessa funzionalità del j-ServerGrid, ma dà ai sviluppatori più libertà di creare rendering oggetto personalizzato.

data-source deve contenere:

{
	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
}

Configurazione:

colwidth {Number} una larghezza di colonna predefinita in pixel (predefinito: 150)
pluralizepages {String} pluralizzazione per pagine (opzionale, predefinito: # pages,# page,# pages,# pages)
pluralizzazione di pluralizeitems {String} per gli articoli (opzionale, predefinito: # items,# item,# items,# items)
margin {Number} una margina superiore per l'altezza (opzionale, predefinito: 0)
noborder {Boolean} può rimuovere un limite (default: false)
Selettore parent {String} per l'opzione di altezza auto (default: window)
height {Number} di altezza fissa
filter {String} un locatore predefinito per tutti i filtri (opzionale)
click {String} un collegamento a un percorso o function(row, row_element)
exec {String} un collegamento a function(type, filter, sort, page) per le operazioni sul server (tipi supportati: filter, page e sort)
display {Boolean} consente l'aggiunta automatica di jComponent classe responsiva d-xs, d-lg, ecc. in base alla larghezza dello schermo (default: true)
empty {String} un messaggio vuoto (default: No records found.)
NEW: scrollbarshadow {Boolean} consente l'ombra di scorrimento (default: false)
NEW: scrolltop {Boolean} scorre automaticamente verso la parte superiore dopo che la fonte di dati è cambiata (default: true)

Buono sapere:

NULL('link.to.data') Valutazione config.exec

Modello personalizzato

Il componente di ServerList cerca di trovare un modello Tangular. Se uno esiste, il componente lo utilizza. altrimenti, cerca di rendere un contenuto dalla proprietà html di ogni elemento/rogo.

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

Utilizzare con <ui-component name="serverlist">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>