j-Editable

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Denna komponent kan redigera alla element med editable-klassen. det fungerar med data-bind eller dynamiska värden.

Konfigurera:

autofocus {Boolean} fokuserar på det första objektet (default: false)
validate {Boolean} kan inaktivera validering (default: true)
disabled {Boolean} kan inaktivera redigering (det lägger till ui-editable-disabled och ui-editable-enabled klass), standard: false
changed {String} valfritt, en länk till en metod eller väg --> det kommer att innehålla objektet med ändrade värden endast
enter {String} valfritt, en länk till en method(path, value, el)-metod utförs om användaren trycker på ENTER
escape {String} valfritt, en länk till en method(path, value, el)-metod utförs om användaren trycker på ESC
can {String} valfritt, en länk till metoden method(opt, el) måste returnera boolean, det vill säga can edit?
error {String} valfritt, en länk till metoden method(el, isInvalid, meta) utvärderas när objektet är ogiltigt och vice versa
NEW class {String} valfritt, lägger till ett klassnamn i formuläret ui-editable-CLASS (default: default)

data-editable attribut beskriver beteendet:

path {String} en relativ väg till egendom (kan arvas från data-bind automatiskt)
required {Boolean} valfritt, möjliggör "krav" (default: false)
type {String} valfritt, kan vara string (default), date, number, boolean, email eller html NEW tags
can {String} valfritt, en väg till function(opt, el) måste returnera boolean, det vill säga can edit?
save {String} valfritt, en väg till function(opt, accepted(boolean)), accepted funktion måste utvärderas
format {String} valfritt, ett format för date, standard: yyyy-MM-dd
dirsource {String} valfritt, väg till en datakälla
dircustom {String/Boolean} valfritt, kan innehålla en väg till function(val, next(new_val)) eller kan vara Boolean.
dirrender {String} valfritt, en väg till function(item, text) (du måste returnera HTML för j-Directory), kan denna funktion påverka listan över objekt i j-Directory
dirminwidth {Numret} valfritt, minsta bredd för j-Directory, standard: 200
dirmaxwidth {Numret} valfritt, högsta bredd för j-Directory
dirplaceholder {String} valfritt, en platsinnehavare för j-Directory
dirempty {String} valfritt, lägger till ett tomt fält för j-Directory
dirkey {String} valfritt, ett nyckelnamn för läsning av text i dirsource (default: name)
dirvalue {String} valfritt, ett nyckelnamn för läsning av value i dirsource (default: id)
dirsearch {Boolean} valfritt, kan inaktivera sökning för j-Directory
autosource {String} en väg till search funktion i autocomplete, function(search, render(arr))
autovalue {String} en egenskapsväg för värdet i autosource
maxlength {Numret} en maxlängd
minvalue {Numret} en min. värde för nummertyp (default: undefined)
maxvalue {Numret} en max. värde för nummertyp (default: undefined)
rebind {Boolean} om true återkopplar data-bind endast på detta element (default: 0)
validate {String} alternativ, en villkor för validering av värde, kan innehålla en länk till function(value) eller !!value.match(/[a-z]+/)
multiline {Boolean} valfritt, möjliggör multiline + tillägg klass editable-multiline (inline-block + width:100%) när det är redigering (default: false)
raw {Boolean} valfritt, när true då den aktuella HTML-innehållet kommer att vara som en platsinnehavare om värdet är nullable (default: true)
accept {String} valfritt, ett villkor för att acceptera värde, kan innehålla en länk till function(value) eller !!value.match(/[a-z]+/) liknar validate
empty {String} valfritt, möjliggör tomt värde och kan innehålla tomt etikett eller 1 eller true för auto rebind av binder
invalid {String} valfritt, en länk till metoden method(el, isInvalid, meta) utvärderas när objektet är ogiltigt och vice versa

Metoder:

NEW: component.changed() returnerar ett objekt med ändrade data

Bra att veta:

Om användaren trycker på några key så kommer den redigerbara elementet att innehålla keypressed klass så länge de inte har lämnat kontrollen
Varje ändrad element kommer att innehålla klass changed
Om komponenten ändrar vissa värden kommer huvudelementet att innehålla klass ui-editable-changed
om elementet har data-bind med empty, kommer det att rengöras efter fokus
NEW stöder nu tags-typ. För närvarande stöds endast med rebind och data-bind. (databindande template med {jQuery selector} fungerar från +v18)
NEW om elementet ( eller förälder, eller föräldrar) innehåller attribut data-disabled="1", kommer kontrollen att inaktiveras
NEW dolda och inaktiverade element kommer inte att valideras

Använd den med <ui-component name="editable">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>