j-DataTable

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

BETA: Ten element jest ukierunkowany na SPA i listę stron serwera.

Wsparcie strony
Potrzebny system bootstrap
Wsparcie dla sortowania
wspiera pionowe / horyzontalne skręcanie
Odpowiedź
Wsparcie - mody ciemne

Data-source musi zawierać:

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

Konfiguracja:

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 NUMBER Wysokość lub selector dla jQuery.closest()
NEW minheight {Number} minimalna wysokość siatki, działa z wysokością fluid i auto (default: 300)
NEW wybór parent {String} dla opcji wysokości auto (default: window)
margin {Number} - najwyższa marża wysokości (opcjonalna, domyślna: 0)
click {String} link do function(row, grid, row_el), jest wykonywany, jeśli użytkownik kliknie kolejkę
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
exec {String} link do function(type, page, sort) 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
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)
colwidth {Number} wstępna szerokość dla kolumn (wstępna: 150)
editable {String} link do function(opt) kiedy użytkownik wykonuje edycję
contextmenu {String} link do function(e, grid) kiedy użytkownik podnosi menu kontekstu

Kolumna właściwości:

name {String} - nazwa pola w kolejce obiektu
text {String} etykietę kolumny, tekst z .fa fa-home będzie FontAwesome ikona
width {Number} szerokość kolumny (opcjonalna, domyślna config.colwidth)
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
sort {Boolean} umożliwia sortowanie (opcjonalne, domyślne: false)
format {String/Number} może być używany do daty i liczby (liczba dziesięcioleci) pola (opcjonalne), na przykład dd.MM.yyyy
currency {String} formatera waluty, po prostu dodać walutę
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ą)
type {String} opcjonalny, może zawierać typ danych (boolean, date lub number) dla pola
editable {Boolean} umożliwia edycję

Metody:

component.redrawrow(row_object/index) 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.rebind(columnsdeclaration) metodą odzwierciedla schemat
NEW: component.reload() wykonuje config.exec z bieżącym filtrem i sortowaniem
NEW: component.empty() empties wszystkie rzędy

Dobrze wiedzieć:

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

Użyj go z <ui-component name="datatable">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

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