j-Editable

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Deze component kan alle elementen bewerken met de editable-klasse. het werkt met data-bind of dynamische waarden.

Configuratie:

autofocus {Boolean} richt zich op het eerste item (default: false)
validate {Boolean} kan de validatie ontgrendelen (default: true)
disabled {Boolean} kan bewerken (dit voegt de ui-editable-disabled en ui-editable-enabled klassen toe), standaard: false
changed {String} optioneel, een link naar een methode of pad --> het bevat het object met veranderde waarden alleen
enter {String} optioneel, een link naar een methode method(path, value, el), de methoda wordt uitgevoerd als de gebruiker ENTER drukken
escape {String} optioneel, een link naar een methode method(path, value, el), de methoda wordt uitgevoerd als de gebruiker ESC drukken
can {String} optioneel, een link naar de methode method(opt, el) moet boolean retourneren, dat betekent dat can edit?
error {String} optioneel, een link naar de methode method(el, isInvalid, meta) wordt beoordeeld wanneer het item onvoldoende is en omgekeerd
NEW class {String} optioneel, voegt een klasnaam toe in het formulier ui-editable-CLASS (default: default)

data-editable Het attribuut beschrijft het gedrag:

path {String} een relatieve route naar eigendom (kan automatisch worden geërfd van data-bind)
required {Boolean} optioneel, mogelijk "verplicht" (default: false)
type {String} optioneel, kan string (default), date, number, boolean, email of html NEW tags zijn
can {String} optioneel, een weg naar function(opt, el) moet teruggaan boolean, dat betekent can edit?
save {String} optioneel, een weg naar function(opt, accepted(boolean)), moet de functie accepted worden beoordeeld
format {String} optioneel, een format voor date, standaard: yyyy-MM-dd
dirsource {String} optioneel, de weg naar een gegevensbron
dircustom {String/Boolean} optioneel, kan een route naar function(val, next(new_val)) bevatten of kan Boolean. Deze optie kan een aangepaste waarde toevoegen (waarde niet gedefinieerd in de gegevensbron)
dirrender {String} optioneel, een route naar function(item, text) (must HTML retourneren voor j-Directory), deze functie kan de lijst van items in j-Directory beïnvloeden
dirminwidth {Nummer} optioneel, een minimale breedte voor j-Directory, standaard: 200
dirmaxwidth {Nummer} optioneel, een maximale breedte voor j-Directory
dirplaceholder {String} optioneel, een plaatshouder voor j-Directory
dirempty {String} optioneel, voegt een leeg veld toe voor j-Directory
dirkey {String} optioneel, een sleutelnaam voor het lezen van text in dirsource (default: name)
dirvalue {String} optioneel, een sleutelnaam voor het lezen van value in dirsource (default: id)
dirsearch {Boolean} optioneel, kan zoeken naar j-Directory worden uitgeschakeld
autosource {String} een weg naar de search functie in autocomplete, function(search, render(arr))
autovalue {String} een eigendomsweg voor de waarde in autosource
maxlength {Nummer} een maxlengte
minvalue {Nummer} een min. waarde voor nummer type (default: undefined)
maxvalue {Nummer} een max. waarde voor nummer type (default: undefined)
rebind {Boolean} als true alleen data-bind aan dit element bindt (default: 0)
validate {String} optioneel, een voorwaarde voor validatie van waarde, kan een link bevatten naar function(value) of !!value.match(/[a-z]+/)
multiline {Boolean} optioneel, maakt multiline + appends klasse editable-multiline (inline-block + width:100%) wanneer het is bewerken (default: false)
raw {Boolean} optioneel, wanneer true dan de huidige HTML-inhoud zal als een plaatshouder zijn als de waarde nullable is (default: true)
accept {String} optioneel, een voorwaarde voor de aanvaarding van waarde, kan een link bevatten naar function(value) of !!value.match(/[a-z]+/) is vergelijkbaar met validate
empty {String} optioneel, maakt een lege waarde en kan leeg label of 1 of true bevatten voor auto rebind van binder
invalid {String} optioneel, een link naar de methode method(el, isInvalid, meta) wordt beoordeeld wanneer het item onvoldoende is en omgekeerd

Methoden:

NEW: component.changed() geeft een object met gewijzigde gegevens terug

Goed om te weten:

Als de gebruiker een aantal key drukt, zal het bewerkbare element de keypressed-klasse bevatten zolang ze de controle niet hebben verlaten.
Elk gewijzigd element bevat de klasse changed
Als de component een aantal waarden verandert, bevat het hoofdelement de klasse ui-editable-changed.
Als het element data-bind heeft met empty, wordt het na focus verwijderd.
NEW ondersteunt nu de tags-type. voor nu alleen ondersteunt met rebind en data-bind. (data-bind template met {jQuery selector} werken van +v18)
NEW als het element (of ouder, of ouder van de ouder) een attribuut bevat data-disabled="1"De controle wordt uitgeschakeld
NEW verborgen en ontbrekende elementen worden niet gevalideerd

Gebruik het met <ui-component name="editable">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>