Nice Tree View Plugin with jQuery and Bootstrap 3 - Easy Tree

Easy Tree is a nice & powerful tree view plugin for jQuery and Bootstrap 3 that allows to select, add, edit or remove items/nodes to build your own tree view structure.

How to use it:

1. Load the required jQuery library and Bootstrap 3 framework in the document.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Load the jQuery easy tree plugin after jQuery library.

<link rel="stylesheet" href="css/easyTree.css">
<script src="src/easyTree.js"></script>

3. Create a sample tree view using the nested lists as follows.

<div class="easy-tree">
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3
<ul>
<li>Example 1</li>
<li>Example 2
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</li>
<li>Example 0
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

4. Call the funciton with options to initialize the plugin.

<script>
(function ($) {
function init() {
$('.easy-tree').EasyTree({
selectable: true,
deletable: false,
editable: false,
addable: false,
i18n: {
...
}
});
}

window.onload = init();
})(jQuery)
</script>

Change log:

2016-11-09

• CSS update

---

This awesome jQuery plugin is developed by zgs225. For more Advanced Usages, please check the demo page or visit the official website.