j-ListForm

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

ΕΠΙΤΡΟΦΗ:

Το autofocus {String/Boolean} επικεντρώνεται στο πρώτο στοιχείο εισόδου, το string σημαίνει προσαρμοσμένο επιλεκτή (προεπιλεγμένο: false)
empty {String} κενό κείμενο λίστας (προεπιλεγμένο: ---)
Το default {Boolean} εκτελεί τη μέθοδο DEFAULT() για το εύρος της φόρμας (προεπιλεγμένο: true)
Ο έλεγχος required {Boolean} θα είναι «αναγκασμένος» (προεπιλεγμένο: false)
Το enter {Boolean} επιτρέπει τη χρήση του enter ως υποβολή (προεπιλεγμένο: false)
Το disabled {Boolean} απενεργοποιεί τον έλεγχο (προεπιλεγμένο: false)
formclass {String} μια προσαρμοσμένη κατηγορία για το δοχείο φόρμας
itemclass {String} μια προσαρμοσμένη κατηγορία για το δοχείο
create {String} μια σύνδεση με μια λειτουργία function(empty_object, callback(DEFAULT_ITEM_OBJECT), arr) (null αξία σκάφη δημιουργώντας)
submit {String} ένα σύνδεσμο με μια λειτουργία function(form_data, callback(NEW_DATA), arr, item_ref_in_items) (null ενημερώσεις αξίας)
update {String} ένα σύνδεσμο με μια λειτουργία function(form_data, callback(NEW_DATA), arr, item_ref_in_items) (null ενημερώσεις αξίας)
remove {String} Σύνδεση με μια λειτουργία function(remove_item, callback(really_remove?), arr)
selector {String} ένα jQuery selector για προσαρμοσμένο πρότυπο (εκτός του συνόλου). custom template Σε Δεδομένα δεσμεύσεις
Το footertop {Boolean} μεταφέρει το πόδι στην κορυφή του συστατικού (προεπιλεγμένο: false)
move {String} Σύνδεση με μια λειτουργία function(items)
newbie {String} ένα όνομα ιδιοκτησίας για κάθε νέο στοιχείο (θα περιέχει πάντα την τιμή true)
plugin {String} ένα προσαρμοσμένο όνομα plug-in μέσα στο στοιχείο (προεπιλεγμένο: component.ID)
Το invalidform {Boolean} απενεργοποιεί το συστατικό j-Validate εάν το j-ListForm είναι σε λειτουργία επεξεργασίας (προεπιλογή: false)
NEW: delay {Number} αρχική καθυστέρηση για την προβολή λεπτομερειών (προεπιλογή: 1000 ms)

Το συστατικό πρέπει να έχει καθοριστεί 3 πρότυπα ενσωματωμένα σε <script type="text/html">:

1 πρώτος - με πρότυπο Tangular για την παράδοση στοιχείων
2 δευτερόλεπτο - μια μορφή με συστατικά (η μορφή θα τοποθετηθεί σε απομονωμένο πεδίο)
3 Footer - ένα Footer με το κουμπί για το στοιχείο create

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

Το στοιχείο παρακολουθεί ένα γεγονός κλικ σε όλα τα κουμπιά με το χαρακτηριστικό name:

Το name="submit" πραγματοποιεί την υποβολή/σώση δεδομένων στο μοντέλο
Το name="update" πραγματοποιεί την υποβολή/σώση δεδομένων στο μοντέλο
Το name="remove" αφαιρεί το τρέχον στοιχείο από το μοντέλο
name="cancel" Ακύρωση
Το name="create" δημιουργεί μια κενή μορφή
form περιέχει κλάση ui-listform-new όταν δημιουργείτε ένα νέο στοιχείο

Η λίστα των κουμπιών:

name="remove" αφαιρεί το στοιχείο
Το name="up" μεταφέρει το στοιχείο σε
Το name="down" μεταφέρει το στοιχείο προς τα κάτω

Μέθοδοι :

NEW: Το component.add() ανοίγει μια φόρμα για τη δημιουργία αρχείων

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

example.html

<style>
	.ui-listform-item { height: 26px; line-height: 26px; overflow: hidden; padding: 0 5px; }
	button { background-color: white; border-radius: 2px; border: 1px solid #E0E0E0; font-size: 12px; height: 28px; line-height: 27px; padding: 0 10px; }
	button i { margin-right: 5px; }
	button:disabled { color: gray; background-color: #F8F8F8; }
	.ui-dark button { background-color: #303030; border-color: #454545; }
	.ui-dark button:disabled { background-color: #252525; color: #404040; }
</style>

<div style="width:400px">

	<ui-component name="listform" path="users" config="autofocus:1">

		<!-- LIST RENDERING -->
		<script type="text/html">
			<div>
				<div class="pull-right">
					<button name="up"><i class="ti ti-arrow-up"></i></button>
					<button name="down"><i class="ti ti-arrow-down"></i></button>
					<button name="remove"><i class="ti ti-remove"></i></button>
				</div>
				{{ name }}
			</div>
		</script>

		<!-- FORM RENDERING -->
		<script type="text/html">
			<div class="padding">
				<ui-component name="input" path="?.name" config="required:1" default="''" class="m">Name</ui-component>
				<ui-component name="validate" path="?">
					<button name="submit"><i class="ti ti-save"></i>Save</button>
					<button name="remove">Remove</button>
					<button name="cancel">Cancel</button>
				</ui-component>
			</div>
		</script>

		<!-- FOOTER -->

		<script type="text/html">
			<div style="margin-top:10px"><button name="create"><i class="ti ti-plus-circle green"></i>Create new</button></div>
		</script>

	</ui-component>
	<hr />
	<ui-bind path="users" config="text:STRINGIFY(value)" style="font-family:monospace" class="block"></ui-bind>

</div>

<script>

	var users = [{ name: 'Total.js' }, { name: 'Flow' }, { name: 'jComponent' }];

</script>