j-Grid

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Sistemul de rețea bootstrap

_sursă de date trebuie să conțină:

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

Configurarea:

filter {Boolean} afișează un filtru (opțional, standard: true)
filterlabel {String} un locator standard pentru toate filtrele (opțional)
external {Boolean} este o sursă externă de date (încărcare dinamică a datelor) (optinal, în mod implicit: false)
pluralizepages {String} pluralizare pentru pagini (opțional, standard: # pages,# page,# pages,# pages)
pluralizeitems {String} pluralizare pentru articole (opțional, standard: # items,# item,# items,# items)
exec {String} un link la function(type, filter, sort, page), se evaluează dacă rețeaua efectuează anumite operațiuni
padding {Număr} înălțime padding (opțional, standard: 0)
autosize {Boolean} permite înălțimea completă auto-mărime (opțional, standard true)
boolean {String} valori pentru filtrarea valorilor boolean (opțional, standard: true|on|yes)
pagination {Boolean} afișează panourile de pagină (opțional, standard: false)
init {funcție} o funcție de init pentru, de exemplu, coloane personalizate
checked {funcție} dacă rândurile vor conține <input type="checkbox atunci această funcție va fi evaluată atunci când se verifică cutia de control

Proprietăți coloană:

name {String} un nume de câmp în obiect
text {String} o etichetă coloană
title {String} un tip de instrument coloană (opțional)
size {Numărul} o coloană largă: 1 mică şi 2 Mediu în 3 în mare, 4 foarte mare (opțional, default) 1)
size {String} o lățime de coloană în pixeli, valoarea trebuie să conțină px e.g. 20px
filter {String/Boolean} un depozitar pentru filtrul sau boolean poate dezactiva filtrul pentru această coloană (opțional)
format {String/Number} pentru valorile de formatare (string pentru data, number pentru numere)
background {String} o culoare de fundal (opțional)
align {String} poate fi center sau right (opțional, de preferință: left)
template {String} poate fi un șablon Tangular și modelul este întregul obiect al rândului
render {String/Function(vală, coloană, rând)} este o renderizare personalizată, string este evaluată ca o funcție de stea
header {String/Function(column)} este o renderizare personalizată a cheiei, string este evaluată ca o funcție de stea
sort {Boolean} permite sortarea (opțional, standard: true)
class {String} clase suplimentare pentru coloana, de exemplu hidden-xs
search {Boolean/String} true va filtra o valoare în funcție de rezultatul template sau String poate fi un șablon Tangular care va fi folosit ca valoare pentru căutare

Filtrarea:

numbers: (1) number caută un număr exact, (2) number / number este un interval între cifre
strings: (1) string caută o linie exactă, (2) string1, string2, string3 este un criteriu de căutare multiplă
dates: (1) an 2017 caută toate datele în acest an, (2) 2017-02-12 / 2017-03-13 este un interval între date, (3) 20.12 / 31.12 este un interval între date în anul curent

Utilizați-l cu <ui-component name="grid">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>