j-DataTable

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

BETA: Αυτό το συστατικό στοχεύει στη λίστα SPA και server-side.

Υποστήριξη σελίδας
Χρειάζεται σύστημα bootstrap
Υποστήριξη Σορτ
Υποστηρίζει κάθετη / οριζόντια στρογγυλοποίηση
Αντιδράσεις
Υποστήριξη - Dark Mode

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

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

ΕΠΙΤΡΟΦΗ:

pluralizepages {String} πολλαπλασιασμός σελίδων (επιλεκτική, προεπιλεγμένη: # pages,# page,# pages,# pages)
Πλουραλισμός pluralizeitems {String} για τα στοιχεία (επιλεκτική, προεπιλεγμένη: # items,# item,# items,# items)
height {Number/String} Το ύψος του δικτύου, οι αξίες που υποστηρίζονται: auto (Συμφωνία για το νέο) fluid, parent ή NUMBER Το ύψος ή selector Για το jQuery.closest()
NEW minheight {Number} ελάχιστη ύψος του δικτύου, λειτουργεί με fluid και auto ύψους (προεπιλεγμένη: 300)
NEW parent {String} επιλογής για την επιλογή ύψους auto (προεπιλεγμένη: window)
margin {Number} ένα ανώτατο όριο για το ύψος (επιλεγμένο, προεπιλογή: 0)
click {String} ένα σύνδεσμο με το function(row, grid, row_el), εκτελείται εάν ο χρήστης κάνει κλικ σε μια σειρά
highlight {Boolean} κάθε επιλεγμένη σειρά (μετά από click) θα υπογραμμιστεί (προεπιλογή: false)
Το unhighlight {Boolean} επιτρέπει το undo highlighting της επιλεγμένης γραμμής (προεπιλογή: true)
checked {String} path σε μεταβλητή ή δρόμο προς function(rows, grid) εκτελείται εάν ο χρήστης επιλέξει/ελέγχει ορισμένες γραμμές
Το autoselect {Boolean} επιτρέπει την αυτόματη επιλογή της πρώτης γραμμής στο δίκτυο, εκτελεί το EXEC(config.click), προεπιλεγμένο: false
exec {String} μια σύνδεση με το function(type, page, sort) μόνο για λειτουργίες πλευράς διακομιστή (αδυναμώνει την ταξινόμηση και τον φίλτρο του πελάτη), υποστηριζόμενοι τύποι: refresh ή page
changed {String} path σε μεταβλητή ή δρόμο προς function(rows, grid) εκτελείται εάν ο χρήστης αλλάξει ορισμένες γραμμές
dblclick {String} συνδέεται με τη μέθοδο function(row, grid, row_el), εκτελείται εάν ο χρήστης κάνει διπλό κλικ σε μια σειρά
Το noborder {Boolean} μπορεί να απενεργοποιήσει ένα όριο γύρω από το δίκτυο (προεπιλεγμένο: false)
colwidth {Number} ένα προεπιλεγμένο πλάτος για τις στήλες (προεπιλογή: 150)
editable {String} σύνδεση με το function(opt) όταν ο χρήστης εκτελεί επεξεργασία
contextmenu {String} σύνδεση στο function(e, grid) όταν ο χρήστης αυξάνει το μενού συνδέσμου

Ιδιότητες στήλης:

name {String} ένα όνομα πεδίου στο αντικείμενο γραμμής
text {String} μια στήλη ετικέτα, κείμενο με .fa fa-home θα κάνει το FontAwesome icon
width {Number} ένα πλάτος στήλης (επιλεγμένο, προεπιλογή config.colwidth)
Το align {String} μπορεί να είναι center ή right (επιλεγμένο, προεπιλογή: left)
Το template {String} μπορεί να είναι ένα πρότυπο Tangular και το μοντέλο είναι ολόκληρο το αντικείμενο της σειράς
Το sort {Boolean} επιτρέπει την ταξινόμηση (επιλεκτική, προεπιλεγμένη: false)
Το format {String/Number} μπορεί να χρησιμοποιηθεί για την ημερομηνία και τους αριθμούς (ο αριθμός των δεκάδων) πεδίο (επιλεκτικά), π.χ. dd.MM.yyyy
currency {String} ένα νομισματικό μορφότυπο, απλά προσθέστε ένα νόμισμα
class {String} προαιρετικό, ένα προσαρμοσμένο όνομα κλάσης
Η τιμή empty {String/Boolean} είναι προαιρετική, μπορεί να επαναλάβει την κενή τιμή με την τιμή που ορίζεται σε ένα κενό πεδίο (η τιμή true χρησιμοποιεί τη τιμή --- ως προεπιλεγμένη τιμή)
type {String} επιλογή, μπορεί να περιέχει ένα είδος δεδομένων (boolean, date ή number) για το πεδίο
Το editable {Boolean} επιτρέπει την επεξεργασία

Μέθοδοι:

component.redrawrow(row_object/index) Redraws γραμμή ή NEW: αντικαθιστά +Redraws row_object με ένα νέο new_object_row
Το component.clear() καθαρίζει όλες τις αλλαγές
component.select(row) επιλέγει το row πρέπει να είναι το ίδιο αντικείμενο με την πηγή δεδομένων
Η μέθοδος component.rebind(columnsdeclaration) αναστέλλει το σχήμα
NEW: Το component.reload() εκτελεί το config.exec με το τρέχον φίλτρο και τη σειρά
_NEW__: component.empty() εκφράζει όλες τις γραμμές

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

SET('link.to.data', data, 'noscroll') --> noscroll τύπος διακόπτει την επαναφορά της στροφής

Πώς να επεκτείνετε μια κατηγορία γραμμής;

Κοιτάξτε τη γραμμή {{ if active, επεκτείνει μια κατηγορία σειράς προσθέτοντας το dg-active-class αν το active είναι έγκυρο

[
	'{{ if active }} dg-active-class{{ fi }}',
	{ name: 'name', text: 'Name', width: 200 },
	// other columns ...
]

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