j-DataTable

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

BETA: Den här komponenten är riktad till SPA och server-side listing.

Stöd för sidan
nödvändigt bootstrap-system
Stöd för sortering
stödjer vertikal/horisontell skruvning
Svarande
Stöd för dark mode

data-källa måste innehålla:

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

Konfigurera:

pluralizepages {String} pluralisering för sidor (alternativt, standard: # pages,# page,# pages,# pages)
pluralizeitems {String} pluralisering för objekt (alternativt, standard: # items,# item,# items,# items)
height {Number/String} Höjd av nät, stödda värden: auto (Föregående inlägg) _NEW fluid, parent eller NUMBER som höjd eller selector för jQuery.closest()
NEW minheight {Number} minsta höjd av nät, fungerar med fluid och auto höjd (default: 300)
NEW parent {String}-selektor för auto höjdalternativ (default: window)
margin {Number} en toppmarginal för höjd (alternativ, standard: 0)
click {String} en länk till function(row, grid, row_el), det körs om användaren klickar på en rad
highlight {Boolean} varje utvalda rad (efter click) kommer att betonas (default: false)
unhighlight {Boolean} möjliggör undo highlighting av den valda raden (default: true)
checked {String} path till en variabel eller väg till function(rows, grid) körs om användaren har valt/kontrollerat vissa rader
autoselect {Boolean} möjliggör självval av första raden i nätverket, det utför EXEC(config.click), standard: false
exec {String} en länk till function(type, page, sort) för server-sidor (det inaktiverar klient-sidors sortering och filtrering), stödda typer: refresh eller page
changed {String} path till en variabel eller väg till function(rows, grid) körs om användaren ändrar vissa rader
dblclick {String} en länk till function(row, grid, row_el)-metoden, det körs om användaren dubbelklickar på en rad
noborder {Boolean} kan inaktivera en gräns runt nätverket (default: false)
colwidth {Number} en standard bredd för kolumner (default: 150)
editable {String} en länk till function(opt) när användaren utför redigering
contextmenu {String} en länk till function(e, grid) när användaren lyfter sammanhangsmenyn

Kolumner egenskaper:

name {String} ett fältnamn i raden objekt
text {String} en kolumn etikett, text med .fa fa-home kommer att göra FontAwesome ikon
width {Number} en kolumn bredd (alternativt, standard config.colwidth)
align {String} kan vara center eller right (alternativt, standard: left)
template {String} kan vara en Tangular mall och modellen är hela objektet i raden
sort {Boolean} möjliggör sortering (alternativ, standard: false)
format {String/Number} kan användas för datum och siffror (antal decimaler) fält (alternativ), t.ex. dd.MM.yyyy
currency {String} ett valutformat, bara lägga till en valuta
class {String} valfritt, en anpassad kolumn klassnamn
empty {String/Boolean} är valfritt, kan skriva om tomt värde med det värde som definieras i ett tomt fält (true värde använder --- som standardvärde)
type {String} är valfritt, kan innehålla en datatyp (boolean, date eller number) för fältet
editable {Boolean} möjliggör redigering

Metoder:

component.redrawrow(row_object/index) redraws rad eller NEW: ersätter+redraws row_object med en ny new_object_row
component.clear() klarar alla förändringar
component.select(row) väljer row måste vara samma objekt som i datakälla
component.rebind(columnsdeclaration)-metoden återställer schemat
NEW: component.reload() kör config.exec med den aktuella filter och sortering
NEW: component.empty() empties alla rader

Bra att veta:

SET('link.to.data', data, 'noscroll') --> typ noscroll inaktiverar återställning av skruv

Hur man utökar en klass av rad?

Se på {{ if active-linjen, förlänger den en klass av rad genom att lägga till dg-active-class om active är giltig

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

Använd den med <ui-component name="datatable">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>