The easy Treeview plug-in for your website
The easy-tree plug-in which is based on jQuery with Bootstrap framework support can be used for creating the treeview structure in your web pages easily.
All you need to do is to include the plug-in JS and CSS files (change as per needs), use the easy-tree CSS class in a <div>, and initiate the plug-in in jQuery code.
The markup contains the <ul> and <li> tags with required text/information that may be static or database-driven for nodes in Treeview.
A demo of Bootstrap tree
See the demo of a simple tree view using Bootstrap 3. The plug-in allows you to add a few options like:
- Add a new node in the tree
- Edit a node
- Delete a node
You may add these options by using the jQuery code. See the demonstration online with the code:
Complete code including jQuery:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/easyTree/easyTree.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/easyTree/easyTree.js"></script>
<style>
body {
background: #eee;
}
</style>
</head>
<body>
<div class="col-md-3">
<h3 class="text-success">A demo of Easy Tree</h3>
<div class="easy-tree">
<ul>
<li>Parent 1</li>
<li>Parent 2</li>
<li>Parent 3
<ul>
<li>Child 1</li>
<li>Child 2
<ul>
<li>Grand-child 1</li>
<li>Grand-child 2</li>
<li>Grand-child 3</li>
<li>Grand-child 4</li>
</ul>
</li>
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>Parent 4
<ul>
<li>Parent 4 Child 1</li>
<li>Parent 4 Child 2</li>
<li>Parent 4 Child 3</li>
<li>Parent 4 Child 4
<ul>
<li>Grand-child 1</li>
<li>Grand-child 2</li>
<li>Grand-child 3</li>
<li>Grand-child 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
(function ($) {
function init() {
$('.easy-tree').EasyTree({
addable: true,
editable: true,
deletable: true
});
}
window.onload = init();
})(jQuery)
</script>
</body>
</html>
In the head section, the dependency files are included:
- Bootstrap CSS file
- jQuery file
- easyTree JS file that you may download from the Github website here.
- easyTree CSS file
You may customize the CSS file as per the needs of your website theme.
A demo with custom CSS for Bootstrap / jQuery Treeview
As mentioned earlier, you may modify the CSS properties to match the theme of the treeview with other sections of your website. For that, simply change/add or remove the properties in the easyTree.css file or you may use and refer to the classes in the style section or your single external CSS file as well.
Have a look at this example output where I have changed the background of the treeview. Besides, on mouse hover, the active tree/nodes will change.
Only a few CSS classes are changed in the demo while the rest remains the same:
For overall background:
.easy-tree {
min-height: 20px;
margin-bottom: 20px;
background-color: #804040;
color: #fff;
border: none;
border-top: none;
padding-bottom: 15px;
}
For mouseover effect on any node:
.easy-tree li > span > a {
color: #fff;
text-decoration: none;
}
.easy-tree li > span > a:hover {
color: #8A4500;
text-decoration: none;
background: #FFCB97;
}
For parents with the child on hover:
.easy-tree li.parent_li > span:hover, .easy-tree li.parent_li > span:hover + ul li span {
background: #004040;
color: #8A4500;
}
Similarly, you may play with other classes to change the style of the easy tree view plug-in.