j-DataTable

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

BETA: Acest component este vizat pentru SPA și listarea server-side.

susținerea paginii
Sistemul de rețea bootstrap
susținerea sortării
susține scrollarea verticală/orizontală
Răspunsuri
Modul întunecat - Dark Mode

_sursă de date trebuie să conțină:

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

Configurarea:

Pluralizare pluralizepages {String} pentru pagini (opțional, standard: # pages,# page,# pages,# pages)
Pluralizare pluralizeitems {String} pentru articole (opțional, standard: # items,# item,# items,# items)
height {Number/String} Înălțimea rețelei, valorile susținute: auto (în mod implicit) - Noua fluid, parent sau NUMBER Înălțimea sau selector pentru jQuery.closest()
NEW minheight {Number} înălțimea minimă a rețelei, funcționează cu înălțul fluid și auto (default: 300)
NEW parent {String} selector pentru opțiunea de înălțime auto (default: window)
margin {Number} este o marjă de înălțime (opțional, standard: 0)
click {String} este un link la function(row, grid, row_el), se execută dacă utilizatorul face clic pe o linie
highlight {Boolean} fiecare rând selectat (după click) va fi evidențiat (default: false)
unhighlight {Boolean} permite undo highlighting din rândul selectat (default: true)
checked {String} path la o variabilă sau drumul către function(rows, grid) este executat dacă utilizatorul a selectat/a verificat anumite rânduri
autoselect {Boolean} permite selectarea automată a primei rânduri în rețea, funcționează EXEC(config.click), standard: false
exec {String} este un link la function(type, page, sort) pentru operațiunile de server-side (acesta interzice sortarea și filtrarea client-side), tipuri susținute: refresh sau page
changed {String} path la o variabilă sau calea către function(rows, grid) este executată dacă utilizatorul a schimbat anumite rânduri
dblclick {String} este un link la metoda function(row, grid, row_el), se execută dacă utilizatorul face dublu clic pe o rîndă
noborder {Boolean} poate dezactiva o graniță în jurul rețelei (default: false)
colwidth {Number} este o lățime de bază pentru coloane (default: 150)
editable {String} un link la function(opt) atunci când utilizatorul efectuează editarea
contextmenu {String} un link la function(e, grid) atunci când utilizatorul ridică meniul de context

Proprietăți coloană:

name {String} - un nume de câmp în obiectul de rând
text {String} este o etichetă coloană, textul cu .fa fa-home va face iconul FontAwesome
width {Number} o lățime de coloană (opțional, standard config.colwidth)
align {String} poate fi center sau right (opțional, standard: left)
template {String} poate fi un șablon Tangular, iar modelul este întregul obiect al rândului
sort {Boolean} permite sortarea (opțional, standard: false)
format {String/Number} poate fi utilizat pentru date și numere (numărul de decimale) câmp (opțional), de exemplu, dd.MM.yyyy
currency {String} este un format de monedă, doar adăugați o moneda
class {String} opțional, un nume de clasă personalizat
empty {String/Boolean} În cazul în care este posibilă redeschiderea valorii goale cu valoarea definită în câmpul gol (true Valoarea utilizării --- ca o valoare defectuoasă)
type {String} opțional, poate conține un tip de date (boolean, date sau number) pentru câmpul
editable {Boolean} permite editarea

Metode:

component.redrawrow(row_object/index) redrage rând sau NEW: înlocuiește + redrage row_object cu un nou new_object_row
component.clear() clarifică toate modificările
component.select(row) selectează row trebuie să fie același obiect ca și în sursa de date
component.rebind(columnsdeclaration) - Metoda reflectă schema
NEW: component.reload() execută config.exec cu filtrul curent și sortarea
NEW: component.empty() empties toate rândurile

bine să știi:

SET('link.to.data', data, 'noscroll') -> tipul noscroll interzice reinstalarea de scrolling

Cum să extindă o clasă de rând?

Uitaţi-vă la {{ if active Linea, extinde o clasă de rând prin adăugarea dg-active-class În cazul în care active Va fi valabilă

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

Utilizați-l cu <ui-component name="datatable">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>