08
NovVuejs-tree is a highly customizable and blazing fast Vue tree component introduced by Vincent Jacquier. It provides interactive trees that are easily extendable and customizable. You can view its demo here.
You can install this component by using yarn or Npm
yarn add vuejs-tree
or
npm install vuejs-tree
Add the following lines at the top of your .js
file which contains your Vue instance.
import Tree from 'vuejs-tree'
// in your vue instance
components: {
'Tree': Tree
},
Then add the following line in your HTML file to generate a tree. You can have as many trees per page as you want.
<Tree id="my-tree-id" ref="my-tree-ref" :custom-options="myCustomOptions" :custom-styles="myCustomStyles" :nodes="treeDisplayData"></Tree>
You need to define data to display which is a nested array of hash.
Example:
data: {
treeDisplayData: [
{
text: 'Root 1',
state: { checked: false, selected: false, expanded: false },
nodes: [
{
text: 'Child 1',
state: { checked: false, selected: false, expanded: false },
nodes: [
{
text: 'Grandchild 1',
state: { checked: false, selected: false, expanded: false }
},
{
text: 'Grandchild 2',
state: { checked: false, selected: false, expanded: false }
}
]
},
{
text: 'Child 2',
state: { checked: false, selected: false, expanded: false }
}
]
},
{
text: 'Root 2',
state: { checked: false, selected: false, expanded: false }
}
]
}
Here is a fully customized node:
{
id: 1,
text: 'Root 1',
definition: 'First node',
depth: 1,
checkable: false,
selectable: false,
expandable: true,
tags: [42],
state: {
checked: false,
expanded: false,
selected: false
},
nodes: [
{},
...
]
}
The Following properties define a node-level css and behavior.
key | type | Detail |
---|---|---|
id | String or Integer --> Mandatory | Used in the tree to differentiate each node |
text | String --> Mandatory | The text value displayed at the right of the node icons |
definition | String --> Optional | If some text is given, then it will show as a tooltip |
depth | Integer --> Optional | It corresponds to the node depth, starting from 0, 1 or anything. It’s advisable to fill these fields if some of your nodes have the same id |
tags | [Integer] --> Optional | The tag is displayed at the right end of the line |
checkable | Boolean --> Optional, default: true | Used to enable or disable the node’s check event |
selectable | Boolean --> Optional, default: true | Used to enable or disable the node’s select event |
expandable | Boolean --> Optional, default: true | Used to enable or disable the node’s expand event |
state | - | nodes’s state |
state.checked | Boolean --> Mandatory, default: false | Change the node’s default state (at initialize) |
state.selected | Boolean --> Mandatory, default: false | Change the node’s default state (at initialize) |
state.expanded | Boolean --> Mandatory, default: false | Change the node’s default state (at initialize) |
nodes | Object --> Optional | Used to display the node’s children. Look above for a structure example |
Here is an example of a customOptions
hash the tree can take. I suggest you use a vuejs computed function if you want to use a function pointer.
computed: {
myCustomStyles() {
return {
tree: {
style: {
height: 'auto',
maxHeight: '300px',
overflowY: 'visible',
display: 'inline-block',
textAlign: 'left'
}
},
row: {
style: {
width: '500px',
cursor: 'pointer'
},
child: {
class: '',
style: {
height: '35px'
},
active: {
class: 'custom_row_active_class',
style: {
height: '35px'
}
}
}
},
addNode: {
class: 'custom_class',
style: {
color: '#007AD5'
}
},
editNode: {
class: 'custom_class',
style: {
color: '#007AD5'
}
},
deleteNode: {
class: 'custom_class',
style: {
color: '#EE5F5B'
}
},
selectIcon: {
class: 'custom_class',
style: {
color: '#007AD5'
},
active: {
class: 'custom_class',
style: {
color: '#2ECC71'
}
}
},
text: {
style: {},
class: 'capitalize',
active: {
style: {
'font-weight': 'bold',
color: '#2ECC71'
}
}
}
};
},
myCustomOptions() {
return {
treeEvents: {
expanded: {
state: true,
fn: null,
},
collapsed: {
state: false,
fn: null,
},
selected: {
state: false,
fn: null,
},
checked: {
state: true,
fn: this.myCheckedFunction,
}
},
events: {
expanded: {
state: true,
fn: null,
},
selected: {
state: false,
fn: null,
},
checked: {
state: false,
fn: null,
},
editableName: {
state: false,
fn: null,
calledEvent: null,
}
},
addNode: { state: false, fn: null, appearOnHover: false },
editNode: { state: true, fn: null, appearOnHover: true },
deleteNode: { state: true, fn: null, appearOnHover: true },
showTags: true,
};
}
},
Tree
You can call your own function here by assigning a function pointer in the tree options and changing its state to true. These functions are called after all tree modifications.
onNodeSelected
Called when a node is selected. myCustomOptions.treeEvents.selected.fn
onNodeExpanded
Called when a node is expanded. myCustomOptions.treeEvents.expanded.fn
Or called when a node is collapsed.
myCustomOptions.treeEvents.collapsed.fn
onNodeChecked
Called when a node is collapsed. myCustomOptions.treeEvents.checked.fn
You can call your own function here by assigning a function pointer in the tree options. It will replace the existing behavior of the tree for this event. You can also disable an event by changing its state to false.
toggleSelected
Called when a node is selected. myCustomOptions.events.selected.fn
toggleExpanded
Called when a node is expanded or collapsed. myCustomOptions.events.expanded.fn
toggleChecked
Called when a node is checked. myCustomOptions.events.checked.fn
editableName
You can call a special function if you assign it’s pointer in myCustomOptions.events.editableName.fn
Or you can call an existing event by assigining it’s name in myCustomOptions.events.editableName.calledEvent
Example:
myCustomOptions.events.editableName.calledEvent = ‘selected’
You can view its methods and other options on Github.
Published at : 08-11-2021
I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.
Launch project