# j-Tree

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 7c00ac73e017859cd048f44eb2bfdf0b7c7da30a676301b5995f3046fc65e590
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__ΕΠΙΤΡΟΦΗ__:

- `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 άδεια.

```html 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>
```