Nice Tree View Plugin with jQuery and Bootstrap 3 - Easy Tree
File Size: | 55.8 KB |
---|---|
Views Total: | 115668 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.