javascript tree view component
bower install ui-js-tree#0.1.2
ui-js-tree
A javascript Ui tree view control, created in vanilla javascript. Angular js 1.x, Vue js 2.x and Ractive.js examples avaliable.
Get the latest version with yarn, bower or npm:
yarn add ui-js-tree
or
bower install ui-js-tree
or
npm install ui-js-tree
Add the following to your html:
<link rel="stylesheet" href="[the relative path to ui-js-tree]/css/ui-js-tree.css">
<script src="[the relative path to ui-js-tree]/lib/ui-js-tree.js"></script>
var treeData = {
title: 'root',
children: [{
title: 'child',
children: [{
title: 'grandchild'
}]
]}
};
//Optional options
var treeOptions = {
initialLevel: 2,
lazyRender: true,
renderNodeFn: function(data, el) {
return data.title;
},
onSelect: function(data, el) {
//Do something when a node is selected
console.log(data);
},
onBeforeSelect: function(data, el) {
//Do something before a node is selected
console.log(data);
},
onExpand: function(data, el) {
//Do something when a node is expanded
console.log(data);
},
onBeforeExpand: function(data, el) {
//Do something before a node is expanded
console.log(data);
},
onCollapse: function(data, el) {
//Do something when a node is collapsed
console.log(data);
},
onBeforeCollapse: function(data, el) {
//Do something before a node is collapsed
console.log(data);
}
};
var uitree = new UiJsTree(treeData, document.body, treeOptions);
uitree.render();
Example:
{
initialLevel: 2,
lazyRender: true,
nodeRenderFn: function(data, el) {
return data.title;
},
onSelect: function(data, el) {
console.log(data.title);
}
}
Example with element as return value from nodeRenderFn (demonstrated in vue js example):
{
initialLevel: 2,
lazyRender: true,
nodeRenderFn: function(data, el) {
let span = document.createElement('span')
let icon = document.createElement('i')
icon.setAttribute('class', 'material-icons')
icon.appendChild(document.createTextNode('face'))
span.appendChild(icon)
span.appendChild(document.createTextNode(node.title))
return span
},
onSelect: function(data, el) {
console.log(data.title);
}
}
var treeView = new new UiJsTree(
// Tree data
[{
title: 'root',
children: [{
title: 'child1'
}, {
title: 'child2'
}]
}],
// Element to render to
document.getElementById('treeview'),
//Tree options
{
onSelect: function(data, el) {
console.log(data);
}
});
// Render tree
treeView.render();
The parent element should have overflow: auto
and position: relative
or position: absolute
and a height, to be able to scroll a node into view when it is selected by key navigation or by code.
methods
load(data)
: Load new tree data
data : Element
A hierarcical data structurefilter(predicate, limit)
: Filter the nodes in the tree with a supplied predicate function which receives the node data as an argument, and must return true or false. Limit can be used to limit the amount of returned nodes. The result will be displayed as a flat list.
predicate : function(data)
limit: integer
[1..n]render()
: Render the tree and reset any filter
selectBy(predicate, scrollIntoFocus, supressEvents)
: Select a node in the tree with a supplied predicate function which receives the node (object with the data and el as properties) as an argument, and must return true or false. The first true result will abort the search and select the current node.
predicate: function(node)
scrollIntoFocus : boolean
supressEvents: boolean
getNodeData(el)
: Get a node data object from a tree node element
el: Element
The node element to get the node data bygetEl(nodeData)
: Get a node element from a tree node data object
nodeData: Object
The node data to get the element bygetNodeObj(nodeData)
: Get a node object from a tree node data object
nodeData: Object
The node data to get the mapped node byexpandAll(supressEvents)
: Expand all nodes
supressEvents: boolean
collapseAll(supressEvents)
: Collapse all nodes
supressEvents: boolean
expandNode(nodeData, recursive, supressEvents)
: Expand the optional node argument or the selected node
nodeData: Object
The optional node to expandrecursive : boolean
Expand recursive if truesupressEvents: boolean
collapseNode(nodeData, supressEvents)
: Collapse the optional node argument or the selected node
nodeData: Object
The optional node to collapsesupressEvents: boolean
firstNode()
: Select and scroll to the first node
lastNode()
: Select and scroll to the last node
nextNode()
: Select the scroll to next node
prevNode()
: Select the scroll to prev node
addToNode(newData, nodeData)
: Add new child nodes to existing node data
newData: Object or Array
nodeData: Object
existing nodeData objecttraverse(func, fromNode)
: Traverse the tree data
func: Object or Array
the callback function for each data nodefromNode: Object
the node to traverse down fromproperties
selected
: The selected node data object
focusEl
: The focus element of the tree
treeData
: The tree data
nodeMap
: The tree data as a mapped keyed node objects in indexed order from top to bottom
initialLevel
: The initial node levels to expand/show
keyMap
: An object with key event mapping, can be used to customize the key navigation mapping