j-Grid

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

Необходима е система за bootstrap

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

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

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

filter {Boolean} показва филтър (опционално, по подразбиране: true)
filterlabel {String} за всички филтри (опционално)
external {Boolean} е външен източник на данни (динамично зареждане на данни) (оптичен, по подразбиране: false)
pluralizepages {String} плурализация за страници (опционално, по подразбиране: # pages,# page,# pages,# pages)
pluralizeitems {String} плурализация за елементи (опционално, дефолт: # items,# item,# items,# items)
exec {String} връзка към function(type, filter, sort, page), се оценява дали мрежата извършва някои операции
padding Размер на височината (опционално, по подразбиране: 0)
autosize {Boolean} позволява пълна височина авто-размер (опционално, по подразбиране true)
boolean {String} стойности за филтриране на булеанни стойности (опционално, по подразбиране: true|on|yes)
pagination {Boolean} показва панела за страница (опционално, по подразбиране: false)
init {Функция} функция на init за например персонализирани колони
checked {Функция} ако редове ще съдържат <input type="checkbox тогава тази функция ще бъде оценена, когато се провери контролната кутия

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

name {String} име на поле в обекта
text {String} етикетиране на колона
title {String} колона инструмент (опционално)
size Размер на колоната: 1 Малкият 2 Средната 3 Голяма е, 4 Много голям (опционален, дефолт) 1)
size {String} колона ширина в пиксели, стойността трябва да съдържа px и т.н. 20px
filter {String/Boolean} място за филтъра или boolean може да деактивира филтър за тази колона (опционално)
format {String/Number} за форматиране на стойности (string за дата, number за числа)
background {String} цвят на фона (опционално)
align {String} може да бъде center или right (опционално, по подразбиране: left)
template {String} може да бъде шаблон на Tangular и моделът е целият предмет на реда
render {Стринг/Функция(цена, колона, ред)} е персонализирана рендерация, string се оценява като функция стрела
header {String/Function(column)} е персонализирано представяне на заглавието, string се оценява като функция на стрелата
sort {Boolean} позволява сортиране (опционално, по подразбиране: true)
class {String} допълнителни класове за колоната, например hidden-xs
search {Boolean/String} true ще филтрира стойност в съответствие с резултата на template или String може да бъде шаблон за Tangular, който ще се използва като стойност за търсене

Филтриране:

numbers: (1) number търси точен брой, (2) number / number е интервал между числата
strings: (1) string търси точна линия, (2) string1, string2, string3 е многократен критерий за търсене
dates: (1) година 2017 търси всички дати в тази година, (2) 2017-02-12 / 2017-03-13 е интервал между датите, (3) 20.12 / 31.12 е интервала между датата в текущата година

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

example.html

<style>
	body{padding:50px;margin:0;background-color:#F0F0F0;font-family:Arial;height:100%;}
	html{height:100%;}
</style>

<ui-component name="grid" path="griddata" config="exec:filtering">
	<script type="text/plain">
		[
			{ name: 'name', text: 'Name', size: 2, render: 'n => n.toUpperCase()', filter: 'Search in name' },
			{ name: 'price', text: 'Price', size: 1, format: 2, filter: 'Search in prices', align: 'right' },
			{ name: 'description', text: 'Description', size: 3, filter: 'Search in description' },
			{ name: 'created', text: 'Created', size: 1, filter: 'Search in dates', format: 'dd.MM.yyyy', align: 'center' }
		]
	</script>
</ui-component>

<script>
	var griddata = { page: 1, count: 18, pages: 3, limit: 6, items: [] };
	var items = griddata.items;

	items.push({ name: '1 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 233, created: new Date().add('-5 days') });
	items.push({ name: '2 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 122, created: new Date().add('-1 year') });
	items.push({ name: '3 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 119, created: new Date().add('-1 month') });
	items.push({ name: '4 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 35.34, created: new Date().add('-14 days') });
	items.push({ name: '5 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 439.33, created: new Date().add('-5 hours') });
	items.push({ name: '6 Lorem ipsum dolor.', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, mollitia!', price: 111.12, created: new Date().add('-349 minutes') });

	// Auto-resize
	$(window).on('resize', function() {
		setTimeout2('resize', function() {
			EMIT('resize');
		}, 100);
	});

	function filtering(type, filter, sort, page) {
		console.log(type, filter, sort, page);
	}

</script>