j-DataGrid

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Ta sieć została stworzona dla aplikacji pojedynczej strony i aplikacji przedsiębiorstw.

Potrzebny system bootstrap
Możesz zrealizować więcej niż 30 000 kolejek bez żadnych problemów
Wsparcie dla kolumny drag&drop
Wsparcie dla sortowania
wspiera odtwarzanie kolumn
wspiera pionowe / horyzontalne skręcanie
Wsparcie filtrów
Wsparcie dla checkboxes
Niezależne skrzyniarki na OS
Odpowiedź
Wsparcie - mody ciemne
IMPORTANT Opcje kolumny filtry wymagają składnika j-Directory

To-do:

Wielogodność
Odtwarzanie kolumn do urządzeń dotykowych
Znowocześnianie kolumn dla urządzeń dotykowych

Data-source musi zawierać:

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

lub surowy Array, ale nie można używać stron i zewnętrznych filtrów:

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

Konfiguracja:

filterlabel {String} - domyślny pojemnik dla wszystkich filtrów (opcjonalny)
rememberfilter {Boolean} z prawdziwym przypomina filtry dla każdego schematu (default: true)
schema {String} standardowy schemat (default: default)
Pluralizacja pluralizepages {String} dla stron (opcjonalna, domyślna: # pages,# page,# pages,# pages)
Pluralizacja pluralizeitems {String} dla elementów (opcjonalna, domyślna: # items,# item,# items,# items)
height {Number/String} Wysokość sieci, wartości wspierane: auto (wstępnie) - Nowy fluid, parent lub parent1, parent2) lub NUMBER Wysokość lub selector dla jQuery.closest()
minheight {Number} minimalna wysokość siatki, praca z fluid i auto wysokość (default: 200)
Wybór parent {String} dla opcji wysokości auto (default: window)
margin {Number} - najwyższa marża wysokości (opcjonalna, domyślna: 0)
boolean {String} wartość do filtracji wartości boolean (opcjonalnie, wstępnie: true|on|yes)
resize {Boolean} umożliwia odtwarzanie kolumn (opcjonalne, domyślnie: true)
reorder {Boolean} umożliwia ponowne zamówienie kolumn (opcjonalne, domyślnie: true)
sorting {Boolean} umożliwia sortowanie (opcjonalne, standardowe true)
remember {Boolean} przypomina kolumny ponownego zamówienia i odtwarzania (opcjonalne, domyślne true)
checkbox {Boolean} umożliwia kontrolę
colwidth {Number} standardowy szerokość kolumny w pikselach (opcjonalny, standardowy 150)
rowheight {Number} standardowy poziom wysokości w pikselach (opcjonalny, standardowy: 24) + zależy od CSS
alignheader {String/Number} Align dla header right lub 2) lub center lub 1Opcjonalne i nieprawidłowe: left)
alignfilter {String/Number} Align dla filtra wejścia right lub 2) lub center lub 1Opcjonalne i nieprawidłowe: left)
align {String/Number} Align dla wartości kolumny right lub 2) lub center lub 1Opcjonalne i nieprawidłowe: left)
click {String} link do ścieżki lub function(row, grid, row_el), rekord zostanie przypisany/wykonany, jeśli użytkownik kliknie na kolejkę
clickid {String} nazwa identyfikatorów/właściwości do odtwarzania wstecz (dla poprzedniego podniesienia kolejności), domyślnie: id
highlight {Boolean} w każdym wybranym rzędzie (po click) zostanie podkreślony (default: false)
unhighlight {Boolean} umożliwia undo highlighting z wybranego rzędu (default: true)
checked {String} path do zmiennej lub ścieżki do function(rows, grid) jest wykonany, jeśli użytkownik wybiera / sprawdza kilka kolejek
autoselect {Boolean} umożliwia automatyczne wybór pierwszej kolejności w sieci, wykonuje EXEC(config.click), domyślnie: false
limit {Number} limit klastru, wstępne: 80
numbering {Boolean}, opcjonalny standard false
allowtitles {Boolean}, umożliwia tytuły dla wszystkich wartości kolejnych, opcjonalny standard false
Połączenie button {String} do function(btn_name, row, btn_element, event, name) jest wykonane, jeśli użytkownik kliknie na przycisk __ w kolejce
exec {String} link do function(type, filter, sort, page) tylko dla operacji z serwera (nie umożliwia to sortowania i filtracji z klienta), wspierane typy: refresh lub page
changed {String} path do zmiennej lub ścieżki do function(rows, grid) jest wykonany, jeśli użytkownik zmieni niektóre rzędy
change {String/Boolean} boolean umożliwia wewnętrzne edycje lub strona musi zawierać path do zmiennej lub ścieżka do function(meta, next(meta)) jest wykonywana, jeśli użytkownik dwukrotnie kliknie na kolumnę (meta może być null jeśli sieć jest odświeżona) + next(null) zastępuje poprzednią treść ponownie
columns {String} – droga do definicji columns {Array}
dblclick {String} jest linkem do metody function(row, grid, row_el), wykonuje się, jeśli użytkownik kliknie dwukrotnie na kolejkę
noborder {Boolean} może wyłączyć granicę wokół sieci (default: false)
clusterize {Boolean} może wyłączyć skręcanie zbiorowe (default: true)
contextmenu {String} link do function(e, grid) kiedy użytkownik podnosi menu kontekstu
autoformat {Boolean} umożliwia automatyczne formaty, takie jak email, phone i number (default: true)
controls {Boolean} umożliwia kontrolę określoną w columns (default: true)
hfunc {String} jest linkem do metody function(el), jest wykonywany, jeśli użytkownik kliknie ikonę dodaną do bardzo pierwszego rzędu nagłówków. usefull do integracji innego składnika z DataGrid. np. j-filter
Ikony hfuncicon {String} hfunc np. domowe, cog itp.
pagination {Boolean} umożliwia/nie umożliwia przeglądanie stron (default: true)
- config.exec zostanie wykonany, jeśli pasek jest na końcu, a można go użyć jako surową odpowiedź array rzęs
ovalue {String} klucz domyślny do uzyskania value z column.options (domyślne: id)
otext {String} klucz domyślny do uzyskania text z column.options (domyślne: name)

Kolumna właściwości:

name {String} - nazwa pola w kolejce obiektu
text {String} etykietę kolumny, tekst z .ti ti-home będzie wyświetlać ikonę Total
title {String} - typ narzędzi kolumny (opcjonalny)
width {Number} szerokość kolumny (opcjonalna, domyślna config.colwidth)
filter {String/Boolean} miejsce dla filtra lub boolean może wyłączyć filtr dla tej kolumny (opcjonalnie)
filtervalue {Object} opcjonalny, wartość wstępnie zdefiniowana (default: undefined)
filtertype {Number/String}, 1 zablokuje wyszukiwanie inteligentne (default: 0 - oznacza to, że wyszukiwarka inteligentna jest włączona)
align {String} może być center lub right (opcjonalnie, domyślnie: left)
template {String} może być szablonem Tangular i model jest całym obiektem kolejki
sorting {Boolean} umożliwia sortowanie (opcjonalne, domyślne: true)
search {Boolean/String} true filtruje wartość według wyniku template lub String może być szablonem Tangular, który będzie używany jako wartość do wyszukiwania
format {String/Number} może być używany do daty i liczby (liczba dziesięcioleci) pola (opcjonalne), na przykład dd.MM.yyyy
hide {Boolean} ukrywa kolumnę
listcolumn {Boolean}:prawdziwe, fałszywe do usuwania kolumny z listy kolumn
hidden {String} jako strzałka funkcja column => true -> kolumna będzie ukryta (np. dla ograniczenia użytkownika)
options {Object Array} opcjonalny, filtracja dostosowana np. [{ text: 'yes', value: true }, { text: 'no', value: false }] o {String}r link do źródła danych
otext {String} opcjonalny, klucz do pola text w options, domyślnie config.otext
ovalue {String} opcjonalny, klucz do pola value w options, domyślnie config.ovalue
buttonapply {String} opcjonalny, etykieta dla przycisku Apply w kolumnach, domyślnie: Apply
class {String} opcjonalny, nazwa klasy kolumny
empty {String/Boolean} opcjonalny, może ponownie napisać pustą wartość z wartościami zdefiniowanymi w pustym polu (wartość true wykorzystuje --- jako wartość domyślną)
min {Number} edytowane tylko min. wartość
max {Number} odpowiedni tylko max. wartość
required {Boolean} - tylko edytowane
dirsearch {String/Boolean} miejsce do wyszukiwania j-Directory, boolean z false będzie wyłączyć wyszukiwanie
type {String} opcjonalny, może zawierać typ danych (string, boolean, date, number, email, phone lub url) dla pola
editable {Boolean} umożliwia edycję
currency {String} nazwa waluty (musi być zdefiniowana w DEF.currencies)
editable {String} Droga do dostępu do edycji function(meta)Ważne jest: meta.next(new_value) lub meta.cancel()
colorize {Boolean} umożliwia kolorowanie wartości
monospace {Boolean} umożliwia typ czcionki monospace
NEW raw {Boolean} umożliwia/nie pozwala na ucieczkę HTML w filtrach kolumn (default: false)
NEW pair {Boolean} umożliwia/zniesie wartość automatyczną w połączeniu z konfiguracją options (default: false)

Kontrola przepływu (NOW):

Można go zdefiniować jako typ kolumny controls
powinny być zdefiniowane kolumny template (Tangular, row jest modelem dla Tangular dla każdego rzędu)
Zobacz przykład
Przycisk wydarzenia click jest przechowywany do config.button

Filtrowanie:

numbers: (1) number wyszukuje dokładną liczbę, (2) number - number jest odstępem między liczbami
strings: (1) string wyszukuje dokładną łańcuch, (2) string1, string2, string3 jest wielokrotnym kryterium wyszukiwania
dates1) rok 2017 Wszelkie daty w tym roku (2) 2017-02-12 - 2017-03-13 -- 02.12.2017 - 13.03.2017 jest okres między datami, (3) 12-20 - 12-31 -- 20.12 - 31.12 Rozkład między datami w bieżącym roku i (4) 2017-01 - 2018-05 -- 01.2017 - 05.2018 lub (5) -5 days -- -1 week -- -10 years

Metody:

component.redraw([reselect_again]) może odtwarzać kolejki ponownie (tylko w przypadku modyfikacji, jeśli usuniesz pewne kolejki, które musisz zaktualizować cały model)
component.resetfilter() może ustawić filtr
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]) może eksportować linie z renderowaniem ze strony serwera
component.appendrow(row_object, [scrolldown], [prepend]) wskazywa i rzuca
component.redrawrow(row_object, [new_object_row]) redraws rzędu lub NEW: zastępuje +redraws row_object z nowym new_object_row
component.clear() oczyszcza wszystkie zmiany
component.select(row) wybiera row musi być tym samym przedmiotem jak w źródle danych
component.editcolumn(row_index, col_index) wykonuje config.change wewnętrznie (tylko do zaawansowanego użytku)
component.applyfilter(obj) może zastosować filtrację { name: 'Peter', age: '20 - 50' }
component.resetcolumns() powtórza kolumny
component.readfilter() zwraca aktualny filtr
component.rebind(schemaname__or__columnsdeclaration) metodą odzwierciedla schemat
component.reload() wykonuje config.exec z bieżącym filtrem i sortowaniem
component.empty() Empty wszystkie rzędy
component.redrawcolumns() odświeża kolumny bez ich ponownego ustawienia
NEW: component.schema(name) zmienia schemat i odświeża dane

Właściwości:

component.meta zwraca wewnętrzne informacje o filtrach, kolumnach i rzędach

Dobrze wiedzieć:

NULL('link.to.data') oceny config.exec
SET('link.to.data', data, 'noscroll') -> typ noscroll zaburza ponownego ustawienia skręcania

Jak rozszerzyć klasę kolejności?

Spójrz na linię {{ if active }}, rozszerza klasę kolejności poprzez dodanie dg-active-class, jeśli active będzie ważny

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

Wiele schematów:

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

Użyj go z <ui-component name="datagrid">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT.

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>