j-Detail

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Questo componente può rendere valori dal modello. supporta la mappatura in linea - guarda il codice sorgente dell'esempio.

Configurazione:

dateformat {String} formato di data (default: DEF.dateformat)
datetimeformat {String} formato data/ora (default: DEF.dateformat + ' ' + DEF.timeformat)
numberformat {Number} è un formato di numero predefinito (predefinita: vuoto)
small {Boolean} consente un design più piccolo (default: false)
Lo stile di componente style {Number} (default: 1), supporta lo stile 2, 3 (minimale) e 4 (moderno)
defaultgroup {String} un nome di gruppo predefinito (predefinita: Default)
Valori nullabili di notnull {Boolean} (default: false)
track {String} può contenere percorsi divisi da comma, questa proprietà vedrà solo i cambiamenti nelle chiavi tracciate

Dichiarazione dati:

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' });

Proprietà dei dati nella dichiarazione dei dati:

group {String} un nome di gruppo (necessario)
label {String} un’etichetta (necessaria)
type {String} un tipo (necessario)
note {String}: una piccola nota sotto valore
format {String} Il numero e.g. 2 o il formato dd.MM.yyyy
L'indirizzo URL detail {String} per l'ottenimento di dati per il tipo list, esempio: /users/{0}/ e {0} saranno sostituiti con il valore della lista
Gli articoli items {Object Array/String} per il tipo list possono contenere un percorso a Array o URL address per cercare
value {Object} un valore o un modello con valori (quindi path è richiesto)
path {String} un percorso verso il valore nel modello (value deve contenere un modello)
Il modello template {String} A Tangular (funzionato solo con type:'template' e {{ value }} contiene un valore crudo, e il modello {{ item }} contiene l'intero elemento)
empty {String} Un valore vuoto quando il valore è nullabile (default: ---)
show {String} la funzione condizionale value.type === 'company' quindi mostra se la condizione valutata è true
NEW autoformat {Boolean} consente il formato automatico per email, o phones, e solo per il tipo string (default: false)
NEW colorize {Boolean} colora il valore con eccezione del tipo list, color e icon
NEW plus {String} aggiunge un valore alla fine del valore renderito per i tipi number e string

I tipi consentiti nei dati:

string
bool
number
date
datetime
list
color
emoji
fontawesome
password
template

Buono sapere:

Se il gruppo contiene solo un carico, allora il nome del gruppo non viene rilasciato.

Utilizzare con <ui-component name="detail">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

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>