j-Editable

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

Tato složka může upravovat všechny prvky s třídou editable. To funguje s hodnotami data-bind nebo dynamické.

Konfigurace:

autofocus {Boolean} se soustředí na první položku (přesněji řečeno: false)
validate {Boolean} může být zrušen validace (přesněji řečeno: true)
disabled {Boolean} může deaktivovat úpravu (přidává třídu ui-editable-disabled a ui-editable-enabled), dle předvolby: false
changed {String} volitelné, odkaz na metodu nebo cestu --> bude obsahovat objekt s změněnými hodnotami pouze
enter {String} volitelné, odkaz na metodu method(path, value, el), metoda se provádí, pokud uživatel stiskne ENTER
escape {String} volitelné, odkaz na metodu method(path, value, el), metoda se provádí, pokud uživatel stiskne ESC
can {String} volitelné, odkaz na metodu method(opt, el) musí vrátit boolean, znamená to, že can edit?
error {String} volitelné, odkaz na metodu method(el, isInvalid, meta) se hodnotí, když je položka neplatná a naopak.
NEW class {String} volitelně, přidává jméno třídy ve formátu ui-editable-CLASS (podmínkou: default)

data-editable charakterizuje chování:

path {String} relativní cesta k vlastnictví (může být zděděna z data-bind automaticky)
required {Boolean} volitelně, umožňuje "potřebné" (podmínkou: false)
type {String} volitelný, může být string (podmíněné), date, number, boolean, email nebo html NEW tags
can {String} volitelné, cesta k function(opt, el) musí vrátit boolean, to znamená, že can edit?
save {String} volitelné, cesta k function(opt, accepted(boolean)), funkce accepted musí být hodnocena
format {String} volitelný, formát pro date, předvolený: yyyy-MM-dd
dirsource {String} volitelné, cesta k zdroji dat
dircustom {String/Boolean} volitelné, může obsahovat cestu k function(val, next(new_val)) nebo může být Boolean.
dirrender {String} volitelně, cesta k function(item, text) (musí vrátit HTML pro j-Directory), tato funkce může ovlivnit seznam položek v j-Directory
dirminwidth {Číslo} volitelné, minimální šířka pro j-Directory, výchozí: 200
dirmaxwidth {Číslo} volitelné, maximální šířka pro j-Directory
dirplaceholder {String} volitelné, místo držitele pro j-Directory
dirempty {String} volitelně, přidává prázdné pole pro j-Directory
dirkey {String} volitelné, klíčové jméno pro čtení text v dirsource (předvolené: name)
dirvalue {String} volitelné, klíčové jméno pro čtení value v dirsource (předvolené: id)
dirsearch {Boolean} volitelné, lze vyhledávat pro j-Directory
autosource {String} cesta k funkci search v autocomplete, function(search, render(arr))
autovalue {String} vlastnostní cesta pro hodnotu v autosource
maxlength {Číslo} max. délka
minvalue {Číslo} min. hodnota pro typ čísla (předvolený: undefined)
maxvalue {Číslo} max. hodnota pro typ čísla (předvolený: undefined)
rebind {Boolean} pokud true přidává data-bind pouze k tomuto prvku (předběžně: 0)
validate {String} volitelný, podmínka pro potvrzení hodnoty, může obsahovat odkaz na function(value) nebo !!value.match(/[a-z]+/)
multiline {Boolean} volitelně, umožňuje multilin + přidání třídy editable-multiline (inline-block + width:100%) při úpravě (podle předvolby: false)
raw {Boolean} volitelné, když true pak aktuální obsah HTML bude jako držák místa, pokud je hodnota nullable (předvolený: true)
accept {String} volitelný, podmínka pro přijetí hodnoty, může obsahovat odkaz na function(value) nebo !!value.match(/[a-z]+/) je podobný validate
empty {String} volitelné, umožňuje prázdnou hodnotu a může obsahovat prázdný štítek nebo 1 nebo true pro auto rebind spojky
invalid {String} volitelné, odkaz na metodu method(el, isInvalid, meta) se hodnotí, když je položka neplatná a naopak.

Metody:

NEW: component.changed() vrací předmět s změněnými údaji

Dobré vědět:

Pokud uživatel stiskne nějaký key, pak editovatelný prvek bude obsahovat třídu keypressed tak dlouho, dokud nezanechá kontrolu.
Každý změněný prvek bude obsahovat třídu changed
Pokud se složka změní některé hodnoty, hlavní prvek bude obsahovat třídu ui-editable-changed
Pokud má prvek data-bind s empty, bude po zaměření vymazán.
NEW nyní podporuje typ tags. prozatím podporuje pouze s rebind a data-bind. (data-bind template s {jQuery selector} práce z +v18)
NEW pokud prvek (__ nebo rodič, nebo rodiče_) obsahuje atribut data-disabled="1", bude ovládání vypnuto
NEW skryté a deaktivované prvky nebudou validovány

Použijte ji s <ui-component name="editable">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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>