j-DataTable

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

BETA: Deze component is gericht op SPA en server-side listing.

Ondersteunt pagina's
Een bootstrap-netwerk nodig
Ondersteunt het sorteren
Ondersteunt verticale/horizontaal scrolling
Reactie
Ondersteunt het donkere mode

_Data-bron__ moet bevatten:

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

Configuratie:

pluralizepages {String} pluralisatie voor pagina's (optional, standaard: # pages,# page,# pages,# pages)
pluralizeitems {String} pluralisatie voor items (optional, standaard: # items,# item,# items,# items)
height {Number/String} Hoogte van het netwerk, ondersteunde waarden: auto (de standaard) _NIEW fluid, parent Of NUMBER Als hoogte of selector voor jQuery.closest()
NEW minheight {Number} minimumhoogte van het netwerk, werkt met fluid en auto hoogte (default: 300)
NEW parent {String} selector voor de auto hoogte optie (default: window)
margin {Number} een topmarge voor hoogte (optional, standaard: 0)
click {String} een link naar function(row, grid, row_el), het wordt uitgevoerd als de gebruiker op een rij klikt
highlight {Boolean} wordt aangegeven in elke geselecteerde volgorde (na click) (default: false)
unhighlight {Boolean} maakt undo highlighting van de geselecteerde volgorde mogelijk (default: true)
checked {String} path naar een variabele of pad naar function(rows, grid) wordt uitgevoerd als de gebruiker bepaalde lijnen heeft geselecteerd/checkt
autoselect {Boolean} maakt het mogelijk om de eerste rij in het net te selecteren, het uitvoert EXEC(config.click), standaard: false
exec {String} een link naar function(type, page, sort) voor server-side-activiteiten alleen (dit stelt de client-side sortering en filteren niet in staat), ondersteunde soorten: refresh of page
changed {String} path naar een variabele of pad naar function(rows, grid) wordt uitgevoerd als de gebruiker bepaalde lijnen verandert
dblclick {String} een link naar de function(row, grid, row_el) methode, het wordt uitgevoerd als de gebruiker dubbel klikt op een rij
noborder {Boolean} kan een grens rond het netwerk ontgrendelen (default: false)
colwidth {Number} een standaard breedte voor kolommen (default: 150)
editable {String} een link naar function(opt) wanneer de gebruiker bewerkt
contextmenu {String} een link naar function(e, grid) wanneer de gebruiker het contextmenu opneemt

Column eigenschappen:

name {String} een naam van het veld in de volgorde object
text {String} een kolom label, tekst met .fa fa-home maakt FontAwesome icon
width {Number} een kolombreedte (optional, standaard config.colwidth)
align {String} kan center of right zijn (optional, standaard: left)
template {String} kan een Tangular-template zijn en het model is het gehele object van de rij
sort {Boolean} maakt het mogelijk om te sorteren (optional, default: false)
format {String/Number} kan worden gebruikt voor de datum en cijfers (het aantal decimalen) veld (optional), bijvoorbeeld dd.MM.yyyy
currency {String} een valuta format, gewoon een munt toevoegen
class {String} optioneel, een aangepaste kolomklasse naam
empty {String/Boolean} optioneel, kan leegte met de waarde gedefinieerd in leeg veld opnieuw schrijven (true waarde gebruikt --- als standaardwaarde)
type {String} optioneel, kan een gegevenstype bevatten (boolean, date of number) voor het veld
editable {Boolean} kan worden bewerkt

Methoden:

component.redrawrow(row_object/index) redraws rij of NEW: vervangt + redrays row_object met een nieuwe new_object_row
component.clear() verwijdert alle veranderingen
component.select(row) selecteert row moet hetzelfde object zijn als in de gegevensbron
component.rebind(columnsdeclaration) de methode herbindt het schema
NEW: component.reload() uitvoert config.exec met de huidige filter en sortering
NEW: component.empty() empties alle lijnen

Goed om te weten:

SET('link.to.data', data, 'noscroll') --> type noscroll ontbreekt om te scrollen

Hoe kan ik een klasse van rij uitbreiden?

Kijk naar de {{ if active-lijn, het vergroot een rangklasse door dg-active-class toe te voegen als de active geldig is

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

Gebruik het met <ui-component name="datatable">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>