j-Editable

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Diese Komponente kann alle Elemente mit der editable-Klasse bearbeiten. es funktioniert mit data-bind oder dynamischen Werte.

Konfiguration:

autofocus {Boolean} konzentriert sich auf das erste Element (Default: false)
validate {Boolean} kann Validierung deaktivieren (Default: true)
disabled {Boolean} kann die Bearbeitung deaktivieren (es fügt ui-editable-disabled und ui-editable-enabled Klassen hinzu), Standard: false
changed {String} optionale, eine Verbindung zu einer Methode oder Path --> es enthält das Objekt mit geänderten Werte nur
enter {String} optionale, eine Verbindung zu einer Methode method(path, value, el), die Methode wird ausgeführt, wenn der Benutzer ENTER drückt
escape {String} optionale, eine Verbindung zu einer Methode method(path, value, el), die Methode wird ausgeführt, wenn der Benutzer ESC drückt
can {String} optionale, eine Verbindung zur Methode method(opt, el) muss boolean zurückgeben, das bedeutet, dass can edit?
error {String} optionale, eine Verbindung zu der Methode method(el, isInvalid, meta) wird beurteilt, wenn das Element nicht funktioniert und umgekehrt
NEW class {String} optionale, fügt ein Klassenname in der Form ui-editable-CLASS hinzu (Default: default)

Das data-editable-Attribute beschreibt das Verhalten:

path {String} eine relative Path zu Eigentum (sie kann automatisch von data-bind erben)
required {Boolean} optional, aktiviert „erforderlich“ (Standard: false)
type {String} optionale, kann string (Default), date, number, boolean, email oder html NEW tags sein
can {String} optionale, eine Route nach function(opt, el) muss boolean zurückkehren, das bedeutet, dass can edit?
save {String} optionale, eine Route zu function(opt, accepted(boolean)), accepted Funktion muss bewertet werden
format {String} optionale, ein Format für date, Standard: yyyy-MM-dd
dirsource {String} optionale, Weg zu einer Datenquelle
dircustom {String/Boolean} optionale, kann einen Weg zu function(val, next(new_val)) enthalten oder kann Boolean. Diese Option ermöglicht die Einhaltung eines angegebenen Wertes (Wert nicht definiert in der Datenquelle)
dirrender {String} optionale, eine Route zu function(item, text) (HTML für j-Directory zurückzuführen), kann diese Funktion die Liste der Elemente in j-Directory beeinflussen
dirminwidth {Nummer} optionale, eine Mindestbreite für j-Directory, Standard: 200
dirmaxwidth {Nummer} optionale, eine maximale Breite für j-Directory
dirplaceholder {String} optionale, ein Platzinhaber für j-Directory
dirempty {String} optionale, fügt ein leeres Feld für j-Directory hinzu
dirkey {String} optionale, ein Schlüsselname für das Lesen von text in dirsource (Default: name)
dirvalue {String} optionale, ein Schlüsselname für das Lesen von value in dirsource (Default: id)
dirsearch {Boolean} optionale, kann die Suche nach j-Directory deaktiviert werden
autosource {String} einen Weg zu search Funktion in autocomplete, function(search, render(arr))
autovalue {String} eine Eigentumsstraße für den Wert in autosource
maxlength {Nummer} eine Maxlänge
minvalue {Nummer} eine min. Wert für die Nummer Typ (Default: undefined)
maxvalue {Nummer} eine maximale Wert für die Zahltyp (Default: undefined)
rebind {Boolean} wenn true nur auf dieses Element data-bind abhängt (Default: 0)
validate {String} optionale, eine Voraussetzung für die Validierung von Wert, kann einen Link zu function(value) oder !!value.match(/[a-z]+/) enthalten
multiline {Boolean} optionale, ermöglicht multiline + Appends Klasse editable-multiline (inline-block + width:100%) bei der Bearbeitung (Default: false)
raw {Boolean} optionale, wenn true dann die aktuelle HTML-Inhalte als Platzinhaber sein wird, wenn der Wert nullable ist (Default: true)
accept {String} optionale, eine Voraussetzung für die Akzeptanz von Wert, kann einen Link zu function(value) oder !!value.match(/[a-z]+/) ist ähnlich wie validate enthalten
empty {String} optionale, ermöglicht leer Wert und kann leere Etikette oder 1 oder true für Auto rebind von Binder enthalten
invalid {String} optionale, eine Verbindung zu der Methode method(el, isInvalid, meta) wird beurteilt, wenn das Element nicht funktioniert und umgekehrt

Methoden:

NEW: component.changed() gibt ein Objekt mit geänderten Daten zurück

Gut zu wissen:

Wenn der Benutzer ein paar key drückt, enthält das bearbeitbare Element die keypressed-Klasse, solange sie nicht die Kontrolle verlassen haben.
Jedes veränderte Element enthält eine Klasse von changed
Wenn die Komponente einige Werte ändert, enthält das Hauptelement die Klasse ui-editable-changed
Wenn das Element data-bind mit empty hat, wird es nach dem Fokus entfernt.
NEW unterstützt jetzt den tags-Typ. Für jetzt unterstützt es nur mit rebind und data-bind. (Datenbindung template mit {jQuery selector} arbeitet von +v18)
_NEW__ wenn das Element (oder der Elternteil oder der Elternteile) den data-disabled="1"-Attribut enthält, wird die Kontrolle ausgeschaltet.
NEW verborgenen und disabled Elemente werden nicht validiert

Verwenden Sie es mit <ui-component name="editable">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>