j-Editable

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Този компонент може да редактира всички елементи с клас editable. Той работи с стойностите на data-bind или динамика.

Конфигуриране:

autofocus {Boolean} се фокусира върху първия елемент (предварително: false)
validate {Boolean} може да деактивира валидацията (дефалтиран: true)
disabled {Boolean} може да деактивира редактирането (това добавя класа на ui-editable-disabled и ui-editable-enabled), по подразбиране: false
changed {String} опция, връзка към метод или път --> тя ще съдържа обекта с променени стойности само
enter {String} опция, връзка към метод method(path, value, el), методът се изпълнява, ако потребителят натисне ENTER
escape {String} опция, връзка към метод method(path, value, el), методът се изпълнява, ако потребителят натисне ESC
can {String} опционално, връзката към метода method(opt, el) трябва да върне boolean, което означава can edit?
error {String} опционално, връзката към метода method(el, isInvalid, meta) се оценява, когато елементът е невалиден и обратното.
NEW class {String} опционално, добавя име за клас във формуляра ui-editable-CLASS (предварително: default)

Атрибутът на data-editable описва поведението:

path {String} relative path към собствеността (може да бъде наследен от data-bind автоматично)
required {Boolean} опционално, позволява "необходимо" (предварително: false)
type {String} опционално, може да бъде string (предварително), date, number, boolean, email или html NEW tags
can {String} опция, пътят към function(opt, el) трябва да се върне на boolean, което означава, че can edit?
save {String} опция, път към function(opt, accepted(boolean)), accepted функция трябва да бъде оценена
format {String} опционален, формат за date, подразбиране: yyyy-MM-dd
dirsource {String} опционален, път към източник на данни
dircustom {String/Boolean} опция, може да съдържа път към function(val, next(new_val)) или може да бъде Boolean.
dirrender {String} опция, пътят към function(item, text) (може да се върне HTML за j-Directory), тази функция може да повлияе на списъка с елементи в j-Directory
dirminwidth {No} опционално, минимална ширина за j-Directory, подразбиране: 200
dirmaxwidth {No} опция, максимална ширина за j-Directory
dirplaceholder {String} опционално, място за j-Directory
dirempty {String} опционално, добавя празно поле за j-Directory
dirkey {String} опционално, ключово име за четене на text в dirsource (предварително: name)
dirvalue {String} опционално, ключово име за четене на value в dirsource (предварително: id)
dirsearch {Boolean} опционално, може да деактивира търсенето на j-Directory
autosource {String} пътят към функцията search в autocomplete, function(search, render(arr))
autovalue {String} свойствен път за стойността в autosource
maxlength Максът е
minvalue {No.} минимална стойност за тип номер (предварително: undefined)
maxvalue {No.} максималната стойност за тип номер (предварително: undefined)
rebind Ако е true връзката data-bind В този случай (по подразбиране) 0)
validate {String} опция, условие за валидиране на стойността, може да съдържа връзка към function(value) или !!value.match(/[a-z]+/)
multiline {Boolean} опционално, позволява многолинен + приложни клас editable-multiline (inline-block + width:100%) когато е редактиран (предварително: false)
raw {Boolean} опционално, когато true тогава текущото HTML съдържание ще бъде като местонахождение, ако стойността е nullable (предварително: true)
accept {String} опция, условие за приемане на стойност, може да съдържа връзка към function(value) или !!value.match(/[a-z]+/) е подобен на validate
empty {String} опция, позволява празна стойност и може да съдържа празна етикета или 1 или true за авто rebind на връзката
invalid {String} опционално, връзката към метода method(el, isInvalid, meta) се оценява, когато елементът е невалиден и обратното.

Методи:

NEW: component.changed() връща обект с променени данни

Добре е да се знае:

Ако потребителят натисне някои key, редактираният елемент ще съдържа клас keypressed, докато те не са оставили контрола.
Всеки променлив елемент ще съдържа клас changed
Ако компонентът променя някои стойности, основният елемент ще съдържа клас ui-editable-changed
Ако елементът има data-bind с empty, той ще бъде изчистен след фокус
NEW сега поддържа tags тип. засега поддържа само с rebind и data-bind. (даточна връзка template с {jQuery selector} работи от +v18)
NEW ако елементът (или родител, или родител на родител) съдържа атрибут data-disabled="1", контрола ще бъде изключена
NEW скрити и деактивирани елементи няма да бъдат валидирани

Използвайте го с <ui-component name="editable">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>