j-ListForm

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Configuration :

autofocus {String/Boolean} concentre le premier élément d'entrée, string signifie un sélecteur personnalisé (par défaut : false)
Texte de liste vide empty {String} (par défaut : ---)
default {Boolean} exécute la méthode DEFAULT() pour la portée du formulaire (par défaut : true)
Le contrôle required {Boolean} sera "obligatoire" (par défaut : false)
enter {Boolean} permet d'utiliser enter comme soumission (par défaut : false)
disabled {Boolean} désactive le contrôle (par défaut : false)
formclass {String} une classe personnalisée pour le conteneur de formulaires
itemclass {String} une classe personnalisée pour le conteneur d'articles
create {String} un lien vers une fonction function(empty_object, callback(DEFAULT_ITEM_OBJECT), arr) (la valeur null ignore la création)
submit {String} un lien vers une fonction function(form_data, callback(NEW_DATA), arr, item_ref_in_items) (la valeur null ignore la mise à jour)
update {String} un lien vers une fonction function(form_data, callback(NEW_DATA), arr, item_ref_in_items) (la valeur null ignore la mise à jour)
remove {String} un lien vers une fonction function(remove_item, callback(really_remove?), arr)
selector {String} un sélecteur jQuery pour template personnalisé (en dehors du composant). Fonctionne comme custom template dans data-binding
footertop {Boolean} déplace le pied de page en haut du composant (par défaut : false)
move {String} un lien vers une fonction function(items)
newbie {String} un nom de propriété pour chaque nouvel élément (il contiendra toujours la valeur true)
plugin {String} un nom de plugin personnalisé à l'intérieur du composant (par défaut : component.ID)
invalidform {Boolean} désactive le composant j-Validate si le j-ListForm est en mode édition (par défaut : false)
NOUVEAU : delay {Number} délai initial d'affichage des détails (par défaut : 1000 ms)

Le composant doit avoir défini 3 modèles enveloppés dans <script type="text/html"> :

1 en premier - avec un modèle Tangular pour le rendu de l'élément
2 deuxième - un formulaire avec des composants (le formulaire sera enveloppé dans une portée isolée)
Pied de page 3 - un pied de page avec bouton pour l'article create

Bon à savoir :

Le composant surveille un événement de clic sur tous les boutons avec l'attribut name :

name="submit" effectue la soumission/sauvegarde des données dans le modèle
name="update" effectue la soumission/sauvegarde des données dans le modèle
name="remove" supprime l'élément actuel du modèle
name="cancel" annule l'édition
name="create" crée un formulaire vide
form contient la classe ui-listform-new lors de la création d'un nouvel élément

Boutons de liste :

name="remove" supprime l'élément
name="up" déplace l'élément vers le haut
name="down" déplace l'élément vers le bas

Méthodes :

NOUVEAU : component.add() ouvre un formulaire de création d'enregistrement

Utilisez-le avec <ui-component name="listform">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>