j-Editable

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Táto zložka môže upravovať všetky prvky s triedou editable. funguje s hodnotami data-bind alebo dynamiky.

Konfigurácia:

autofocus {Boolean} sa zameriava na prvú položku (predvolené: false)
validate {Boolean} môže vypnúť validáciu (predvolené: true)
disabled {Boolean} môže vypnúť úpravu (pridáva triedy ui-editable-disabled a ui-editable-enabled), predvolené: false
changed {String} voliteľné, odkaz na metódu alebo cestu --> bude obsahovať objekt s zmenenými hodnotami iba
enter {String} voliteľné, odkaz na metódu method(path, value, el), metóda sa vykonáva, ak používateľ stlačí ENTER
escape {String} voliteľné, odkaz na metódu method(path, value, el), metóda sa vykonáva, ak používateľ stlačí ESC
can {String} voliteľné, odkaz na metódu method(opt, el) musí vrátiť boolean, to znamená can edit?
error {String} voliteľné, odkaz na metódu method(el, isInvalid, meta) sa hodnotí, keď je položka neplatná a naopak
NEW class {String} voliteľné, pridáva názov triedy vo formulári ui-editable-CLASS (predvolené: default)

data-editable charakterizuje správanie:

path {String} relatívna cesta k majetku (môže byť zdedená z data-bind automaticky)
required {Boolean} voliteľné, povolí "povinné" (predvolené: false)
type {String} voliteľné, môže byť string (predvolené), date, number, boolean, email alebo html NEW tags
can {String} voliteľné, cesta k function(opt, el) musí vrátiť boolean, to znamená can edit?
save {String} voliteľné, cesta k function(opt, accepted(boolean)), accepted funkcia musí byť hodnotená
format {String} voliteľný, formát pre date, predvolený: yyyy-MM-dd
dirsource {String} voliteľné, cesta k zdroju údajov
dircustom {String/Boolean} voliteľné, môže obsahovať cestu k function(val, next(new_val)) alebo môže byť Boolean. Táto možnosť umožňuje pridávanie vlastnej hodnoty (hodnota nie je definovaná v zdroji údajov)
dirrender {String} voliteľné, cesta k function(item, text) (musí vrátiť HTML pre j-Directory), táto funkcia môže ovplyvniť zoznam položiek v j-Directory
dirminwidth {Číslo} voliteľné, minimálna šírka pre j-Directory, predvolená: 200
dirmaxwidth {Číslo} voliteľné, maximálna šírka pre j-Directory
dirplaceholder {String} voliteľné, umiestnenie pre j-Directory
dirempty {String} voliteľné, pridáva prázdne pole pre j-Directory
dirkey {String} voliteľné, kľúčové meno pre čítanie text v dirsource (predvolené: name)
dirvalue {String} voliteľné, kľúčové meno pre čítanie value v dirsource (predvolené: id)
dirsearch {Boolean} voliteľné, môžete vypnúť vyhľadávanie pre j-Directory
autosource {String} cesta k funkcii search v autocomplete, function(search, render(arr))
autovalue {String} vlastnosť trasa pre hodnotu v autosource
maxlength {Číslo} maxlength
minvalue {Číslo} min. hodnota pre typ čísla (predvolené: undefined)
maxvalue {Číslo} maximálna hodnota pre typ čísla (predvolená hodnota: undefined)
rebind {Boolean} ak true prepája data-bind len na tento prvok (predvolené: 0)
validate {String} voliteľný, podmienka pre validáciu hodnoty, môže obsahovať odkaz na function(value) alebo !!value.match(/[a-z]+/)
multiline {Boolean} voliteľné, umožňuje multiline + prílohy triedy editable-multiline (inline-block + width:100%) pri úprave (predvolené: false)
raw {Boolean} voliteľné, keď true potom aktuálny obsah HTML bude ako umiestnený, ak je hodnota nullable (predvolená: true)
accept {String} voliteľné, podmienka pre prijatie hodnoty, môže obsahovať odkaz na function(value) alebo !!value.match(/[a-z]+/) je podobný validate
empty {String} voliteľné, umožňuje prázdnu hodnotu a môže obsahovať prázdny štítok alebo 1 alebo true pre auto rebind z väzby
invalid {String} voliteľné, odkaz na metódu method(el, isInvalid, meta) sa hodnotí, keď je položka neplatná a naopak

Metódy:

NEW: component.changed() vráti objekt s zmenenými údajmi

Je dobré vedieť:

Ak používateľ stlačí niektoré key potom editovateľný prvok bude obsahovať triedu keypressed tak dlho, kým neopustí kontrolu
Každý zmenený prvok bude obsahovať triedu changed
Ak sa niektoré hodnoty zmenia, hlavný prvok bude obsahovať triedu ui-editable-changed
Ak má prvok data-bind s empty, potom sa vyčistí po zameraní
NEW teraz podporuje typ tags. V súčasnosti podporuje len s rebind a data-bind. (data-bind template s {jQuery selector} práce z +v18)
NEW ak prvok (__ alebo rodič, alebo rodičia_) obsahuje atribút data-disabled="1", ovládací prvok bude vypnutý
NEW skryté a deaktivované prvky nebudú validované

Použite ho so <ui-component name="editable">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia 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>