# j-ListForm

> j-ListForm: NEW: καθυστέρηση {Number} αρχική καθυστερότητα για την προβολή λεπτομερειών (προεπιλογή: 1000 ms); NEW: component.add() ανοίγει ένα έντυπο για τη δημιουργία αρχείων

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 930d1dc76bbadbb4d9a44708685e5c1dcc195f67c8e8acf0a3983e505dbbc614
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__ΕΠΙΤΡΟΦΗ__:

- Το `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` Σε [Δεδομένα δεσμεύσεις](https://wiki.totaljs.com/jcomponent/08-data-binding/)
- Το `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 άδεια.

```html 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>
```