We are using jsTree for treeview. JsTree is jquery plugin, that provides interactive trees. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources, AJAX & async callback loading.
Read the official jsTree Documentation for a full list of instructions and other options.
In order to use jstree on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/jstree/jstree.css" />
Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/jstree/jstree.js"/>
Basic
To create a basic treeview create a list and initialize like this: $(El).jstree()
<div id="jstree-basic">
<ul>
<li data-jstree='{"icon" : "ri-folder-3-line"}'>
css
<ul>
<li data-jstree='{"icon" : "ri-folder-3-line"}'>
app.css
</li>
<li data-jstree='{"icon" : "ri-folder-3-line"}'>
style.css
</li>
</ul>
</li>
<li class="jstree-open" data-jstree='{"icon" : "ri-folder-3-line"}'>
img
<ul data-jstree='{"icon" : "ri-folder-3-line"}'>
<li data-jstree='{"icon" : "ri-folder-3-line"}'>
bg.jpg
</li>
<li data-jstree='{"icon" : "ri-folder-3-line"}'>
logo.png
</li>
<li data-jstree='{"icon" : "ri-folder-3-line"}'>
avatar.png
</li>
</ul>
</li>
<li class="jstree-open" data-jstree='{"icon" : "ri-folder-3-line"}'>
js
<ul>
<li data-jstree='{"icon" : "ri-folder-3-line"}'>jquery.js</li>
<li data-jstree='{"icon" : "ri-folder-3-line"}'>app.js</li>
</ul>
</li>
<li data-jstree='{"icon" : "ri-file-text-line"}'>
index.html
</li>
<li data-jstree='{"icon" : "ri-file-text-line"}'>
page-one.html
</li>
<li data-jstree='{"icon" : "ri-file-text-line"}'>
page-two.html
</li>
</ul>
</div>
$("#jstree-basic").jstree()
Custom Icons
You can customize icons by passing icon
parameter.
You can also create a treeview with JS without writing HTML.
<div id="jstree-custom-icons"></div>
$("#jstree-custom-icons").jstree({
core: {
data: [
{
text: 'css',
children: [
{ text: 'app.css', type: 'css' },
{ text: 'style.css', type: 'css' }
]
},
{
text: 'img',
state: { opened: true },
children: [
{ text: 'bg.jpg', type: 'img' },
{ text: 'logo.png', type: 'img' },
{ text: 'avatar.png', type: 'img' }
]
},
{
text: 'js',
state: { opened: true },
children: [
{ text: 'jquery.js', type: 'js' },
{ text: 'app.js', type: 'js' }
]
},
{ text: 'index.html', type: 'html' },
{ text: 'page-one.html', type: 'html' },
{ text: 'page-two.html', type: 'html' }
]
},
plugins: ['types'],
types: {
default: { icon: 'ri-folder-3-line' },
html: { icon: 'ri-html5-fill text-danger' },
css: { icon: 'ri-css3-fill text-info' },
img: { icon: 'ri-image-fill text-success' },
js: { icon: 'ri-javascript-line text-warning' }
}
})
Context Menu
Add contextmenu
in plugins
property and check_callback: true
in core
property to add a context menu to your treeview.
<div id="jstree-context-menu"></div>
$("#jstree-context-menu").jstree({
core: {
check_callback: true,
data: [
{
text: 'css',
children: [
{ text: 'app.css', type: 'css' },
{ text: 'style.css', type: 'css' }
]
},
{
text: 'img',
state: { opened: true },
children: [
{ text: 'bg.jpg', type: 'img' },
{ text: 'logo.png', type: 'img' },
{ text: 'avatar.png', type: 'img' }
]
},
{
text: 'js',
state: { opened: true },
children: [
{ text: 'jquery.js', type: 'js' },
{ text: 'app.js', type: 'js' }
]
},
{ text: 'index.html', type: 'html' },
{ text: 'page-one.html', type: 'html' },
{ text: 'page-two.html', type: 'html' }
]
},
plugins: ['types', 'contextmenu'],
types: {
default: { icon: 'ri-folder-3-line' },
html: { icon: 'ri-html5-fill text-danger' },
css: { icon: 'ri-css3-fill text-info' },
img: { icon: 'ri-image-fill text-success' },
js: { icon: 'ri-javascript-line text-warning' }
}
})
Drag & Drop
Add dnd
in plugins
property and check_callback: true
in core
property to be able to drag and drop your nodes.
<div id="jstree-drag-drop"></div>
$("#jstree-drag-drop").jstree({
core: {
check_callback: true,
data: [
{
text: 'css',
children: [
{ text: 'app.css', type: 'css' },
{ text: 'style.css', type: 'css' }
]
},
{
text: 'img',
state: { opened: true },
children: [
{ text: 'bg.jpg', type: 'img' },
{ text: 'logo.png', type: 'img' },
{ text: 'avatar.png', type: 'img' }
]
},
{
text: 'js',
state: { opened: true },
children: [
{ text: 'jquery.js', type: 'js' },
{ text: 'app.js', type: 'js' }
]
},
{ text: 'index.html', type: 'html' },
{ text: 'page-one.html', type: 'html' },
{ text: 'page-two.html', type: 'html' }
]
},
plugins: ['types', 'dnd'],
types: {
default: { icon: 'ri-folder-3-line' },
html: { icon: 'ri-html5-fill text-danger' },
css: { icon: 'ri-css3-fill text-info' },
img: { icon: 'ri-image-fill text-success' },
js: { icon: 'ri-javascript-line text-warning' }
}
})
Checkbox
Add checkbox
and wholerow
in plugins
property to create selectable treeview.
<div id="jstree-checkbox"></div>
$("#jstree-checkbox").jstree({
core: {
data: [
{
text: 'css',
children: [
{ text: 'app.css', type: 'css' },
{ text: 'style.css', type: 'css' }
]
},
{
text: 'img',
state: { opened: true },
children: [
{ text: 'bg.jpg', type: 'img' },
{ text: 'logo.png', type: 'img' },
{ text: 'avatar.png', type: 'img' }
]
},
{
text: 'js',
state: { opened: true },
children: [
{ text: 'jquery.js', type: 'js' },
{ text: 'app.js', type: 'js' }
]
},
{ text: 'index.html', type: 'html' },
{ text: 'page-one.html', type: 'html' },
{ text: 'page-two.html', type: 'html' }
]
},
plugins: ['types', 'checkbox', 'wholerow'],
types: {
default: { icon: 'ri-folder-3-line' },
html: { icon: 'ri-html5-fill text-danger' },
css: { icon: 'ri-css3-fill text-info' },
img: { icon: 'ri-image-fill text-success' },
js: { icon: 'ri-javascript-line text-warning' }
}
})
Ajax
Use url
property in data
property in core
property to get your data with an AJAX call, refer below mentioned example for more info.
<div id="jstree-ajax"></div>
$("#jstree-ajax").jstree({
core: {
data: {
url: 'YOUR_URL',
dataType: 'json', // IF IN JSON FORMAT
data: function(node) {
return { id: node.id }
}
}
},
plugins: ['types', 'state'],
types: {
default: { icon: 'ri-folder-3-line' },
html: { icon: 'ri-html5-fill text-danger' },
css: { icon: 'ri-css3-fill text-info' },
img: { icon: 'ri-image-fill text-success' },
js: { icon: 'ri-javascript-line text-warning' }
}
})