# j-DataGrid > Αυτό το δίκτυο δημιουργήθηκε για εφαρμογές μεμονωμένης σελίδας και εφαρμογές επιχειρήσεων. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: el Content-SHA256: 791cf8147de1653cb483d7525f7a77e21018d98f0b775bcc88f8cf418dac63c4 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded Αυτό το δίκτυο δημιουργήθηκε για εφαρμογές μεμονωμένης σελίδας και εφαρμογές επιχειρήσεων. - Χρειάζεται σύστημα `bootstrap` - Μπορείτε να κάνετε περισσότερες από 30.000 σειρές χωρίς κανένα πρόβλημα - Υποστήριξη Drag & Drop Columns - Υποστήριξη Σορτ - Υποστηρίζει την ανάκαμψη των στήλων - Υποστηρίζει κάθετη / οριζόντια στρογγυλοποίηση - Υποστήριξη φίλτρων - Υποστήριξη checkboxes - Ανεξάρτητο στρολ μπαρ στο OS - Αντιδράσεις - Υποστήριξη - Dark Mode - __ΣΗΜΑΝΤΙΚΟ_ επιλογές φίλτρο χρειάζεται το συστατικό `j-Directory` __Τό-Δο__: - Πολυεξοπλισμός - Επαναφορά στήλων για συσκευές επαφής - Επανακανονισμός στήλων για τις συσκευές επαφής Η πηγή δεδομένων πρέπει να περιέχει: ```js { 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`, αλλά δεν μπορείτε να χρησιμοποιήσετε σελίδες και εξωτερικά φίλτρα: ```js [{ 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` είναι ένα πολλαπλό κριτήριο αναζήτησης - `dates`1) Χρόνος `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` είναι έγκυρο ```javascript [ '{{ if active }} dg-active-class{{ fi }}', { name: 'name', text: 'Name', width: 200 }, // other columns ... ] ``` __Πολλαπλά ΣΧΕΜΑΤΑ__: ```html ``` Χρησιμοποιήστε το με ``Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια. ```html example.html ```