j-Editable

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

Ce composant peut éditer tous les éléments avec la classe editable. Il fonctionne avec data-bind ou des valeurs dynamiques. Apprenez-en davantage à partir d’un exemple.

Configuration :

autofocus {Boolean} concentre le premier élément (par défaut : false)
validate {Boolean} peut désactiver la validation (par défaut : true)
disabled {Boolean} peut désactiver l'édition (il ajoute les classes ui-editable-disabled et ui-editable-enabled), par défaut : false
changed {String} facultatif, un lien vers une méthode ou un chemin --> il contiendra l'objet avec les valeurs modifiées uniquement
enter {String} optionnel, un lien vers une méthode method(path, value, el), la méthode est exécutée si l'utilisateur appuie sur ENTER
escape {String} optionnel, un lien vers une méthode method(path, value, el), la méthode est exécutée si l'utilisateur appuie sur ESC
can {String} optionnel, un lien vers la méthode method(opt, el) doit renvoyer boolean, cela signifie can edit?
error {String} facultatif, un lien vers la méthode method(el, isInvalid, meta) est évalué lorsque l'élément est invalide et vice-versa
NEW class {String} facultatif, ajoute un nom de classe sous la forme ui-editable-CLASS (par défaut : default)

L'attribut data-editable décrit le comportement :

path {String} un chemin relatif vers la propriété (peut être hérité automatiquement de data-bind)
required {Booléen} facultatif, active "obligatoire" (par défaut : false)
type {String} en option, peut être string (par défaut), date, number, boolean, email ou html NEW tags
can {String} facultatif, un chemin vers function(opt, el) doit renvoyer boolean, cela signifie can edit?
save {String} facultatif, un chemin vers function(opt, accepted(boolean)), la fonction accepted doit être évalué
format {String} facultatif, un format pour date, par défaut : yyyy-MM-dd
dirsource {String} facultatif, chemin vers une source de données
dircustom {String/Boolean} facultatif, peut contenir un chemin vers function(val, next(new_val)) ou peut être Boolean. Cette option peut permettre l'ajout d'une valeur personnalisée (valeur non définie dans la source de données)
dirrender {String} facultatif, un chemin vers function(item, text) (doit renvoyer du HTML pour j-Directory), cette fonction peut affecter la liste des éléments dans j-Directory
dirminwidth {Number} facultatif, une largeur minimale pour j-Directory, par défaut : 200
dirmaxwidth {Number} en option, une largeur maximale pour j-Directory
dirplaceholder {String} en option, un espace réservé pour j-Directory
dirempty {String} facultatif, ajoute un champ vide pour j-Directory
dirkey {String} facultatif, un nom de clé pour la lecture de text dans dirsource (par défaut : name)
dirvalue {String} facultatif, un nom de clé pour la lecture de value dans dirsource (par défaut : id)
dirsearch {Boolean} facultatif, peut désactiver la recherche de j-Directory
autosource {String} un chemin vers la fonction search dans autocomplete, function(search, render(arr))
autovalue {String} un chemin de propriété pour la valeur dans autosource
maxlength {Numéro} une longueur maximale
minvalue {Numéro} par minute. valeur pour le type de numéro (par défaut : undefined)
maxvalue {Numéro} un maximum. valeur pour le type de numéro (par défaut : undefined)
rebind {Booléen} si true relie data-bind sur cet élément uniquement (par défaut : 0)
validate {String} optionnel, condition de validation de valeur, peut contenir un lien vers function(value) ou !!value.match(/[a-z]+/)
multiline {Boolean} facultatif, active le multiligne + ajoute la classe editable-multiline (inline-block + width:100%) lors de l'édition (par défaut : false)
raw {Booléen} facultatif, lorsque true alors le contenu HTML actuel sera comme espace réservé si la valeur est nullable (par défaut : true)
accept {String} facultatif, condition d'acceptation de valeur, peut contenir un lien vers function(value) ou !!value.match(/[a-z]+/) est similaire à validate
empty {String} facultatif, active une valeur vide et peut contenir une étiquette vide ou 1 ou true pour l'auto rebind du classeur
invalid {String} facultatif, un lien vers la méthode method(el, isInvalid, meta) est évalué lorsque l'élément est invalide et vice-versa

Méthodes :

NEW : component.changed() renvoie un objet avec des données modifiées

Bon à savoir :

si l'utilisateur appuie sur key alors l'élément modifiable contiendra la classe keypressed tant qu'il n'a pas quitté le contrôle
chaque élément modifié contiendra la classe changed
si le composant change certaines valeurs, l'élément principal contiendra la classe ui-editable-changed
si l'élément a data-bind avec empty, il sera effacé après le focus
NEW prend désormais en charge le type tags. Pour l'instant, prend en charge uniquement avec rebind et data-bind. (la liaison de données template avec {jQuery selector} fonctionne à partir de +v18)
NEW si l'élément (ou parent, ou parent de parent) contient l'attribut data-disabled="1", le contrôle sera désactivé
NEW éléments masqués et désactivés ne seront pas validés

Utilisez-le avec <ui-component name="editable">. 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>
	.changed {}
	.changed::after { float: right; content: '+'; margin-left: 5px; font-weight: normal; color: orange; }
</style>

<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="LAZY directory"></ui-component>

<ui-component name="editable" path="form">
	<div style="width:500px;padding:10px;border:1px solid #E0E0E0">

		<div class="row">
			<div class="col-xs-3">
				Name:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.name" config="html" class="editable block" data-editable="required:true"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Email:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.email" config="html" class="editable block" data-editable="required:1;type:email"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Nickname:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.nickname" config="empty:Nickname;html" class="editable block" data-editable="required:true"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Framework:
			</div>
			<div class="col-xs-9">
				<ui-bind class="editable block" config="html;empty:Choose a framework;change:renderframework" path="form.frameworkid" data-editable="dirsource:frameworks;"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Country:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.countries" config="template:{#countrytags}" class="editable block" data-editable="rebind:1;dirsource:countries;type:tags"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Date:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.date" config="html:(new Date() || value).format('yyyy-MM-dd')" class="editable block" data-editable="type:date"></ui-bind>
			</div>
		</div>
	</div>
	<pre><ui-bind path="form" config="html:JSON.stringify(value, null, '  ')"></ui-bind></pre>
</ui-component>

<script type="text/html" id="countrytags">
	{{ foreach m in value }}<span class="editable-tag"><i class="ti ti-times"></i>{{ m }}</span>{{ end }}
</script>


<script>

	// Alternative to tags (ui-bind path="path" config="change:myfunc")
	function myfunc(data, path, el) {
		if (!data)
			return el.html('');
		var template = '<span class="tag"><i class="ti ti-times"></i>{0}</span>';
		var html = '';
		for (var i = 0; i < data.length; i++)
			html += template.format(data[i]);
		el.html(html);
	}

	var frameworks = [{ id: 0, name: 'Nothing', template: '<b>{{ name }}</b>' }, { id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var countries = ['Slovakia', 'Poland', 'Hungary', 'Germany', 'USA', 'Austria', 'Poland', 'Czechia'];
	var form = {};
	form.date = new Date();
	form.name = 'Peter Širka';
	form.countries = ['Slovakia', 'Hungary'];
	form.frameworkid = 0;

	function renderframework(value, path, el) {
		return value ? frameworks.findValue('id', value, 'name', DEF.empty) : DEF.empty;
	}

</script>