j-ServerList

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

BETA VERSION. Αυτό το componnet είναι σχεδιασμένο για μια σελίδα και επιχειρηματικές εφαρμογές.Έχει την ίδια λειτουργικότητα με το j-ServerGrid, αλλά δίνει στους προγραμματιστές περισσότερη ελευθερία να δημιουργήσουν εξατομικευμένες παραδόσεις στοιχείων.

Η πηγή δεδομένων πρέπει να περιέχει:

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

ΕΠΙΤΡΟΦΗ:

colwidth {Number} ένα προεπιλεγμένο πλάτος στήλης σε pixels (προεπιλογή: 150)
pluralizepages {String} πολλαπλασιασμός σελίδων (επιλεκτική, προεπιλεγμένη: # pages,# page,# pages,# pages)
Πλουραλισμός pluralizeitems {String} για τα στοιχεία (επιλεκτική, προεπιλεγμένη: # items,# item,# items,# items)
margin {Number} ένα ανώτατο όριο για το ύψος (επιλεγμένο, προεπιλογή: 0)
Το noborder {Boolean} μπορεί να αφαιρέσει ένα όριο (προεπιλεγμένο: false)
parent {String} επιλογή για το ύψος auto (προεπιλεγμένο: window)
height {Number} σταθερή ύψος
filter {String} ένα προεπιλεγμένο κάτοχο για όλα τα φίλτρα (επιλεκτικά)
click {String}: Ένα σύνδεσμο προς ένα μονοπάτι ή function(row, row_element)
exec {String} ένα σύνδεσμο με το function(type, filter, sort, page) για τις λειτουργίες του διακομιστή (υποστηριζόμενοι τύποι: filter, page και sort)
display {Boolean} Επιτρέπεται η προσθήκη αυτοκινήτου jComponent Αντιδραστική τάξη d-xs, d-lg, κλπ. ανάλογα με το πλάτος της οθόνης (επιλογή: true)
empty {String} ένα κενό μήνυμα (προεπιλεγμένο: No records found.)
NEW: scrollbarshadow {Boolean} επιτρέπει τη σκιά στρογγυλής (προεπιλεγμένη: false)
NEW: scrolltop {Boolean} αυτόματα στρογγυλοποιείται στην κορυφή μετά την αλλαγή της πηγής δεδομένων (προεπιλογή: true)

Καλό να ξέρεις:

NULL('link.to.data') Αξιολόγηση config.exec

Προσαρμοσμένη πρόταση

Το στοιχείο του ServerList προσπαθεί να εντοπίσει ένα πρότυπο Tangular. Αν υπάρχει, το στοιχείο το χρησιμοποιεί. Διαφορετικά, προσπαθεί για να παραδώσει περιεχόμενο από την ιδιοκτησία html κάθε στοιχείου / ράβδος.

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

Χρησιμοποιήστε το με <ui-component name="serverlist">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, 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>