ForgeComponents
el
English Español Slovenčina Deutsch Français Italiano Português Polski Čeština Nederlands Română Magyar Svenska Ελληνικά Български

Components

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} ένα σχετικό μονοπάτι στην ιδιοκτησία (μπορεί να κληρονομηθεί από το data-bind αυτόματα)
  • required {Boolean} προαιρετική, επιτρέπει "αναγκαία" (προεπιλεγμένη: false)
  • type {String} επιλογή, μπορεί να είναι string (επιλεγμένη), date, number, boolean, email ή html NEW tags
  • can Διάλογος, ένας δρόμος για 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 {Αριθμός} επιλογή, ελάχιστη πλάτος για j-Directory, προεπιλεγμένη: 200
  • dirmaxwidth {Αριθμός} προαιρετική, μέγιστη πλάτος για 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 {Συνολικά} μια ελάχιστη τιμή για τον τύπο αριθμού (προεπιλογή: undefined)
  • maxvalue {Συνολικά} μέγιστη τιμή για τον τύπο αριθμού (προεπιλογή: undefined)
  • rebind {Boolean} εάν το true ανασυνδέει το data-bind μόνο σε αυτό το στοιχείο (προεπιλεγμένο: 0)
  • validate {String} προαιρετική, προϋπόθεση για την επικύρωση της αξίας, μπορεί να περιέχει σύνδεση με function(value) ή !!value.match(/[a-z]+/)
  • multiline {Boolean} προαιρετική, επιτρέπει multiline + προσθήκη τάξη 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 Συγγραφέας: Peter Širka. πηγή: το 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>