j-Editable

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Acest component poate edita toate elementele cu clasa editable. funcționează cu valori data-bind sau dinamice.

Configurarea:

autofocus {Boolean} se concentrează pe primul element (default: false)
validate {Boolean} poate dezactiva validarea (default: true)
disabled {Boolean} poate dezactiva editarea (adăugă clasa ui-editable-disabled și ui-editable-enabled), în mod implicit: false
changed {String} opțional, un link la o metodă sau cale --> va conține obiectul cu valori modificate numai
enter {String} opțional, un link la o metodă method(path, value, el), metoda este executată dacă utilizatorul prestează ENTER
escape {String} opțional, un link la o metodă method(path, value, el), metoda este executată dacă utilizatorul prestează ESC
can {String} opțional, un link la metoda method(opt, el) trebuie să se întoarcă la boolean, înseamnă can edit?
error {String} opțional, un link la metoda method(el, isInvalid, meta) este evaluat atunci când elementul este invalid și invers
NEW class {String} opțional, adaugă un nume de clasă în formularul ui-editable-CLASS (default: default)

Atribuția data-editable descrie comportamentul:

path {String} o cale relativă la proprietate (poate fi moștenite automat de la data-bind)
required {Boolean} opțional, permite "required" (default: false)
type {String} opțional, poate fi string (default), date, number, boolean, email sau html NEW tags
can {String} opțional, o cale la function(opt, el) trebuie să se întoarcă la boolean, ceea ce înseamnă can edit?
save {String} opțional, o cale la function(opt, accepted(boolean)), funcția accepted trebuie evaluată
format {String} opțional, un format pentru date, standard: yyyy-MM-dd
dirsource {String} opțional, calea către o sursă de date
dircustom {String/Boolean} opțional, poate conține o cale la function(val, next(new_val)) sau poate fi Boolean.Această opțiune poate permite adăugarea unei valori personalizate (valorile nu sunt definite în sursa de date)
dirrender {String} opțional, o cale la function(item, text) (trebuie să se întoarcă HTML pentru j-Directory), această funcție poate afecta lista de elemente în j-Directory
dirminwidth {Număr} opțional, o lățime minimă pentru j-Directory, standard: 200
dirmaxwidth {Număr} opțional, o lățime maximă pentru j-Directory
dirplaceholder {String} opțional, un locator pentru j-Directory
dirempty {String} opțional, adaugă un câmp gol pentru j-Directory
dirkey {String} opțional, un nume cheie pentru citirea text în dirsource (default: name)
dirvalue {String} opțional, un nume cheie pentru citirea value în dirsource (default: id)
dirsearch {Boolean} opțional, poate dezactiva căutarea pentru j-Directory
autosource {String} o cale la funcția search în autocomplete, function(search, render(arr))
autovalue {String} o cale de proprietate pentru valoarea în autosource
maxlength {Număr} o lungime maxă
minvalue {Număr} o valoare minimă pentru tipul de număr (default: undefined)
maxvalue {Număr} o valoare maximă pentru tipul de număr (default: undefined)
rebind {Boolean} în cazul în care true rebind data-bind numai la acest element (default: 0)
validate {String} opțional, o condiție de validare a valorii, poate conține un link la function(value) sau !!value.match(/[a-z]+/)
multiline {Boolean} opțional, permite clasa multilină + aplicare editable-multiline (inline-block + width:100%) atunci când este editarea (default: false)
raw {Boolean} opțional, atunci când true apoi conținutul actual HTML va fi ca un locator dacă valoarea este nullable (default: true)
accept {String} opțional, o condiție de acceptare a valorii, poate conține un link la function(value) sau !!value.match(/[a-z]+/) este similar cu validate
empty {String} opțional, permite valoarea goală și poate conține eticheta goală sau 1 sau true pentru auto rebind de legătură
invalid {String} opțional, un link la metoda method(el, isInvalid, meta) este evaluat atunci când elementul este invalid și invers

Metode:

NEW: component.changed() întoarce un obiect cu date modificate

bine să știi:

Dacă utilizatorul prestează un anumit key, atunci elementul editabil va conține clasa keypressed atâta timp cât nu au părăsit controlul.
Fiecare element modificat va conține clasa changed
Dacă componenta schimbă anumite valori, elementul principal va conține clasa ui-editable-changed
Dacă elementul are data-bind cu empty, acesta va fi curățat după focalizare
NEW susține acum tipul tags. pentru moment susține numai cu rebind și data-bind. (data-bind template cu {jQuery selector} funcționează de la +v18)
NEW dacă elementul (sau părinte, sau părinte) conține atributul data-disabled="1", controlul va fi dezactivat
NEW elemente ascunse și dezactivate nu vor fi validate

Utilizați-l cu <ui-component name="editable">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>