j-Editable

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Ten składnik może edytować wszystkie elementy z klasą editable. działa z wartościami data-bind lub dynamicznymi.

Konfiguracja:

autofocus {Boolean} koncentruje się na pierwszym punkcie (default: false)
validate {Boolean} może wyłączyć weryfikację (default: true)
disabled {Boolean} może wyłączyć edycję (dodaje klasę ui-editable-disabled i ui-editable-enabled), wstępnie: false
changed {String} opcjonalny, link do metody lub drogi --> będzie zawierać obiekt z zmienionymi wartościami tylko
enter {String} opcjonalny, link do metody method(path, value, el), metoda jest wykonywana, jeśli użytkownik naciśnij ENTER
escape {String} opcjonalny, link do metody method(path, value, el), metoda jest wykonywana, jeśli użytkownik naciśnij ESC
can {String} opcjonalny, link do metody method(opt, el) musi zwrócić boolean, oznacza to, że can edit?
error {String} opcjonalne, link do metody method(el, isInvalid, meta) jest oceniany, gdy element jest nieważny i odwrotnie
NEW class {String} opcjonalny, dodaje nazwę klasy w formularzu ui-editable-CLASS (default: default)

Wskaźnik data-editable opisuje zachowanie:

path {String} relative path do własności (można odziedziczyć z data-bind automatycznie)
required {Boolean} opcjonalne, umożliwia "wymagane" (default: false)
type {String} opcjonalny, może być string (default), date, number, boolean, email lub html NEW tags
can {String} opcjonalny, droga do function(opt, el) musi powrócić do boolean, co oznacza, że can edit?
save {String} opcjonalny, trasa do function(opt, accepted(boolean)), funkcja accepted musi być oceniana
format {String} opcjonalny, format dla date, domyślny: yyyy-MM-dd
dirsource {String} opcjonalny, droga do źródła danych
dircustom {String/Boolean} opcjonalny, może zawierać ścieżkę do function(val, next(new_val)) lub może być Boolean.
dirrender {String} opcjonalny, ścieżka do function(item, text) (musisz zwrócić HTML dla j-Directory), ta funkcja może wpływać na listę elementów w j-Directory
dirminwidth {Liczba} opcjonalne, minimalna szerokość dla j-Directory, domyślnie: 200
dirmaxwidth {Liczba} opcjonalne, maksymalna szerokość dla j-Directory
dirplaceholder {String} opcjonalne, miejsce dla j-Directory
dirempty {String} opcjonalnie, dodaje puste pole dla j-Directory
dirkey {String} opcjonalne, nazwa kluczowa do czytania text w dirsource (default: name)
dirvalue {String} opcjonalne, nazwa kluczowa do czytania value w dirsource (default: id)
dirsearch {Boolean} opcjonalne, można wyłączyć wyszukiwanie dla j-Directory
autosource {String} trasa do funkcji search w autocomplete, function(search, render(arr))
autovalue {String} trasa właściwości dla wartości w autosource
maxlength {Liczba} maksymalna długość
minvalue {Liczba} min. wartość dla typu liczby (default: undefined)
maxvalue {Liczba} maksymalna wartość dla typu liczby (default: undefined)
rebind {Boolean} jeśli true odłącza data-bind tylko do tego elementu (default: 0)
validate {String} opcjonalny, warunek weryfikacji wartości, może zawierać link do function(value) lub !!value.match(/[a-z]+/)
multiline {Boolean} opcjonalne, umożliwia wielokrotne + dodatki klasy editable-multiline (inline-block + width:100%) podczas edycji (default: false)
raw {Boolean} opcjonalne, kiedy true to bieżąca zawartość HTML będzie jako miejsce, jeśli wartość jest nullable (default: true)
accept {String} opcjonalny, warunek akceptacji wartości, może zawierać link do function(value) lub !!value.match(/[a-z]+/) jest podobny do validate
empty {String} opcjonalny, umożliwia pustą wartość i może zawierać pustą etykietę lub 1 lub true dla automatycznego rebind wiązania
invalid {String} opcjonalne, link do metody method(el, isInvalid, meta) jest oceniany, gdy element jest nieważny i odwrotnie

Metody:

NEW: component.changed() zwraca obiekt z zmienionymi danymi

Dobrze wiedzieć:

Jeśli użytkownik naciśni trochę key, element edycyjny będzie zawierał klasę keypressed tak długo, jak nie opuszczają kontroli.
Każdy zmienny element będzie zawierał klasę changed
Jeśli składnik zmienia niektóre wartości, główny element będzie zawierać klasę ui-editable-changed
Jeśli element ma data-bind z empty, zostanie on wyczyszczony po skupieniu
NOWOŚĆ - Wspierają tags W tej chwili wspiera tylko rebind i data-bind(dane związane z template z {jQuery selector} Prace z +v18)
NEW jeśli element ( lub rodzic, lub rodzica) zawiera atrybut data-disabled="1", sterowanie zostanie wyłączone
NEW ukryte i uszkodzone elementy nie zostaną zatwierdzone

Użyj go z <ui-component name="editable">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>