j-Tree

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

ΕΠΙΤΡΟΦΗ:

first {Boolean} επιλέγει το πρώτο στοιχείο δέντρου, προεπιλεγμένο: true (επιλεκτικά)
exec {String} απαιτείται: σύνδεση σε μια λειτουργία, αυτή η λειτουργία εκτελείται όταν επιλέγεται το κόμβο στο δέντρο
Το autoreset {Boolean} επαναλαμβάνει την κατάσταση όταν αλλάζει η πηγή δεδομένων (επιλεγμένη, προεπιλογή: false)
selected {String} επιλεγμένη κατηγορία (επιλεκτική, προεπιλεγμένη: selected)
checked {String} Επιλεκτικά, ένας δρόμος για function(arr, component) Ή ο δρόμος για property
checkednested {Boolean} προαιρετική, ελέγχει όλα τα υφάσματα (προεπιλογή: true)
upload {String} προαιρετική, ένα μονοπάτι για το function(item, files) (αξιοποιεί τα αρχεία αποσύνδεσης και απόρριψης)
dragdrop {String} προαιρετική, ένα μονοπάτι προς το function(item, target_item, itemel, targetel) (αποτρέπει τα στοιχεία αποσύνδεσης και απόρριψης)
options {String} προαιρετική, ένα μονοπάτι προς το function(item, el) επιτρέπει ένα μικρό κουμπί για ένα ενιαίο μενού πλαίσιο για κάθε στοιχείο
rename {String} προαιρετική, ένα μονοπάτι προς το function(item, newname, fn_accept(true))
unselectexpand {Boolean} Εναλλακτικά, μπορεί unselect επιλεγμένο στοιχείο όταν ο χρήστης κάνει κλικ στο επεκτατικό στοιχείο (προεπιλογή: false)
reselect {Boolean} Εναλλακτικά, αξιολογούνται exec Εάν το δέντρο είναι αναψυκτικό (επιλογή: false)
selectexpand {Boolean} Εναλλακτικά, επιτρέπεται η προσθήκη selected Κλάση προς επεκτατικά στοιχεία (επιλογή: false)
Το εικονίδιο iconoptions {String} στις επιλογές (προεπιλεγμένο: ti ti-ellipsis-h)
Το expanded {Boolean} επεκτείνεται σε όλα τα παιδιά (προεπιλεγμένο: false)
NEW: contextmenu {String} προαιρετικό, ένα μονοπάτι προς το function(item, el) επιτρέπει το μενού συνδέσμων ποντικιού
NEW: Η τιμή key {String} μπορεί να χρησιμοποιηθεί ως index στις παρακάτω μεθόδους (προεπιλογή: path)

Η δομή των δεδομένων:

Ο αντικειμενικός
Το αντικείμενο πρέπει να περιέχει name:String και children:[another similar object] ή children:null (χωρίς παιδιά)
Το αντικείμενο μπορεί να περιέχει ..., icon: 'home' }, μπορεί να αλλάξει ένα εικονίδιο αρχείου
Το στοιχείο αντικειμένου μπορεί να περιέχει ..., classname: 'css_custom_class' }, προσθέτει μια κατηγορία CSS στο στοιχείο "ετικέτα"
Το αντικείμενο μπορεί να περιέχει τα σήματα ..., html: 'RAW_HTML' {String} αντί για το πεδίο name

Μέθοδοι:

component.expand([index]) - επεκτείνει τους κόμβους index ή all (χωρίς καθορισμένο index)
component.collapse([index]) - συντριβές index ή all (χωρίς καθορισμένο index) κόμβους
component.clear() - καθαρίζει ένα cache για να αναζωογονήσει την πηγή
component.select(index) - Επιλέξτε το κόμβο
component.unselect() - μη επιλεγμένο κόμβο
component.rename(index) - εμφανίζει το input για την ανανέωση του ονόματος (δεν λειτουργεί με το config.rename)

Καλό να ξέρεις:

Το Setter επεκτείνει αυτόματα κάθε αντικείμενο προσθέτοντας μια ιδιότητα .$pointer με έναν δέντρο.

Χρησιμοποιήστε το με <ui-component name="tree">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

example.html

<style>
	.ui-tree { border: 1px solid #E0E0E0; }
	.ui-dark .ui-tree { border: 1px solid #404040; }
</style>

<div class="container">
	<div class="col-md-6">
		<div>Open Web Developer Console</div>
		<br />
		<ui-component name="tree" path="nodes" config="exec:fn_selected;checked:fn_checked"></ui-component>
	</div>
</div>

<script>
	var nodes = [];
	nodes.push({ name: 'Item 1', children: null });
	nodes.push({ name: 'Item 2', children: null });
	nodes.push({ name: 'Item 3', children: [{ name: 'SubItem 3 / 1', children: [{ name: 'SubItem 3 / 1 / 1', children: null }]}]});
	nodes.push({ name: 'Item 4', children: null });
	nodes.push({ name: 'Item 5', children: [{ name: 'Subitem 5 / 1', children: null }, { name: 'Subitem 5 / 2', children: [{ name: 'Subitem 5 / 2 / 1', children: [{ name: 'Subitem 5 / 2 / 1 / 1', children: null }]}] }, { name: 'Subitem 5 / 3', children: null }]});

	function fn_selected(node, isGroup, expanded) {
		console.log('SELECTED NODE:', node, isGroup, expanded);
	}

	function fn_checked(checked) {
		console.log('CHECKED', checked);
	}

</script>