j-DataGrid

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

Αυτό το δίκτυο δημιουργήθηκε για εφαρμογές μεμονωμένης σελίδας και εφαρμογές επιχειρήσεων.

Χρειάζεται σύστημα bootstrap
Μπορείτε να κάνετε περισσότερες από 30.000 σειρές χωρίς κανένα πρόβλημα
Υποστήριξη Drag & Drop Columns
Υποστήριξη Σορτ
Υποστηρίζει την ανάκαμψη των στήλων
Υποστηρίζει κάθετη / οριζόντια στρογγυλοποίηση
Υποστήριξη φίλτρων
Υποστήριξη checkboxes
Ανεξάρτητο στρολ μπαρ στο OS
Αντιδράσεις
Υποστήριξη - Dark Mode
__ΣΗΜΑΝΤΙΚΟ_ επιλογές φίλτρο χρειάζεται το συστατικό j-Directory

Τό-Δο:

Πολυεξοπλισμός
Επαναφορά στήλων για συσκευές επαφής
Επανακανονισμός στήλων για τις συσκευές επαφής

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

{
	schema: 'schema_id', // NEW: optional, DataGrid supports multiple schemas (it means: multiple declaration of columns)
    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
}

ή πρωτότυπο Array, αλλά δεν μπορείτε να χρησιμοποιήσετε σελίδες και εξωτερικά φίλτρα:

[{ name: 'Row 1' }, { name: 'Row 2' }];

ΕΠΙΤΡΟΦΗ:

filterlabel {String} ένα προεπιλεγμένο κάτοχο για όλα τα φίλτρα (επιλεκτικά)
rememberfilter {Boolean} με αληθινό θυμίζει φίλτρα για κάθε σχήμα (προεπιλεγμένο: true)
schema {String} ένα προεπιλεγμένο σχήμα (προεπιλογή: default)
pluralizepages {String} πολλαπλασιασμός σελίδων (επιλεκτική, προεπιλεγμένη: # pages,# page,# pages,# pages)
Πλουραλισμός pluralizeitems {String} για τα στοιχεία (επιλεκτική, προεπιλεγμένη: # items,# item,# items,# items)
height {Number/String} Το ύψος του δικτύου, οι αξίες που υποστηρίζονται: auto (Συμφωνία για το νέο) fluid, parent (ή parent1, parent2• ή NUMBER Το ύψος ή selector Για το jQuery.closest()
Ελάχιστο ύψος minheight {Number} του δικτύου, λειτουργεί με ύψους fluid και auto (προεπιλεγμένο: 200)
parent {String} επιλογή για το ύψος auto (προεπιλεγμένο: window)
margin {Number} ένα ανώτατο όριο για το ύψος (επιλεγμένο, προεπιλογή: 0)
boolean {String} αξίες για την φίλτρο των τιμών boolean (επιλεκτική, προεπιλεγμένη: true|on|yes)
Το resize {Boolean} επιτρέπει την επαναφορά των στήλων (επιλεγμένη, προεπιλογή: true)
Το reorder {Boolean} επιτρέπει την επαναφορά των στήλων (επιλεγμένη, προεπιλογή: true)
sorting {Boolean} επιτρέπει τη διαίρεση (επιλεγμένη, προεπιλογή true)
Το remember {Boolean} θυμάται τις στήλες επαναφοράς και ανασυσκευής (επιλεκτική, προεπιλεγμένη true)
Το checkbox {Boolean} επιτρέπει τα checkboxes
colwidth {Number} ένα προεπιλεγμένο πλάτος στήλης σε pixels (επιλεκτικά, προετοιμασμένη 150)
rowheight {Number} ένα προεπιλεγμένο ύψος γραμμής σε pixels (επιλεκτικά, προετοιμασία: 24) + εξαρτάται από το CSS
alignheader {String/Number} Αλληλεγγύη για τον επικεφαλής right (ή 2• ή center (ή 1(Επιλεκτικά και με προεπιλογή: left)
alignfilter {String/Number} Προσαρμογή για την εισαγωγή φίλτρου right (ή 2• ή center (ή 1(Επιλεκτικά και με προεπιλογή: left)
align {String/Number} Προσαρμογή σε μια στήλη right (ή 2• ή center (ή 1(Επιλεκτικά και με προεπιλογή: left)
click {String} μια σύνδεση με ένα μονοπάτι ή function(row, grid, row_el), ένα αρχείο θα απονέμεται/εκτελείται εάν ο χρήστης κάνει κλικ σε μια σειρά
clickid {String} ένα όνομα αναγνώρισης / ιδιοκτησίας για την αναπαραγωγή προς τα πίσω (για την προηγούμενη γραμμή αναφοράς), προεπιλογή: id
highlight {Boolean} κάθε επιλεγμένη σειρά (μετά από click) θα υπογραμμιστεί (προεπιλογή: false)
Το unhighlight {Boolean} επιτρέπει το undo highlighting της επιλεγμένης γραμμής (προεπιλογή: true)
checked {String} path σε μεταβλητή ή δρόμο προς function(rows, grid) εκτελείται εάν ο χρήστης επιλέξει/ελέγχει ορισμένες γραμμές
Το autoselect {Boolean} επιτρέπει την αυτόματη επιλογή της πρώτης γραμμής στο δίκτυο, εκτελεί το EXEC(config.click), προεπιλεγμένο: false
limit {Number} ένα όριο κλάσης, προεπιλογή: 80
numbering {Boolean}, προαιρετική πρόταση false
allowtitles {Boolean}, επιτρέπει τους τίτλους για όλες τις τιμές γραμμής, προαιρετική προεπιλογή false
button {String} ένα σύνδεσμο με το function(btn_name, row, btn_element, event, name) εκτελείται εάν ο χρήστης κάνει κλικ σε ένα κουμπί στη σειρά
exec {String} μια σύνδεση με το function(type, filter, sort, page) μόνο για λειτουργίες πλευράς διακομιστή (αδυναμώνει την ταξινόμηση και τον φίλτρο του πελάτη), υποστηριζόμενοι τύποι: refresh ή page
changed {String} path σε μεταβλητή ή δρόμο προς function(rows, grid) εκτελείται εάν ο χρήστης αλλάξει ορισμένες γραμμές
change {String/Boolean} boolean επιτρέπει την εσωτερική επεξεργασία ή η γραμμή πρέπει να περιέχει ένα path σε μια μεταβλητή ή ο δρόμος προς το function(meta, next(meta)) εκτελείται εάν ο χρήστης κάνει διπλά κλικ σε μια στήλη (meta μπορεί να είναι null αν το δίκτυο ανανεώνεται) + next(null) αντικαθιστά ξανά το προηγούμενο περιεχόμενο
columns {String}: Ο δρόμος προς τον ορισμό του columns {Array}
dblclick {String} συνδέεται με τη μέθοδο function(row, grid, row_el), εκτελείται εάν ο χρήστης κάνει διπλό κλικ σε μια σειρά
Το noborder {Boolean} μπορεί να απενεργοποιήσει ένα όριο γύρω από το δίκτυο (προεπιλεγμένο: false)
Το clusterize {Boolean} μπορεί να απενεργοποιήσει την κλαστοποιημένη στροφή (προεπιλεγμένο: true)
contextmenu {String} σύνδεση στο function(e, grid) όταν ο χρήστης αυξάνει το μενού συνδέσμου
Το autoformat {Boolean} επιτρέπει αυτόματα τύπους μορφοποίησης όπως το email, phone και number (προεπιλεγμένο: true)
Το controls {Boolean} επιτρέπει τους ελέγχους που ορίζονται στο columns (προεπιλεγμένο: true)
hfunc {String} ένα σύνδεσμο με τη μέθοδο function(el), εκτελείται εάν ο χρήστης κάνει κλικ στο εικονίδιο που προστίθεται στην πρώτη γραμμή επικεφαλής. usefull για να ενσωματώσει άλλο στοιχείο με το DataGrid.
hfuncicon {String} hfunc icon κ.λπ. σπίτι, cog, κλπ.
pagination {Boolean} επιτρέπει / απενεργοποιεί τη σελίδα (προεπιλεγμένη: true)
- Το config.exec θα εκτελεστεί εάν η γραμμή στροφής είναι στο τέλος, και μπορείτε να χρησιμοποιήσετε ως απάντηση array των σειρών.
ovalue {String} ένα προεπιλεγμένο κλειδί για την απόκτηση του value από το column.options (προεπιλογή: id)
otext {String} ένα προεπιλεγμένο κλειδί για την απόκτηση του text από το column.options (προεπιλογή: name)

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

name {String} ένα όνομα πεδίου στο αντικείμενο γραμμής
text {String} μια στήλη ετικέτα, κείμενο με .ti ti-home θα παραδώσει το Total icon
title {String} ένα εργαλείο στήλης (επιλεγμένο)
width {Number} ένα πλάτος στήλης (επιλεγμένο, προεπιλογή config.colwidth)
Το filter {String/Boolean} είναι ένας χώρος για το φίλτρο ή το boolean μπορεί να απενεργοποιήσει τον φίλτο για αυτή τη στήλη (επιλεγμένο)
filtervalue {Object} προαιρετική, μια προκαθορισμένη τιμή φίλτρου (προεπιλογή: undefined)
filtertype {Number/String}, 1 απενεργοποιεί την έξυπνη αναζήτηση (προεπιλογή: 0 - σημαίνει ενεργοποίηση της έξτρας αναζήτησης)
Το align {String} μπορεί να είναι center ή right (επιλεγμένο, προεπιλογή: left)
Το template {String} μπορεί να είναι ένα πρότυπο Tangular και το μοντέλο είναι ολόκληρο το αντικείμενο της σειράς
Το sorting {Boolean} επιτρέπει την ταξινόμηση (επιλεκτική, προεπιλεγμένη: true)
Το search {Boolean/String} true θα φιλτράρει μια τιμή σύμφωνα με το αποτέλεσμα template ή το String μπορεί να είναι ένα πρότυπο Tangular το οποίο θα χρησιμοποιηθεί ως τιμή για την αναζήτηση
Το format {String/Number} μπορεί να χρησιμοποιηθεί για την ημερομηνία και τους αριθμούς (ο αριθμός των δεκάδων) πεδίο (επιλεκτικά), π.χ. dd.MM.yyyy
Το hide {Boolean} κρύβει μια στήλη
Προεπιλεγμένο listcolumn {Boolean}: αληθινό, ψεύτικο για την απομάκρυνση στήλης από τη λίστα στήλων
hidden {String} Ως σφαίρα λειτουργίας column => true --> η στήλη θα είναι κρυμμένη (για παράδειγμα, για τον περιορισμό του χρήστη)
options {Object Array} προαιρετική, ένα εξατομικευμένο φίλτρο για παράδειγμα [{ text: 'yes', value: true }, { text: 'no', value: false }] o {String}r σύνδεση με την πηγή δεδομένων
otext {String} προαιρετικό, ένα κλειδί για το πεδίο text στο options, προεπιλεγμένο config.otext
ovalue {String} προαιρετικό, ένα κλειδί για το πεδίο value στο options, προεπιλεγμένο config.ovalue
buttonapply {String} επιλογή, ετικέτα για το κουμπί Apply σε στήλες, προεπιλεγμένη: Apply
class {String} προαιρετικό, ένα προσαρμοσμένο όνομα κλάσης
Η τιμή empty {String/Boolean} είναι προαιρετική, μπορεί να επαναλάβει την κενή τιμή με την τιμή που ορίζεται σε ένα κενό πεδίο (η τιμή true χρησιμοποιεί τη τιμή --- ως προεπιλεγμένη τιμή)
min {Number} επεξεργαστεί μόνο ένα λεπτό. αριθμός αξία
max {Number} _ επεξεργαστή μόνο__ μέγιστη τιμή αριθμού
required {Boolean} - Απαλλαγή μόνο
Το dirsearch {String/Boolean} είναι ένας χώρος για την αναζήτηση j-Directory, το boolean με το false θα απενεργοποιήσει την αναζήτησή του
type {String} επιλογή, μπορεί να περιέχει ένα είδος δεδομένων (string, boolean, date, number, email, phone ή url) για το πεδίο
Το editable {Boolean} επιτρέπει την επεξεργασία
currency {String} ένα όνομα νομίσματος (πρέπει να οριστεί σε DEF.currencies)
editable {String} Ένα μονοπάτι για την προσαρμοσμένη επεξεργασία function(meta), σημαντικό: meta.next(new_value) ή meta.cancel()
Το colorize {Boolean} επιτρέπει την ανθοφορία της αξίας
Το monospace {Boolean} επιτρέπει τον τύπο γραμματοσειράς
NEW raw {Boolean} επιτρέπει / απενεργοποιεί την απομάκρυνση HTML σε φίλτρα στήλης (προεπιλογή: false)
NEW pair {Boolean} επιτρέπει/απαγορεύει την αυτοδιάθεση σε συνδυασμό με τη διαμόρφωση options (προεπιλογή: false)

Ο έλεγχος του ρεύματος (NEW):

Μπορεί να οριστεί ως στήλη τύπου controls
πρέπει να ορίσει τη στήλη template (Tangular, row είναι ένα μοντέλο για το Tangular για κάθε σειρά)
Δείτε το παράδειγμα
Το κουμπί click εμφανίζεται στο config.button

ΦΙΛΤΡΙΑΣ:

numbers: (1) number αναζητά έναν ακριβή αριθμό, (2) number - number είναι ένα διάστημα μεταξύ των αριθμών
strings: (1) το string αναζητά μια ακριβή γραμμή, (2) το string1, string2, string3 είναι ένα πολλαπλό κριτήριο αναζήτησης
dates1) Χρόνος 2017 Αναζήτηση όλων των ημερομηνιών για το έτος, (2) 2017-02-12 - 2017-03-13 -- 02.12.2017 - 13.03.2017 Είναι ένα διάστημα μεταξύ των ημερομηνιών, (3) 12-20 - 12-31 -- 20.12 - 31.12 Διαμέρισμα μεταξύ ημερομηνιών του τρέχοντος έτους και (4) 2017-01 - 2018-05 -- 01.2017 - 05.2018 ή (5) -5 days -- -1 week -- -10 years

Μέθοδοι:

Το component.redraw([reselect_again]) μπορεί να επαναφέρει τις γραμμές (μόνο για τροποποιήσεις, εάν αφαιρέσετε κάποια γραμμή που χρειάζεται να ενημερώσετε ολόκληρο το μοντέλο)
Το component.resetfilter() μπορεί να επαναφέρει ένα φίλτρο
Το component.exportrows(page_from or true from the current page, pages_count, callback(rows, internal_options), [reset_to_page or true for the current page]) μπορεί να εξάγει γραμμές με το rendering server-side
component.appendrow(row_object, [scrolldown], [prepend]) προσθέτει και παραδίδει
component.redrawrow(row_object, [new_object_row]) Redraws γραμμή ή NEW: αντικαθιστά +Redraws row_object με ένα νέο new_object_row
Το component.clear() καθαρίζει όλες τις αλλαγές
component.select(row) επιλέγει το row πρέπει να είναι το ίδιο αντικείμενο με την πηγή δεδομένων
Το component.editcolumn(row_index, col_index) εκτελεί το config.change εσωτερικά (μόνο για προηγμένη χρήση)
Το component.applyfilter(obj) μπορεί να χρησιμοποιήσει ένα προσαρμοσμένο φίλτρο { name: 'Peter', age: '20 - 50' }
component.resetcolumns() επαναπροσδιορίζει τις στήλες
Το component.readfilter() επιστρέφει ένα τρέχον φίλτρο
Η μέθοδος component.rebind(schemaname__or__columnsdeclaration) αναστέλλει το σχήμα
Το component.reload() εκτελεί το config.exec με το τρέχον φίλτρο και τη σειρά
component.empty() ΕΠΙΤΡΟΦΗ ΟΛΩΝ ΤΩΝ ΣΕΔΙΩΝ
component.redrawcolumns() ανακατεύουμε τις στήλες χωρίς να τις επαναφέρετε
NEW: component.schema(name) αλλάζει ένα σχήμα και ανανεώνει τα δεδομένα

Ιδιοκτησία:

Το component.meta επιστρέφει εσωτερικές πληροφορίες για φίλτρα, στήλες και γραμμές

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

NULL('link.to.data') Αξιολόγηση config.exec
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="datagrid" path="obj">

	<script type="text/plain" data-id="SCHEMA_A">
		[
			{ name: 'name', text: 'Name', width: 200 },
			// ...
		]
	</script>

	<script type="text/plain" data-id="SCHEMA_B">
		[
			{ name: 'price', text: 'Price', width: 100 },
			// ...
		]
	</script>

</ui-component>

<script>
	// Usage
	var obj = {};
	obj.schema = 'SCHEMA_A';
	obj.items = [];

	// Changing of schema
	setTimeout(function() {
		obj.schema = 'SCHEMA_B';
		obj.items = [];
		UPD('obj');
	}, 5000);
</script>

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

example.html

<ui-component name="LAZY directory"></ui-component>
<ui-component name="datagrid" path="items" config="margin:22;button:clicked">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', width: 200 },
			{ name: 'price', text: 'Price', align: 1, alignfilter: 1 },
			{ name: 'published', text: 'Public', align: 1, options: [{ name: 'yes', id: true }, { name: 'no', id: false }], type: 'boolean' },
			{ name: 'description', text: 'Description', filter: 'Search in description' },
			{ name: 'created', text: 'Created', template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignfilter: 2, alignheader: 2 },
			{ type: 'controls', template: '<button name="show"><i class="ti ti-search"></i><span>Show</span></button><button name="edit"><i class="ti ti-pencil"></i></button><button name="remove"><i class="ti ti-trash red"></i></button>' }
		]
	</script>
</ui-component>

<script>

	var items = [];
	for (var i = 1; i < 90; i++)
		items.push({ name: '{0} Lorem ipsum dolor'.format(i), published: i % 5 !== 0, description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: i + 100, created: new Date().add('-5 days') });

	function clicked(btnname, row, button, e) {
		console.log(btnname, row);
	}

</script>