j-TableGrid

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Komponenten gör ett enkelt bordsband (komponerat av div-element) uppdelat med en enkel gräns som du kan ändra.

Konfigurera:

count {Number} ett standardantal objekt per rad
countxs {Number} objekt per rad för mobil display
countsm {Number} objekt per rad för liten display
countmd {Number} objekt per rad för medium display
countlg {Number} objekt per rad för en stor display
parent {String} för att få storlek (default: window)
margin {Number} en vertikal marginal (default: 0)
scrollbar {Boolean} möjliggör anpassad skruvbar (default: false)
fill {Boolean} fyller gränsen med tom rad behöver definiera row och scrollbar
row {Number} en standard radhöjd för alla skärmar (default: 0)
rowxs {Number} en standard radhöjd för mobil display (default: 0)
rowsm {Number} en standard radhöjd för liten skärm (default: 0)
rowmd {Number} en standard radhöjd för medium display (default: 0)
rowlg {Number} en standard radhöjd för stor skärm (default: 0)
scrolltop {Boolean} snurrar till toppen efter ändring av data (default: true)

Klasserna:

ui-tablegrid-bl betyder vänster gräns
ui-tablegrid-bt betyder gräns
ui-tablegrid-first första objektet i raden
ui-tablegrid-last sista objektet i raden
ui-tablegrid-empty tomt objekt

Använd den med <ui-component name="tablegrid">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>