j-TreeView

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

Αυτό το συστατικό είναι μόνο μια προβολή βήτα. είναι ακόμα σε εξέλιξη.

ΕΠΙΤΡΟΦΗ:

parent {String} ένα δοχείο με σταθερή ύψος, μπορεί να windowΗ υποτιθέμενη αξία: parent Το στοιχείο.
Το visibleY {Boolean} εμφανίζει ακόμα το στρογγυλό φράγμα Y (προεπιλεγμένο: true)
Το movable {Boolean} επιτρέπει την κίνηση των κόμβων (προεπιλεγμένο: true)
Το cachexpand {Boolean} θυμίζει την προηγούμενη κατάσταση (προεπιλογή: true)
Το arrows {Boolean} επιτρέπει τις ράβδους για φακέλους (προεπιλεγμένο: true)
Το expanded {Boolean} επεκτείνει όλους τους κόμβους (προεπιλεγμένο: false)
autosort {Boolean} είδη κόμβοι σύμφωνα με το item.sort (αν υπάρχει) ή item.name (αν υπάρχουν), προεπιλογή: true
margin {Number} κορυφαία / κάτω περιθώριο μαζί (προεπιλεγμένη: 0)
marginxs {Number} top/bottom marge μαζί για το πλάτος οθόνης xs
marginsm top/bottom marge μαζί για το πλάτος οθόνης sm
marginmd top/bottom marge μαζί για το πλάτος οθόνης md
marginlg top/bottom marge μαζί για το πλάτος οθόνης lg
disabled {Boolean} απενεργοποιεί ολόκληρο το συστατικό
Ο γονέας parentselectable {Boolean} θα είναι επιλεκτικός (προεπιλεγμένος: true)

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

Ο αντικειμενικός
Το αντικείμενο πρέπει να περιέχει id:String το οποίο είναι το κύριο ID κάθε στοιχείου.
Το αντικείμενο πρέπει να περιέχει name:String και children:[another similar object] ή children:null (χωρίς παιδιά)
Το αντικείμενο πρέπει να περιέχει το html:String (αν δεν υπάρχει, τότε το name παραδίδεται)
Το στοιχείο αντικειμένου μπορεί να περιέχει ..., classname: 'css_custom_class' }, προσθέτει μια κατηγορία CSS στο στοιχείο "ετικέτα"
Το αντικείμενο υποστηρίζει την ιδιοκτησία actions: { expand: true, drop: true, move: true }

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

example.html

<div style="width:300px;height:200px;border:1px solid #E0E0E0;margin:50px">
	<ui-component name="treeview" path="nodes" config="exec:fn_selected"></ui-component>
</div>

<script>
	var nodes = [];
	nodes.push({ id: '1', name: 'Item 1', html: '<b>Item 1</b>', children: null });
	nodes.push({ id: '2', name: 'Item 2', children: null });
	nodes.push({ id: '3', name: 'Item 3', children: [{ id: 'A', name: 'SubItem 3 / 1', children: [{ id: 'AA', name: 'SubItem 3 / 1 / 1', children: null }]}]});
	nodes.push({ id: '4', name: 'Item 4', children: null });
	nodes.push({ id: '5', name: 'Item 5', children: [{ id: 'B', name: 'Subitem 5 / 1', children: null }, { name: 'Subitem 5 / 2', children: [{ id: 'BB', name: 'Subitem 5 / 2 / 1', children: [{ id: 'BC', name: 'Subitem 5 / 2 / 1 / 1', children: null }]}] }, { id: 'BD', name: 'Subitem 5 / 3', children: null }]});

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

</script>