ForgeComponente
ro
English Español Slovenčina Deutsch Français Italiano Português Polski Čeština Nederlands Română Magyar Svenska Ελληνικά Български

Componente

j-DataGrid

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

Această rețea a fost creată pentru aplicații de o singură pagină și aplicații corporative.

  • Sistemul de rețea bootstrap
  • Puteți face mai mult de 30.000 de rânduri fără probleme
  • Cuvânt cheie: drag & drop columns
  • susținerea sortării
  • susține recidivarea coloanelor
  • susține scrollarea verticală/orizontală
  • susține filtrele
  • Suport pentru checkboxes
  • Scrollbars independente pe OS
  • Răspunsuri
  • Modul întunecat - Dark Mode
  • IMPORTANT opțiuni de column filtru necesită componentul j-Directory

To-do:

  • Multisortul
  • Columne pentru dispozitivele de contact
  • Reordinează coloanele pentru dispozitivele de atingere

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

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

sau Array crud, dar nu puteți folosi paginație și filtre externe:

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

Configurarea:

  • filterlabel {String} este un locator standard pentru toate filtrele (opțional)
  • rememberfilter {Boolean} cu adevărat se amintește de filtre pentru fiecare schemă (default: true)
  • schema {String} este un schemă standard (default: default)
  • 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 parent1, parent2sau NUMBER Înălțimea sau selector pentru jQuery.closest()
  • Înălțimea minimă a rețelei minheight {Number}, funcționează cu înălțimi fluid și auto (default: 200)
  • Selectorul parent {String} pentru opțiunea de înălțime auto (default: window)
  • margin {Number} este o marjă de înălțime (opțional, standard: 0)
  • boolean {String} este o valoare pentru filtrarea valorilor boolean (opțional, standard: true|on|yes)
  • resize {Boolean} permite redimensionarea coloanelor (opțional, standard: true)
  • reorder {Boolean} permite reordinea coloanelor (opțional, standard: true)
  • sorting {Boolean} permite sortarea (opțional, standard true)
  • remember {Boolean} reamintește coloanele de reordine și reîncărcare (opțional, standard true)
  • checkbox {Boolean} permite cutii de control
  • colwidth {Number} o lățime de coloană implicită în pixeli (opțional, 150)
  • rowheight {Number} este o înălțime de rând standard în pixeli (opțional, standard: 24) + depinde de CSS
  • alignheader {String/Number} Align pentru titlu right sau 2sau center sau 1(în mod opțional și în mod default) left)
  • alignfilter {String/Number} Align pentru filtrul de intrare right sau 2sau center sau 1(în mod opțional și în mod default) left)
  • align {String/Number} Align pentru o valoare coloană right sau 2sau center sau 1(în mod opțional și în mod default) left)
  • click {String} un link la o cale sau function(row, grid, row_el), un record va fi atribuit/executat dacă utilizatorul face clic pe o rată
  • clickid {String} un nume de identificator/proprietate pentru redragerea înapoi (pentru evidența din rândul anterior), standard: id
  • 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
  • limit {Number} o limită de cluster, standard: 80
  • numbering {Boolean}, standard de preferință false
  • allowtitles {Boolean}, permite titlurile pentru toate valorile de rând, standardul opțional false
  • button {String} un link la function(btn_name, row, btn_element, event, name) este executat dacă utilizatorul face clic pe un buton __ în rând
  • exec {String} este un link la function(type, filter, sort, page) 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
  • change {String/Boolean} boolean permite editarea internă sau string trebuie să conțină un path la o variabilă sau traseul către function(meta, next(meta)) este executat dacă utilizatorul face dublu clic pe o coloană (meta poate fi null dacă rețeaua este refrescată) + next(null) înlocuiește din nou conținutul anterior
  • columns {String} este o cale spre definiția columns {Array}
  • 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)
  • clusterize {Boolean} poate dezactiva scrollarea clusterată (default: true)
  • contextmenu {String} un link la function(e, grid) atunci când utilizatorul ridică meniul de context
  • autoformat {Boolean} permite tipuri de formate auto, cum ar fi email, phone și number (default: true)
  • controls {Boolean} permite controlurile definite în columns (default: true)
  • hfunc {String} este un link la metoda function(el), se execută dacă utilizatorul face clic pe pictura adăugată în prima linie de titlu. usefull pentru a integra un alt component cu DataGrid.
  • hfuncicon {String} hfunc icon, cum ar fi acasă, cog etc.
  • pagination {Boolean} permite/disabilizează paginarea (default: true)
    • config.exec va fi executat dacă scrollbarul este la capăt, și puteți folosi ca răspuns brut array de rânduri
  • ovalue {String} este o cheie standard pentru a obține value de la column.options (default: id)
  • otext {String} este o cheie standard pentru a obține text de la column.options (default: name)

Proprietăți coloană:

  • name {String} - un nume de câmp în obiectul de rând
  • text {String} este o etichetă coloană, textul cu .ti ti-home va reprezenta iconul Total
  • title {String} un tip de instrumente coloană (opțional)
  • width {Number} o lățime de coloană (opțional, standard config.colwidth)
  • filter {String/Boolean} este un depozitar pentru filtrul sau boolean poate dezactiva filtrul pentru această coloană (opțional)
  • filtervalue {Object} opțional, o valoare de filtrat predefinită (default: undefined)
  • filtertype {Number/String}, 1 dezactivează căutarea inteligentă (default: 0 - înseamnă că este activată căutările inteligente)
  • 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
  • sorting {Boolean} permite sortarea (opțional, standard: true)
  • search {Boolean/String} true va filtra o valoare în funcție de rezultatul template sau String poate fi un șablon Tangular care va fi folosit ca valoare pentru căutare
  • format {String/Number} poate fi utilizat pentru date și numere (numărul de decimale) câmp (opțional), de exemplu, dd.MM.yyyy
  • hide {Boolean} ascunde o coloană
  • listcolumn {Boolean}: adevărat, fals pentru îndepărtarea coloanei din lista coloanelor
  • hidden {String} ca o funcție de stea column => true -> coloana va fi ascunsă (de exemplu, pentru restricționarea utilizatorului)
  • options {Object Array} opțional, un filtr personalizat de exemplu [{ text: 'yes', value: true }, { text: 'no', value: false }] o {String}r link la sursa de date
  • otext {String} opțional, o cheie pentru câmpul text în options, standard config.otext
  • ovalue {String} opțional, o cheie pentru câmpul value în options, standard config.ovalue
  • buttonapply {String} opțional, etichetă pentru butonul Apply în coloane, standard: Apply
  • 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ă)
  • min {Number} editabil numai un număr min.
  • max {Number} editabil numai o valoare max.
  • required {Boolean} - numai editabil
  • dirsearch {String/Boolean} este un locator pentru căutarea j-Directory, boolean cu false va dezactiva căutările
  • type {String} opțional, poate conține un tip de date (string, boolean, date, number, email, phone sau url) pentru câmpul
  • editable {Boolean} permite editarea
  • currency {String} este un nume de monedă (trebuie să fie definit în DEF.currencies)
  • editable {String} Un drum către function(meta), important: meta.next(new_value) sau meta.cancel()
  • colorize {Boolean} permite o colorare a valorii
  • monospace {Boolean} permite tipul de font monospace
  • NEW raw {Boolean} permite/disabilizează scăderea HTML în filtre de coloană (default: false)
  • NEW pair {Boolean} permite/disabilizează valoarea automată în combinație cu configurația options (default: false)

Războiul de control (NEW):

  • poate fi definită ca tip de coloană controls
  • trebuie definită coloana template (Tangular, row este un model pentru Tangular pentru fiecare rând)
  • Vezi exemplul
  • butonul de eveniment click este capturat la config.button

Filtrarea:

  • numbers: (1) number caută un număr exact, (2) number - number este un interval între cifre
  • strings: (1) string caută o linie exactă, (2) string1, string2, string3 este un criteriu de căutare multiplă
  • dates• 1 an 2017 Caută toate datele din acest an (2) 2017-02-12 - 2017-03-13 -- 02.12.2017 - 13.03.2017 este un interval între date, (3) 12-20 - 12-31 -- 20.12 - 31.12 intervalul dintre datele din anul curent și (4) 2017-01 - 2018-05 -- 01.2017 - 05.2018 sau (5) -5 days -- -1 week -- -10 years

Metode:

  • component.redraw([reselect_again]) poate redrage din nou rândurile (numai pentru modificări, dacă veți elimina unele rânduri trebuie să actualizați întregul model)
  • component.resetfilter() poate fi reîncărcat un filtru
  • 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]) poate exporta rânduri cu rendering server-side
  • component.appendrow(row_object, [scrolldown], [prepend]) se încadrează și se înregistrează
  • component.redrawrow(row_object, [new_object_row]) 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.editcolumn(row_index, col_index) execută intern config.change (numai pentru utilizare avansată)
  • component.applyfilter(obj) poate aplica un filtr personalizat { name: 'Peter', age: '20 - 50' }
  • component.resetcolumns() columnă
  • component.readfilter() întoarce un filtru curent
  • component.rebind(schemaname__or__columnsdeclaration) - Metoda reflectă schema
  • component.reload() execută config.exec cu filtrul curent și sortarea
  • component.empty() Emptite toate rândurile
  • component.redrawcolumns() redraw coloane fără a le reinstala
  • NEW: component.schema(name) modifică un schemă și refrescă datele

Proprietăți:

  • component.meta returnează informații interne despre filtre, coloane și rânduri

bine să știi:

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

Scheme multiple:

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

Utilizați-l cu <ui-component name="datagrid">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
<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>