j-Grid

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

bootstrap hálózati rendszer

Az adatforrásnak tartalmaznia kell:

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

konfiguráció:

filter {Boolean} jelzi a szűrőt (opcionális, alapértelmezett: true)
filterlabel {String} egy alapértelmezett helytartó minden szűrőre (opcionális)
external {Boolean} egy külső adatforrás (dinamikus adatfelvétel) (optinális, alapértelmezett: false)
pluralizepages {String} pluralizáció oldalak (opcionális, alapértelmezett: # pages,# page,# pages,# pages)
pluralizeitems {String} pluralizáció az elemekre (opcionális, alapértelmezett: # items,# item,# items,# items)
exec {String} egy link a function(type, filter, sort, page), azt értékelik, ha a hálózat valamilyen műveletet végez
padding {Number} magasság padding (opcionális, alapértelmezett: 0)
autosize {Boolean} lehetővé teszi a teljes magasságú automatikus méret (opcionális, alapértelmezett true)
boolean {String} a boolean értékek szűrésére szolgáló értékek (opcionális, alapértelmezett: true|on|yes)
pagination {Boolean} megjeleníti az oldalpanel (opcionális, alapértelmezett: false)
init {Funkció} egy init funkció, például a személyre szabott oszlopok számára
checked {Funkció} ha a sorok tartalmaznak <input type="checkbox akkor ez a funkció értékelik, amikor a ellenőrző doboz ellenőrizhető

oszlop tulajdonságai:

name {String} a mező neve az objektumban
text {String} egy oszlop címke
title {String} egy oszlop eszköze (opcionális)
size {Number} egy oszlop szélessége: 1 A kis, 2 A közepes, 3 Nagy a nagy, 4 nagyon nagy (opcionális, default 1)
size {String} egy oszlop szélessége pixelekben, az értéket tartalmazni kell px e.g. 20px
filter {String/Boolean} a szűrő helytartója vagy a boolean e oszlop szűrője kikapcsolható (választható)
format {String/Number} formázási értékek (string dátum, number számok)
background {String} háttérszín (opcionális)
align {String} lehet center vagy right (opcionális, alapértelmezett: left)
template {String} lehet a Tangular mintát, és a modell az egész sor objektuma
render {String/Function(érték, oszlop, sor)} egy személyre szabott renderelés, a string értékelik, mint egy lövedék funkció
header {String/Function(column)} a címek egyedi renderelése, string értékelik, mint egy lövedék funkció
sort {Boolean} lehetővé teszi a sorozást (opcionális, alapértelmezett: true)
class {String} további osztályok a oszlophoz, például hidden-xs
search {Boolean/String} true a template eredménye szerint szűr egy értéket, vagy String lehet egy Tangular mintát, amelyet keresési értékként használnak.

Szűrő:

numbers: (1) a number pontos számot keres, (2) a number / number a számok közötti intervallum.
strings: (1) a string egy pontos vonalat keres, (2) a string1, string2, string3 több keresési kritérium
dates: (1) év 2017 keresi az összes dátumot ebben az évben, (2) 2017-02-12 / 2017-03-13 a dátumok közötti intervallum, (3) 20.12 / 31.12 a jelenlegi év dátumai közötti intervalla

Használja a <ui-component name="grid">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>