j-TableGrid

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

Το συστατικό δημιουργεί ένα απλό δίκτυο (συμπεριλαμβανομένων των στοιχείων div) που χωρίζεται από ένα απλό όριο που μπορείτε να τροποποιήσετε.

ΕΠΙΤΡΟΦΗ:

count {Number}: Υπολογισμός στοιχείων ανά σειρά
countxs {Number} αντικείμενα ανά σειρά για κινητή οθόνη
countsm {Number} αντικείμενα ανά σειρά για μικρή οθόνη
countmd {Number} αντικείμενα ανά σειρά για μέση προβολή
countlg {Number} αντικείμενα ανά σειρά για μια μεγάλη οθόνη
parent {String} για την απόκτηση μεγέθους (προεπιλογή: window)
margin {Number} μια κάθετη μάρκα (προεπιλεγμένη: 0)
Το scrollbar {Boolean} επιτρέπει την προσαρμοσμένη γραμμή στροφής (προεπιλεγμένο: false)
Το fill {Boolean} γεμίζει το δίκτυο με κενή γραμμή που χρειάζεται να ορίσει το row και το scrollbar
row {Number} ένα προεπιλεγμένο ύψος γραμμής για όλες τις οθόνες (προεπιλογή: 0)
rowxs {Number} ένα προεπιλεγμένο ύψος γραμμής για την κινητή οθόνη (προεπιλογή: 0)
rowsm {Number} ένα προεπιλεγμένο ύψος γραμμής για μικρή οθόνη (προεπιλογή: 0)
rowmd {Number} ένα προεπιλεγμένο ύψος γραμμής για την μέση προβολή (προεπιλογή: 0)
rowlg {Number} ένα προεπιλεγμένο ύψος γραμμής για μεγάλη οθόνη (προεπιλογή: 0)
Το scrolltop {Boolean} περιστρέφεται στην κορυφή μετά την αλλαγή δεδομένων (προεπιλογή: true)

Κλάσεις:

ui-tablegrid-bl σημαίνει αριστερά
ui-tablegrid-bt σημαίνει σύνορα
Πρώτο στοιχείο της σειράς ui-tablegrid-first
Το τελευταίο στοιχείο της σειράς ui-tablegrid-last
ui-tablegrid-empty άδειο στοιχείο

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

example.html

<div style="width:500px;padding:10px">
	<ui-component name="tablegrid" path="items" config="count:3" style="border:1px solid #EBECF2">
		<script type="text/html">
			<div style="padding:20px 0;text-align:center">{{ value.name }}</div>
		</script>
		<script type="text/html">
			<div style="padding:20px 0;text-align:center" class="b">Optional: empty</div>
		</script>
	</ui-component>
</div>
<script>
	var items = [{ name: 'Total.js' }, { name: 'SuperAdmin' }, { name: 'Code Editor' }, { name: 'jComponent' }];
</script>