j-DataTable

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

BETA: Този компонент е насочен към SPA и списък на сървъра.

Поддържа страница
Необходима е система за bootstrap
Поддържат сортиране
Поддържа вертикално/хоризонтално скалиране
Реакция
Поддържат тъмния режим

Data-Source трябва да съдържа:

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

Конфигуриране:

Плурализация на pluralizepages {String} за страници (опционално, по подразбиране: # pages,# page,# pages,# pages)
Плурализация на pluralizeitems {String} за елементи (опционално, по подразбиране: # items,# item,# items,# items)
height {Number/String} Височина на мрежата, подкрепени стойности: auto (Предполага се, че е ново fluid, parent или NUMBER като височина или selector за jQuery.closest()
NEW minheight {Number} минимална височина на мрежата, работи с fluid и auto височина (предварително: 300)
NEW parent {String} селектор за опция за височина auto (предварително: window)
margin {Number} е най-високата маржа за височина (опционално, по подразбиране: 0)
click {String} е връзката към function(row, grid, row_el), тя се изпълнява, ако потребителят кликне върху реда
highlight {Boolean} всяка избрана линия (след click) ще бъде подчертано (предварително: false)
unhighlight {Boolean} позволява undo highlighting от избрания ред (предварително: true)
checked {String} path към променлива или път към function(rows, grid) се изпълнява, ако потребителят е избрал/проверил някои редове
autoselect {Boolean} позволява автоматично избиране на първия ред в мрежата, той изпълнява EXEC(config.click), по подразбиране: false
exec {String} е връзка към function(type, page, sort) само за сървърни операции (отключва клавиатурата и филтрирането на клиента), поддържани типове: refresh или page
changed {String} path към променлива или път към function(rows, grid) се изпълнява, ако потребителят промени някои редове
dblclick {String} е връзка към метода на function(row, grid, row_el), тя се изпълнява, ако потребителят щракне двойно върху реда
noborder {Boolean} може да деактивира границата около мрежата (предварително: false)
colwidth {Number} - стандартна ширина за колони (дефолт: 150)
editable {String} е връзка към function(opt) когато потребителят извършва редактиране
contextmenu {String} е връзка към function(e, grid) когато потребителят издига контекстното меню

Колонни свойства:

name {String} е името на полето в редица обекти
text {String} е колона, текстът с .fa fa-home ще направи FontAwesome икона
width {Number} - ширина на колона (опционално, по подразбиране config.colwidth)
align {String} може да бъде center или right (опционално, по подразбиране: left)
template {String} може да бъде шаблон на Tangular и моделът е целият предмет на реда
sort {Boolean} позволява класиране (опционално, по подразбиране: false)
format {String/Number} може да се използва за дата и числа (брояване на десетилетия) поле (опционално), например dd.MM.yyyy
currency {String} е валутен формат, просто добавете валута
class {String} опция, персонализирано име на класа
empty {String/Boolean} опционално, може да се пренапише празна стойност с определената в празно поле стойност (true използва --- като подразбираща стойност)
type {String} опционално, може да съдържа тип данни (boolean, date или number) за полето
editable {Boolean} позволява редактиране

Методи:

component.redrawrow(row_object/index) редуцира ред или NEW: замества + редуците на row_object с нов new_object_row
component.clear() разкрива всички промени
component.select(row) избира row трябва да бъде същият обект като в източника на данни
component.rebind(columnsdeclaration) Методът премахва схемата
NEW: component.reload() изпълнява config.exec с текущия филтър и сортиране
NEW: component.empty() empties всички редове

Добре е да се знае:

SET('link.to.data', data, 'noscroll') -> тип noscroll прекъсва рестаурацията на скалпа

Как да разширим класа?

Погледнете линията {{ if active, тя разширява класа на реда, като добавяте dg-active-class ако active е валиден

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

Използвайте го с <ui-component name="datatable">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>