j-DataGrid

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

Dit netwerk is gemaakt voor single-page toepassingen en bedrijfsapplicaties.

Een bootstrap-netwerk nodig
U kunt meer dan 30 000 ronden zonder problemen maken
Draag en drop columns
Ondersteunt het sorteren
ondersteunt het herstellen van kolommen
Ondersteunt verticale/horizontaal scrolling
Ondersteunt filters
Ondersteunt checkboxes
Custom scrollbars onafhankelijk op OS
Reactie
Ondersteunt het donkere mode
IMPORTANT kolomopties filter vereist j-Directory component

To-do:

Multisort
Columns voor touch-apparaten
herbestellen van kolommen voor touch-apparaten

_Data-bron__ moet bevatten:

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

of grondige Array, maar u kunt geen pagina's en externe filters gebruiken:

[{ name: 'Row 1' }, { name: 'Row 2' }];

Configuratie:

filterlabel {String} een standaard plaatshouder voor alle filters (optional)
rememberfilter {Boolean} met waar het herinnert de filters voor elk schema (default: true)
schema {String} een standaard schema (default: default)
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 parent1, parent2) of NUMBER Als hoogte of selector voor jQuery.closest()
minheight {Number} minimale hoogte van het netwerk, werkt met fluid en auto hoogte (default: 200)
parent {String} selector voor de auto hoogte optie (default: window)
margin {Number} een topmarge voor hoogte (optional, standaard: 0)
boolean {String} een waarde voor het filteren van booleanwaarden (optional, default: true|on|yes)
resize {Boolean} maakt het mogelijk om kolommen te herstellen (optional, default: true)
reorder {Boolean} maakt het mogelijk om kolommen te herbestellen (optional, default: true)
sorting {Boolean} maakt het mogelijk om te sorteren (optional, default true)
remember {Boolean} herinnert aan re-order en resing kolommen (optional, standaard true)
checkbox {Boolean} maakt checkboxes mogelijk
colwidth {Number} een standaard kolombreedte in pixels (optional, standaard 150)
rowheight {Number} een standaard rijhoogte in pixels (optional, standaard: 24) + het hangt af van CSS
alignheader {String/Number} Align voor header right ( of 2) of center ( of 1(Optioneel en standaard) left)
alignfilter {String/Number} Align voor filterinput right ( of 2) of center ( of 1(Optioneel en standaard) left)
align {String/Number} Align voor een kolom waarde right ( of 2) of center ( of 1(Optioneel en standaard) left)
click {String} een link naar een pad of function(row, grid, row_el), een record wordt toegewezen/uitgevoerd als de gebruiker op een rij klikt
clickid {String} een identificator/eigendomsnaam voor terugwerkende redrawing (voor voorafgaande volgorde highlight), standaard: id
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
limit {Number} een clusterslimit, standaard: 80
numbering {Boolean}, optionele standaard false
allowtitles {Boolean}, toelaat titels voor alle rijwaarden, optionele standaard false
button {String} een link naar function(btn_name, row, btn_element, event, name) wordt uitgevoerd als de gebruiker op een button klikt in de volgorde
exec {String} een link naar function(type, filter, sort, page) 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
change {String/Boolean} boolean toelaat interne bewerking of string moet een path bevatten tot een variabele of de route naar function(meta, next(meta)) wordt uitgevoerd als de gebruiker tweemaal op een kolom klikt (meta kan null zijn als het netwerk is verfrissend) + next(null) vervangt de vorige inhoud weer
columns {String} een weg naar de definitie van columns {Array}
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)
clusterize {Boolean} kan worden uitgeschakeld door clustering (default: true)
contextmenu {String} een link naar function(e, grid) wanneer de gebruiker het contextmenu opneemt
autoformat {Boolean} maakt auto-formaten zoals email, phone en number mogelijk (de standaard: true)
controls {Boolean} maakt controles mogelijk zoals gedefinieerd in columns (default: true)
hfunc {String} een link naar de function(el) methode, het wordt uitgevoerd als de gebruiker klikt op de icoon toegevoegd aan de eerste headerlijn. usefull om andere componenten te integreren met DataGrid.
hfuncicon {String} hfunc icon bijvoorbeeld thuis, cog, enz.
pagination {Boolean} mogelijk / niet mogelijk pagina's (default: true)
- config.exec zal worden uitgevoerd als de scrollbar aan het einde is en u kunt gebruiken als de grondrespons array van rijen
ovalue {String} een standaard sleutel voor het verkrijgen van value van column.options (default: id)
otext {String} een standaard sleutel voor het verkrijgen van text van column.options (default: name)

Column eigenschappen:

name {String} een naam van het veld in de volgorde object
text {String} een kolom label, tekst met .ti ti-home zal de totale icoon
title {String} een kolom tooltip (optional)
width {Number} een kolombreedte (optional, standaard config.colwidth)
filter {String/Boolean} een plaatshouder voor het filter of boolean kan de filter voor deze kolom uit te schakelen (optional)
filtervalue {Object} optioneel, een vooraf gedefinieerde filterwaarde (default: undefined)
filtertype {Number/String}, 1 schakelt smart search uit (de standaard: 0 - het betekent dat smart search is geactiveerd)
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
sorting {Boolean} maakt het mogelijk om te sorteren (optional, default: true)
search {Boolean/String} true zal een waarde filteren volgens het resultaat van template of String kan een Tangular template zijn die als waarde wordt gebruikt voor zoekopdrachten.
format {String/Number} kan worden gebruikt voor de datum en cijfers (het aantal decimalen) veld (optional), bijvoorbeeld dd.MM.yyyy
hide {Boolean} verbergt een kolom
listcolumn {Boolean} standaard:waar, vals voor het verwijderen van kolom uit de kolomlijst
hidden {String} als een pijlfunctie column => true -> kolom zal verborgen zijn (bijvoorbeeld voor beperkende gebruikers)
options {Object Array} optioneel, een aangepaste filter bijvoorbeeld [{ text: 'yes', value: true }, { text: 'no', value: false }] o {String}r link naar gegevensbron
otext {String} optioneel, een sleutel voor het veld text in options, standaard config.otext
ovalue {String} optioneel, een sleutel voor het veld value in options, standaard config.ovalue
buttonapply {String} optioneel, een label voor de knop Apply in kolommen, standaard: Apply
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)
min {Number} editable slechts een min. waarde
max {Number} editeerbaar slechts max. getal waarde
required {Boolean} - alleen te bewerken
dirsearch {String/Boolean} een plaatshouder voor de j-Directory zoekopdracht, boolean met false zal de zoekopgave uitschakelen
type {String} optioneel, kan een gegevenstype bevatten (string, boolean, date, number, email, phone of url) voor het veld
editable {Boolean} kan worden bewerkt
currency {String} een muntnaam (dat moet worden gedefinieerd in DEF.currencies)
editable {String} Een weg naar aangepaste bewerkbare function(meta), belangrijk: meta.next(new_value) of meta.cancel()
colorize {Boolean} zorgt voor een kleur van de waarde
monospace {Boolean} maakt monospace font type mogelijk
NEW raw {Boolean} maakt/verwijdert HTML ontsnappen in kolomfilters (default: false)
NEW pair {Boolean} toelaat/uitgeeft auto-waarde in combinatie met de configuratie van options (default: false)

Routenbeheersing (NIE):

kan worden gedefinieerd als kolomtype controls
moet worden gedefinieerd kolom template (Tangular, row is een model voor Tangular voor elke rij)
Kijk naar het voorbeeld
De knop click gebeurtenis wordt opgenomen naar config.button

Filteren:

numbers: (1) number zoekt een exacte getal, (2) number - number is een interval tussen cijfers
strings: (1) string zoekt een nauwkeurige lijn, (2) string1, string2, string3 is een meerdere zoekcriteria
dates1 jaar 2017 Zoeken naar alle data in dit jaar (2) 2017-02-12 - 2017-03-13 -- 02.12.2017 - 13.03.2017 is een interval tussen de datum, (3) 12-20 - 12-31 -- 20.12 - 31.12 een interval tussen de datum in het huidige jaar en (4) 2017-01 - 2018-05 -- 01.2017 - 05.2018 of (5) -5 days -- -1 week -- -10 years

Methoden:

component.redraw([reselect_again]) kan de lijnen opnieuw redraw (alleen voor wijzigingen, als u een aantal lijnen verwijdert die u nodig hebt om het hele model te updaten)
component.resetfilter() kan een filter herstellen
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]) kan rijen exporteren met server-side rendering
component.appendrow(row_object, [scrolldown], [prepend]) appends en renderen
component.redrawrow(row_object, [new_object_row]) 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.editcolumn(row_index, col_index) uitvoert config.change intern (alleen voor geavanceerd gebruik)
component.applyfilter(obj) kan een aangepaste filter gebruiken { name: 'Peter', age: '20 - 50' }
component.resetcolumns() herstelt kolom
component.readfilter() geeft een huidige filter terug
component.rebind(schemaname__or__columnsdeclaration) de methode herbindt het schema
component.reload() executeert config.exec met de huidige filter en sortering
component.empty() empties alle rijen
component.redrawcolumns() redraw kolommen zonder ze te herstellen
NEW: component.schema(name) wijzigt een schema en verfrissert gegevens

eigenschappen:

component.meta geeft interne meta-informatie over filters, kolommen en lijnen terug

Goed om te weten:

NULL('link.to.data') beoordeelt config.exec
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 ...
]

Multiple schema's:

<ui-component name="datagrid" path="obj">

	<script type="text/plain" data-id="SCHEMA_A">
		[
			{ name: 'name', text: 'Name', width: 200 },
			// ...
		]
	</script>

	<script type="text/plain" data-id="SCHEMA_B">
		[
			{ name: 'price', text: 'Price', width: 100 },
			// ...
		]
	</script>

</ui-component>

<script>
	// Usage
	var obj = {};
	obj.schema = 'SCHEMA_A';
	obj.items = [];

	// Changing of schema
	setTimeout(function() {
		obj.schema = 'SCHEMA_B';
		obj.items = [];
		UPD('obj');
	}, 5000);
</script>

Gebruik het met <ui-component name="datagrid">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

<ui-component name="LAZY directory"></ui-component>
<ui-component name="datagrid" path="items" config="margin:22;button:clicked">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', width: 200 },
			{ name: 'price', text: 'Price', align: 1, alignfilter: 1 },
			{ name: 'published', text: 'Public', align: 1, options: [{ name: 'yes', id: true }, { name: 'no', id: false }], type: 'boolean' },
			{ name: 'description', text: 'Description', filter: 'Search in description' },
			{ name: 'created', text: 'Created', template: '{{ created | format(\'dd.MM.yyyy\') }}', align: 2, alignfilter: 2, alignheader: 2 },
			{ type: 'controls', template: '<button name="show"><i class="ti ti-search"></i><span>Show</span></button><button name="edit"><i class="ti ti-pencil"></i></button><button name="remove"><i class="ti ti-trash red"></i></button>' }
		]
	</script>
</ui-component>

<script>

	var items = [];
	for (var i = 1; i < 90; i++)
		items.push({ name: '{0} Lorem ipsum dolor'.format(i), published: i % 5 !== 0, description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: i + 100, created: new Date().add('-5 days') });

	function clicked(btnname, row, button, e) {
		console.log(btnname, row);
	}

</script>