j-DataGrid

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

Detta nätverk skapades för enskilda sidor och företagsprogram.

nödvändigt bootstrap-system
Du kan göra mer än 30 000 rader utan problem
Stöd för drag & drop kolumner
Stöd för sortering
Stöd för att återställa kolumner
stödjer vertikal/horisontell skruvning
Stöd för filter
Stöd för checkboxes
Custom scrollbars oberoende på OS
Svarande
Stöd för dark mode
IMPORTANT kolumnalternativ filter behöver j-Directory komponent

Totala:

multisort
återställande kolumner för beröringsanordningar
Återbeställa kolumner för berörda enheter

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

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

eller rå Array, men du kan inte använda sidningar och externa filter:

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

Konfigurera:

filterlabel {String} en standardplatsbehållare för alla filter (valfritt)
rememberfilter {Boolean} med sant det påminner om filter för varje schema (default: true)
schema {String} en standard schema (default: default)
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 parent1, parent2) eller NUMBER som höjd eller selector för jQuery.closest()
Minimalt minheight {Number}-höghet, arbetar med fluid och auto-högheten (default: 200)
parent {String}-selektor för auto höjdalternativ (default: window)
margin {Number} en toppmarginal för höjd (alternativ, standard: 0)
boolean {String} ett värde för filtrering av booleanvärden (alternativt, standard: true|on|yes)
resize {Boolean} gör det möjligt att återställa kolumner (alternativt, standard: true)
reorder {Boolean} möjliggör ombeställning av kolumner (alternativt, standard: true)
sorting {Boolean} möjliggör sortering (alternativ, standard true)
remember {Boolean} påminner om att ordna om och återställa kolumner (alternativt, standard true)
checkbox {Boolean} möjliggör checkboxar
colwidth {Number} en standardkolumn bredd i pixlar (alternativt, standard 150)
rowheight {Number} en standard radhöjd i pixlar (alternativt, standard: 24) + det beror på CSS
alignheader {String/Number} Align för header right eller 2) eller center eller 1(Förutsatt och standard) left)
alignfilter {String/Number} Anpassning för filter right eller 2) eller center eller 1(Förutsatt och standard) left)
align {String/Number} Anpassning för ett kolumnvärde right eller 2) eller center eller 1(Förutsatt och standard) left)
click {String} en länk till en väg eller function(row, grid, row_el), ett register kommer att tilldelas/exekveras om användaren klickar på en rad
clickid {String} ett identifierings- och egendomsnamn för bakåtvisning (för föregående radhögtalare), standard: id
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
limit {Number} en klustergräns, standard: 80
numbering {Boolean}, standard för valfri false
allowtitles {Boolean}, möjliggör titlar för alla radvärden, standard false
button {String} en länk till function(btn_name, row, btn_element, event, name) körs om användaren klickar på en button i raden
exec {String} en länk till function(type, filter, sort, page) 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
change {String/Boolean} boolean möjliggör intern redigering eller sträng måste innehålla en path till en variabel eller väg till function(meta, next(meta)) körs om användaren dubbelklickar på en kolumn (meta kan vara null om nätverket är uppfrisknat) + next(null) ersätter tidigare innehåll igen
columns {String} en väg till definition av columns {Array}
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)
clusterize {Boolean} kan inaktivera klusterad snurrning (default: true)
contextmenu {String} en länk till function(e, grid) när användaren lyfter sammanhangsmenyn
autoformat {Boolean} möjliggör automatiska typer som email, phone och number (default: true)
controls {Boolean} möjliggör kontroller definierade i columns (default: true)
hfunc {String} en länk till function(el) metod, det körs om användaren klickar på ikonen som läggs till den första header raden. usefull att integrera andra komponenter med DataGrid. t.ex. j-filter
hfuncicon {String} hfunc ikon t.ex. hem, cog, etc.
pagination {Boolean} aktiverar/avaktiverar sidan (default: true)
- config.exec kommer att utföras om skruvfältet är i slutet, och du kan använda som råvaror av array rader
ovalue {String} en standardnyckel för att få value från column.options (default: id)
otext {String} en standardnyckel för att få text från column.options (default: name)

Kolumner egenskaper:

name {String} ett fältnamn i raden objekt
text {String} en kolumn etikett, text med .ti ti-home kommer att göra Total ikon
title {String} en kolumn verktygstyp (alternativ)
width {Number} en kolumn bredd (alternativt, standard config.colwidth)
filter {String/Boolean} en platsinnehavare för filtret eller boolean kan inaktivera filter för denna kolumn (alternativt)
filtervalue {Object} valfritt, ett fördefinierat filtervärde (vanligt: undefined)
filtertype {Number/String}, 1 inaktiverar smart sökning (default: 0 - det innebär att smart sökningen är aktiverad)
align {String} kan vara center eller right (alternativt, standard: left)
template {String} kan vara en Tangular mall och modellen är hela objektet i raden
sorting {Boolean} möjliggör sortering (alternativ, standard: true)
search {Boolean/String} true kommer att filtrera ett värde enligt template resultat eller String kan vara en Tangular mall som kommer att användas som ett värd för sökning
format {String/Number} kan användas för datum och siffror (antal decimaler) fält (alternativ), t.ex. dd.MM.yyyy
hide {Boolean} döljer en kolumn
listcolumn {Boolean} standard: sanna, falska för att ta bort kolumner från kolumnen lista
hidden {String} som en pil funktion column => true --> kolumnen kommer att döljas (t.ex. för begränsande användare)
options {Object Array} valfritt, en anpassad filter till exempel [{ text: 'yes', value: true }, { text: 'no', value: false }] o {String}r länk till datakälla
otext {String} valfritt, en nyckel för text fält i options, standard config.otext
ovalue {String} valfritt, en nyckel för value fält i options, standard config.ovalue
buttonapply {String} valfritt, en etikett för Apply knappen i kolumner, standard: Apply
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)
min {Number} _ redigerbar endast__ ett min. antal värde
max {Number} _ redigerbar endast__ ett max. nummervärde
required {Boolean} - endast redigerbar
dirsearch {String/Boolean} en platsinnehavare för j-Directory sökning, boolean med false kommer att inaktivera sökningen
type {String} är valfritt, kan innehålla en datatyp (string, boolean, date, number, email, phone eller url) för fältet
editable {Boolean} möjliggör redigering
currency {String} ett valutanamn (kan definieras i DEF.currencies)
editable {String} En väg till anpassad redigerbar function(meta), viktig: meta.next(new_value) eller meta.cancel()
colorize {Boolean} möjliggör färgning av värdet
monospace {Boolean} möjliggör monospace font typ
NEW raw {Boolean} möjliggör/aktiverar HTML-flykt i kolumner (default: false)
NEW pair {Boolean} aktiverar/deaktiverar automatisk värde i kombination med options-konfigurationen (default: false)

Råkontroll (NEW):

kan definieras som kolumntyp controls
måste definiera kolumnen template (Tangular, row är en modell för Tangular för varje rad)
Se till exempel
knappen click händelse fångas till config.button

Filtrera:

numbers: (1) number söker ett exakt nummer, (2) number - number är ett intervall mellan siffrorna
strings: (1) string söker en exakt sträng, (2) string1, string2, string3 är ett flera sökkriterium
dates(1) år 2017 Sök alla datum i år, (2) 2017-02-12 - 2017-03-13 -- 02.12.2017 - 13.03.2017 är ett intervall mellan datum, (3) 12-20 - 12-31 -- 20.12 - 31.12 ett intervall mellan datum i det aktuella året (4) 2017-01 - 2018-05 -- 01.2017 - 05.2018 eller (5) -5 days -- -1 week -- -10 years

Metoder:

component.redraw([reselect_again]) kan återskapa rader (endast för ändringar, om du tar bort några rader som du behöver för att uppdatera hela modellen)
component.resetfilter() kan återställa ett filter
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 exportera rader med server-side rendering
component.appendrow(row_object, [scrolldown], [prepend]) appends och renderar
component.redrawrow(row_object, [new_object_row]) 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.editcolumn(row_index, col_index) utför config.change internt (endast för avancerad användning)
component.applyfilter(obj) kan tillämpa en anpassad filter { name: 'Peter', age: '20 - 50' }
component.resetcolumns() återställer kolumner
component.readfilter() returnerar ett aktuellt filter
component.rebind(schemaname__or__columnsdeclaration)-metoden återställer schemat
component.reload() utför config.exec med den aktuella filter och sortering
component.empty() empties alla rader
component.redrawcolumns() redraw kolumner utan att ställa in dem
NEW: component.schema(name) ändrar en schema och förnyar data

ägodelar:

component.meta returnerar interna meta-information om filter, kolumner och rader

Bra att veta:

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

Flera scheman:

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

Använd den med <ui-component name="datagrid">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

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