j-Detail

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Αυτό το συστατικό μπορεί να εκδίδει τιμές από το μοντέλο. υποστηρίζει την ενσωματωμένη χαρτογράφηση - δείτε τον κώδικα πηγής του παραδείγματος.

ΕΠΙΤΡΟΦΗ:

dateformat {String} μια μορφή ημερομηνίας (προεπιλεγμένη: DEF.dateformat)
datetimeformat {String} σε μορφή ημερομηνίας/ώρα (προεπιλεγμένη: DEF.dateformat + ' ' + DEF.timeformat)
numberformat {Number} μια προεπιλεγμένη μορφή αριθμού (προεπιλογή: κενή)
Το small {Boolean} επιτρέπει μικρότερο σχεδιασμό (προεπιλεγμένο: false)
Το στυλ συστατικών style {Number} (προεπιλεγμένο: 1), υποστηρίζει το στυλό 2, 3 (μικρό) και 4 (σύγχρονο)
defaultgroup {String} ένα προεπιλεγμένο όνομα ομάδας (προεπιλογή: Default)
notnull {Boolean} σκάφη μηδενικές τιμές (προεπιλεγμένη: false)
Το track {String} μπορεί να περιέχει μονοπάτια που χωρίζονται από το comma, αυτό το ακίνητο θα παρατηρήσει μόνο τις αλλαγές στα κλειδιά

Η δήλωση δεδομένων:

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

Ιδιότητες δεδομένων στην δήλωση δεδομένων:

group {String} ένα όνομα ομάδας (αναγκαίο)
label {String} μια ετικέτα (αναγκαία)
type {String} ένα είδος (αναγκαίο)
note {String}: Μικρή τιμή κάτω από την αξία
Ο αριθμός format {String}, π.χ. 2 ή η μορφή ημερομηνίας dd.MM.yyyy
Η διεύθυνση URL detail {String} για την απόκτηση δεδομένων για τον τύπο list, για παράδειγμα: /users/{0}/ και {0} θα αντικατασταθούν με την τιμή από τη λίστα
Τα στοιχεία items {Object Array/String} για τον τύπο list μόνο, η γραμμή μπορεί να περιέχει ένα μονοπάτι στο Array ή το URL address για αναζήτηση
value {Object} αξία ή μοντέλο με τιμές (το path απαιτείται)
Το path {String} είναι μια πορεία προς την αξία στο μοντέλο (το value πρέπει να περιέχει ένα μοντέλα)
template {String} Ένα πρότυπο Tangular (δραστηριότητες μόνο με type:'template' και {{ value }} περιέχει μια βασική αξία, και το {{ item }} περιέχουν ολόκληρο το στοιχείο)
empty {String} Μια κενή τιμή όταν η τιμή είναι μηδενική (προεπιλεγμένη: ---)
Το show {String} εμφανίζει τη συνθησιακή λειτουργία value.type === 'company' και στη συνέχεια αν η εκτιμώμενη κατάσταση είναι true.
NEW autoformat {Boolean} επιτρέπει την αυτόματη μορφή για το email, ή phones, και μόνο για τον τύπο string (προεπιλεγμένο: false)
NEW colorize {Boolean} χρωματίζει την τιμή με εξαίρεση τον τύπο list, color και icon
NEW plus {String} προσθέτει μια τιμή στο τέλος της τιμής που παραδίδεται για τους τύπους number και string

Επιτρεπόμενοι τύποι στα δεδομένα:

string
bool
number
date
datetime
list
color
emoji
fontawesome
password
template

Καλό να ξέρεις:

Εάν η ομάδα περιέχει μόνο το ένα φορτίο, τότε το όνομα της ομάδας δεν παραδίδεται

Χρησιμοποιήστε το με <ui-component name="detail">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, 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>