A nice jQuery and Bootstrap tree view plugin – Easy-Tree.js

Easy Tree is a powerful jQuery and Bootstrap tree view plugin, that allows us to build own tree structures, with select/add/edit/remove functions.

Easy-Tree.js – jQuery and Bootstrap tree view plugin!

A jQuery and Bootstrap tree view plugin, useful and easy to use. Many features available.

Dependencies are only jQuery and Bootstrap 3. An easy way to convert HTML list to a tree, that will be enabled to select, add, edit and remove items!

A sample view of Easy-Tree.js - jQuery and Bootstrap tree view plugin
A sample view of Easy-Tree.js – jQuery and Bootstrap tree view plugin

Usage

1. Create HTML list, that we will turn into the tree:

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

2. Call the plugin in JS:

$('.easy-tree').EasyTree();

Options of the plugin:

selectable – the tree can be selected or not; default true

deletable – the tree’s node can be deleted or not; default false

editable – the tree’s node can be edited or not; default false

addable – can create node for the tree or not; default false

That’s it.

Demo:

http://zgs225.github.io/easy-tree

Get the jQuery and Bootstrap tree view plugin from GitHub:

https://github.com/zgs225/easy-tree

See also:

hColumns – jQuery Mac OS like finder

jQuery nested checkboxes – Deep Checkbox plugin

Enjoy!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1