j-TableGrid

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

Komponenta vytváří jednoduchou stolní síť (složena z prvků div) rozdělenou jednoduchou hranicí, kterou můžete upravit.

Konfigurace:

count {Number} je standardní počet položek za řádek
countxs {Number} položky za řádek pro mobilní displej
countsm {Number} položky na řádek pro malý displej
countmd {Number} položky na řádek pro střední displej
countlg {Number} položky za řádek pro velký displej
parent {String} pro získání velikosti (předvolené: window)
margin {Number} vertikální marže (předvolené: 0)
scrollbar {Boolean} umožňuje přizpůsobený scrollbar (default: false)
fill {Boolean} vyplňuje síť s prázdným řádkem potřebuje definovat row a scrollbar
Standardní výška row {Number} pro všechny displeje (default: 0)
Standardní výška řádku rowxs {Number} pro mobilní displej (default: 0)
Standardní výška řádku rowsm {Number} pro malý displej (default: 0)
rowmd {Number} standardní výška řádku pro střední displej (default: 0)
rowlg {Number} standardní vrstva pro velký displej (default: 0)
scrolltop {Boolean} Přejděte na vrchol po změně dat (default): true)

třídy:

ui-tablegrid-bl znamená hraniční levice
ui-tablegrid-bt znamená hraniční
ui-tablegrid-first první položka v řadě
ui-tablegrid-last Poslední položka v řádku
ui-tablegrid-empty prázdný položka

Použijte ji s <ui-component name="tablegrid">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

example.html

<div style="width:500px;padding:10px">
	<ui-component name="tablegrid" path="items" config="count:3" style="border:1px solid #EBECF2">
		<script type="text/html">
			<div style="padding:20px 0;text-align:center">{{ value.name }}</div>
		</script>
		<script type="text/html">
			<div style="padding:20px 0;text-align:center" class="b">Optional: empty</div>
		</script>
	</ui-component>
</div>
<script>
	var items = [{ name: 'Total.js' }, { name: 'SuperAdmin' }, { name: 'Code Editor' }, { name: 'jComponent' }];
</script>