ForgeКомпоненти
bg
English Español Slovenčina Deutsch Français Italiano Português Polski Čeština Nederlands Română Magyar Svenska Ελληνικά Български

Компоненти

j-DataGrid

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

Тази мрежа е създадена за еднократни приложения и корпоративни приложения.

  • Необходима е система за bootstrap
  • Можете да направите повече от 30 000 реда без никакви проблеми
  • Поддръжка на Drag & Drop Columns
  • Поддържат сортиране
  • Поддържа рециклирането на колони
  • Поддържа вертикално/хоризонтално скалиране
  • Поддържа филтрите
  • Подкрепа за проверка
  • Скриншоти за независимост на OS
  • Реакция
  • Поддържат тъмния режим
  • ВЪЗМОЖНО колона опции филтърът изисква j-Directory компонент

До-до:

  • Многообразие
  • Рециклиране на колони за допирни устройства
  • Реорганизиране на колони за допирни устройства

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

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

или суров Array, но не можете да използвате страници и външни филтри:

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

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

  • filterlabel {String} е стандартно местоположение за всички филтри (опционално)
  • rememberfilter {Boolean} с истински той напомня филтри за всяка схема (предварително: true)
  • schema {String} е стандартна схема (дефолт: default)
  • Плурализация на pluralizepages {String} за страници (опционално, по подразбиране: # pages,# page,# pages,# pages)
  • Плурализация на pluralizeitems {String} за елементи (опционално, по подразбиране: # items,# item,# items,# items)
  • height {Number/String} Височина на мрежата, подкрепени стойности: auto (Предполага се, че е ново fluid, parent или parent1, parent2или NUMBER като височина или selector за jQuery.closest()
  • Минимална височина на мрежата minheight {Number}, работи с височина fluid и auto (предварително: 200)
  • parent {String} селектор за опция за височина auto (предварително: window)
  • margin {Number} е най-високата маржа за височина (опционално, по подразбиране: 0)
  • boolean {String} стойности за филтриране на булеанни стойности (опционално, по подразбиране: true|on|yes)
  • resize {Boolean} позволява рециклиране на колони (опционално, по подразбиране: true)
  • reorder {Boolean} позволява презареждане на колони (опционално, по подразбиране: true)
  • sorting {Boolean} позволява класиране (опционално, по подразбиране true)
  • remember {Boolean} напомня за реорганизиране и рециклиране на колони (опционално, по подразбиране true)
  • checkbox {Boolean} позволява проверка
  • colwidth {Number} е стандартна ширина на колоната в пиксели (опционално, стандартно 150)
  • rowheight {Number} е стандартна височина на реда в пиксели (опционално: 24) + зависи от CSS
  • alignheader {String/Number} Анализ на заглавието right или 2или center или 1(Опционално и дефолтно) left)
  • alignfilter {String/Number} Анализ на филтрирането right или 2или center или 1(Опционално и дефолтно) left)
  • align {String/Number} Анализ на стойността на колоната right или 2или center или 1(Опционално и дефолтно) left)
  • click {String} е връзка към пътят или function(row, grid, row_el), записът ще бъде назначен/изпълнен, ако потребителят кликне върху реда
  • clickid {String} идентификатор/име на имота за обратно редуциране (за предишния ред), по подразбиране: id
  • highlight {Boolean} всяка избрана линия (след click) ще бъде подчертано (предварително: false)
  • unhighlight {Boolean} позволява undo highlighting от избрания ред (предварително: true)
  • checked {String} path към променлива или път към function(rows, grid) се изпълнява, ако потребителят е избрал/проверил някои редове
  • autoselect {Boolean} позволява автоматично избиране на първия ред в мрежата, той изпълнява EXEC(config.click), по подразбиране: false
  • limit {Number} Ограничение на кластера, дефолт: 80
  • numbering {Boolean}, опционален дефолт на false
  • allowtitles {Boolean}, позволява на заглавията за всички стойности на реда, опционален дефолт false
  • button {String} връзката към function(btn_name, row, btn_element, event, name) се изпълнява, ако потребителят щракне върху бутон ___ в реда
  • exec {String} е връзка към function(type, filter, sort, page) само за сървърни операции (отключва клавиатурата и филтрирането на клиента), поддържани типове: refresh или page
  • changed {String} path към променлива или път към function(rows, grid) се изпълнява, ако потребителят промени някои редове
  • change {String/Boolean} Boolean позволява вътрешно редактиране или лентата трябва да съдържа path към променлива или пътят към function(meta, next(meta)) се изпълнява, ако потребителят двойно кликне върху колона (meta може да бъде null ако мрежата е освежена) + next(null) замества предишното съдържание отново
  • columns {String} Пътят към дефиницията на columns {Array}
  • dblclick {String} е връзка към метода на function(row, grid, row_el), тя се изпълнява, ако потребителят щракне двойно върху реда
  • noborder {Boolean} може да деактивира границата около мрежата (предварително: false)
  • clusterize {Boolean} може да деактивира кластерирано скалиране (дефолт: true)
  • contextmenu {String} е връзка към function(e, grid) когато потребителят издига контекстното меню
  • autoformat {Boolean} позволява автоматично форматиране на типове като email, phone и number (предварително: true)
  • controls {Boolean} позволява контроли, определени в columns (предварително: true)
  • hfunc {String} е връзка към метода на function(el), тя се изпълнява, ако потребителят кликне върху иконата, добавена към много първия ред на заглавието. usefull да интегрира друг компонент с DataGrid. например j-филтър
  • hfuncicon {String} hfunc икона, например къща, cog и т.н.
  • pagination {Boolean} активира/изключва странициране (предварително: true)
    • config.exec ще бъде изпълнен, ако скалбарът е в края, и можете да използвате като суров отговор array на редове
  • ovalue {String} е стандартна ключ за получаване на value от column.options (предварително: id)
  • otext {String} е стандартна ключ за получаване на text от column.options (предварително: name)

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

  • name {String} е името на полето в редица обекти
  • text {String} е колона, текстът с .ti ti-home ще направи икона Total
  • title {String} е колона инструмент (опционално)
  • width {Number} - ширина на колона (опционално, по подразбиране config.colwidth)
  • filter {String/Boolean} място за филтера или boolean може да деактивира филтра за тази колона (опционално)
  • filtervalue {Object} опция, предварително дефинирана стойност на филтра (предварително: undefined)
  • filtertype {Number/String}, 1 отключва интелигентното търсене (дефинирано: 0 - това означава, че е активиран интелигантен търсене)
  • align {String} може да бъде center или right (опционално, по подразбиране: left)
  • template {String} може да бъде шаблон на Tangular и моделът е целият предмет на реда
  • sorting {Boolean} позволява класиране (опционално, по подразбиране: true)
  • search {Boolean/String} true ще филтрира стойност в съответствие с резултата на template или String може да бъде шаблон за Tangular, който ще се използва като стойност за търсене
  • format {String/Number} може да се използва за дата и числа (брояване на десетилетия) поле (опционално), например dd.MM.yyyy
  • hide {Boolean} крие колона
  • listcolumn {Boolean}: истински, фалшиви за премахване на колони от списъка с колони
  • hidden {String} като стрела функция column => true -> колона ще бъде скрита (например за ограничаване на потребителя)
  • options {Object Array} опционален, персонализиран филтър например [{ text: 'yes', value: true }, { text: 'no', value: false }] o {String}r връзка към източника на данни
  • otext {String} опция, ключ за полето text в options, по подразбиране config.otext
  • ovalue {String} опция, ключ за полето value в options, по подразбиране config.ovalue
  • buttonapply {String} опционално, етикет за бутона Apply в колони, по подразбиране: Apply
  • class {String} опция, персонализирано име на класа
  • empty {String/Boolean} опционално, може да се пренапише празна стойност с определената в празно поле стойност (true използва --- като подразбираща стойност)
  • min {Number} редактиран само минимална стойност
  • max {Number} редактираме само максималната стойност на числото
  • required {Boolean} - само за редактиране
  • dirsearch {String/Boolean} място за търсене на j-Directory, boolean с false ще деактивира търсенето
  • type {String} опция, може да съдържа тип данни (string, boolean, date, number, email, phone или url) за полето
  • editable {Boolean} позволява редактиране
  • currency {String} е валутно име (може да бъде определено в DEF.currencies)
  • editable {String} Пътят към персонализираното редактиране на function(meta), важен: meta.next(new_value) или meta.cancel()
  • colorize {Boolean} позволява цветна стойност
  • monospace {Boolean} позволява монопространствен шрифт
  • NEW raw {Boolean} позволява/изключва изтичане на HTML в колони (предварително: false)
  • NEW pair {Boolean} позволява/изключва автоматична стойност в комбинация с конфигурацията на options (предварително: false)

Контролът на релсите (NEW):

  • Може да се дефинира като колона тип controls
  • трябва да се определи колона template (Tangular, row е модел за Tangular за всеки ред)
  • Погледнете пример
  • бутон click събитие е записано в config.button

Филтриране:

  • numbers: (1) number търси точен брой, (2) number - number е интервал между числата
  • strings: (1) string търси точна линия, (2) string1, string2, string3 е многократен критерий за търсене
  • dates1 година 2017 Търсене на всички дати за тази година, (2) 2017-02-12 - 2017-03-13 -- 02.12.2017 - 13.03.2017 е интервал между датите, (3) 12-20 - 12-31 -- 20.12 - 31.12 интервал между датите в текущата година и (4) 2017-01 - 2018-05 -- 01.2017 - 05.2018 или (5) -5 days -- -1 week -- -10 years

Методи:

  • component.redraw([reselect_again]) може да редуцира редовете отново (само за модификации, ако изтриете някои редове, които трябва да актуализирате целия модел)
  • component.resetfilter() може да презареди филтър
  • 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]) може да експортира редове с сървърно-странен rendering
  • component.appendrow(row_object, [scrolldown], [prepend]) приготвя и ренде
  • component.redrawrow(row_object, [new_object_row]) редуцира ред или NEW: замества + редуците на row_object с нов new_object_row
  • component.clear() разкрива всички промени
  • component.select(row) избира row трябва да бъде същият обект като в източника на данни
  • component.editcolumn(row_index, col_index) изпълнява config.change вътрешно (само за напреднала употреба)
  • component.applyfilter(obj) може да се прилага персонализиран филтър { name: 'Peter', age: '20 - 50' }
  • component.resetcolumns() пренасочва колони
  • component.readfilter() връща текущия филтър
  • component.rebind(schemaname__or__columnsdeclaration) Методът премахва схемата
  • component.reload() изпълнява config.exec с текущия филтър и сортиране
  • component.empty() емпити всички редове
  • component.redrawcolumns() редуцира колони, без да ги пренарежда
  • NEW: component.schema(name) променя схемата и освежава данните

Собственост:

  • component.meta връща вътрешна мета информация за филтри, колони и редове

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

  • NULL('link.to.data') Оценка config.exec
  • 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="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>

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