1.1.5 • Published 7 years ago
js-treeview v1.1.5
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-treeviewHTML
<div id="tree"></div>JavaScript
// NPM
var TreeView = require('js-treeview');
var tree = new TreeView([
{ 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.on('select', function (e) {
console.log(JSON.stringify(e));
});License
This plugin is available under the MIT license.