j-Detail

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Diese Komponente kann Werte aus dem Modell rendern. Unterstützt Inline-Mapping – schauen Sie sich den Quellcode des Beispiels an.

Konfiguration:

dateformat {String} ein Datumsformat (Standard: DEF.dateformat)
datetimeformat {String} ein Datums-/Uhrzeitformat (Standard: DEF.dateformat + ' ' + DEF.timeformat)
numberformat {Number} ein Standard-Zahlenformat (Standard: leer)
small {Boolean} ermöglicht kleineres Design (Standard: false)
Komponentenstil style {Number} (Standard: 1), unterstützt Stil 2, 3 (minimal) und 4 (modern)
defaultgroup {String} ein Standardgruppenname (Standard: Default)
notnull {Boolean} überspringt Nullwerte (Standard: false)
track {String} kann durch Kommas getrennte Pfade enthalten. Diese Eigenschaft überwacht nur Änderungen in verfolgten Schlüsseln

Datendeklaration:

var model = { firstname: 'Peter', lastname: 'Širka', age: 33 };
var items = [{ id: 2, name: 'Banská Bystrica' }, { id: 3, name: 'Bratislava' }];
var form = [];

// The below values will be binded automatically from the "model" (according to the "path" field) because they contain "path" field
form.push({ group: 'Personal', label: 'First name', path: 'firstname', type: 'string', value: model, note: 'This is first name' });
form.push({ group: 'Personal', label: 'Last name', path: 'lastname', type: 'string', value: model, placeholder: 'String' });
form.push({ group: 'Personal', label: 'Age', path: 'age', type: 'number', value: model });

// The below values will be binded from "value" key
form.push({ group: 'Personal', label: 'Birth date', type: 'date', value: NOW });
form.push({ group: 'Additional', label: 'Newsletter', type: 'bool', value: true });
form.push({ group: 'Additional', label: 'City', type: 'list', value: 2, items: 'items' });
form.push({ group: 'Additional', label: 'Color', type: 'color', value: '#e73323' });
form.push({ group: 'Additional', label: 'Icon', type: 'fontawesome', value: 'fas fa-home' });

Dateneigenschaften in der Datendeklaration:

group {String} ein Gruppenname (erfordert)
label {String} ein Etikett (erforderlich)
type {String} eine Art (erfordert)
note {String} eine kleine Wertschätzung
format {String} Die Nummer e.g 2 oder Dateformate dd.MM.yyyy
detail {String} URL für die Erfassung von Daten für list Typ, zum Beispiel: /users/{0}/ und {0} wird durch den Wert aus der Liste ersetzt
items {Object Array/String}-Einheiten für den Typ list nur, kann eine Straße auf Array oder URL address enthalten
value {Object} ein Wert oder ein Modell mit Werten (siehe path erforderlich)
path {String} eine Werte in einem Modell (value muss ein Modell enthalten)
template {String} A Tangular Die Modelle (nur mit type:'template' und {{ value }} Sie enthält einen Rohwert und {{ item }} enthält das gesamte Element)
empty {String} Eine leere Werte, wenn die Werte null ist (Default: ---)
show {String} zeigt dann die bedingungspflichtige Funktion value.type === 'company' an, wenn die bewertete Bedingung true ist.
Neue autoformat {Boolean} Automatisierung ermöglicht emailoder phonesUnd nur für string Der Standard (default ) false)
NEW colorize {Boolean} farbiert den Wert mit Ausnahme von list, color und icon
NEW plus {String} fügt einen Wert zum Ende des renderierten Wertes für die Typen number und string hinzu

Zulässige Typen in Daten:

string
bool
number
date
datetime
list
color
emoji
fontawesome
password
template

Gut zu wissen:

Wenn die Gruppe nur einen Charz enthält, wird der Name der Gruppe nicht angegeben.

Verwenden Sie es mit <ui-component name="detail">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

<div style="width:500px">
	<ui-component name="detail" path="form"></ui-component>
	<br />
	<div>-- OR --</div>
	<br />
	<ui-component name="detail" path="model" config="style:2">
		<script type="text/plain">
			[
				{ name: 'First name', path: 'firstname', type: 'string' },
				{ name: 'Last name', path: 'lastname', type: 'string' },
				{ name: 'Age', path: 'age', type: 'number' }
			]
		</script>
	</ui-component>
	<br />
	<div>-- OR FILTERED --</div>
	<br />
	<ui-component name="detail" path="model" config="style:3">
		<script type="text/plain">
			[
				// Will be displayed, look to show condition ("value" means "model")
				{ name: 'First name', path: 'firstname', type: 'string', show: 'value.type==1' },
				{ name: 'Last name', path: 'lastname', type: 'string', show: 'value.type==1' },
				// Won't be displayed, look to show condition ("value" means "model")
				{ name: 'Age', path: 'age', type: 'number', show: 'value.type==2' }
			]
		</script>
	</ui-component>
	<br />
	<ui-component name="detail" path="model" config="style:4">
		<script type="text/plain">
			[
				// Will be displayed, look to show condition ("value" means "model")
				{ name: 'First name', path: 'firstname', type: 'string', show: 'value.type==1' },
				{ name: 'Last name', path: 'lastname', type: 'string', show: 'value.type==1' },
				// Won't be displayed, look to show condition ("value" means "model")
				{ name: 'Age', path: 'age', type: 'number', show: 'value.type==2' }
			]
		</script>
	</ui-component>
</div>

<script>
	var model = { firstname: 'Peter', lastname: 'Širka', age: 33, type: 1 };
	var items = [{ id: 2, name: 'Banská Bystrica' }, { id: 3, name: 'Bratislava' }];
	var form = [];

	// The below values will be binded automatically from the "model" (according to the "path" field) because they contain "path" field
	form.push({ group: 'Personal', label: 'First name', path: 'firstname', type: 'string', value: model, note: 'This is first name' });
	form.push({ group: 'Personal', label: 'Last name', path: 'lastname', type: 'string', value: model, placeholder: 'String' });
	form.push({ group: 'Personal', label: 'Age', path: 'age', type: 'number', value: model });

	// The below values will be binded from "value" key
	form.push({ group: 'Personal', label: 'Birth date', type: 'date', value: NOW });
	form.push({ group: 'Additional', label: 'Newsletter', type: 'bool', value: true });
	form.push({ group: 'Additional', label: 'City', type: 'list', value: 2, items: 'items' });
	form.push({ group: 'Additional', label: 'Color', type: 'color', value: '#e73323' });
	form.push({ group: 'Additional', label: 'Icon', type: 'fontawesome', value: 'ti ti-home' });
</script>