Vanilla JavaScript TreeView
A stupid, simple tree view written with vanilla JS. I needed a lightweight control that just displayed data in a tree form and out popped this. I wrote a post on my blog that goes into more depth.
Dependencies
None. I built this using only plain JavaScript so there's no external dependencies. Other than the CSS required for styling.
Example Usage
If used outside of NPM/require, it will attach a global TreeVew
object to window
. If done using NPM, then it can be included using require
like everything else. To install it via NPM:
npm install js-treeview
HTML
JavaScript
// NPMvar TreeView = ; var tree = name: 'Item 1' children: name: 'Item 2' expanded: true children: name: 'Sub Item 1' children: name: 'Sub Item 2' children: 'tree';
Options
Name | Type | Description |
---|---|---|
data |
array |
The array of items to populate the tree with. Each item is required to have a name and a children array. An optional expanded option allows you to default the child to be expanded when created. |
id |
string|object |
ID of the DOM element, or the DOM element itself, to render the tree in. |
Events
Name | Arguments | Description |
---|---|---|
expand |
target - The DOM node that initiated the expandleaves - Array of leaf DOM nodes under the target |
Fires when a leaf is expanded. |
expandAll |
No arguments | Fires after the expandAll method is called. |
collapse |
target - The DOM node that initiated the collapseleaves - Array of leaf DOM nodes under the target |
Fires when a leaf is collapsed. |
collapseAll |
No arguments | Fires after the collapseAll method is called. |
select |
target - The DOM node selecteddata - Data node associated with the selected element |
Fires when a outermost leaf is selected. Contains data item of the leaf selected. |
Usage
tree;
License
This plugin is available under the MIT license.