# j-DataTable

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 0f4ba047733bb6fd1fa9203aef92b4f775c3aea7d807c01da1356e40059d6771
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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

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

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

```js
{
	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` είναι έγκυρο

```js
[
	'{{ 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 άδεια.

```html 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>
```