A jQuery/ Bootstrap treeview plug-in with 2 demos

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 simple tree view by using Bootstrap. The plug-in allows you adding a few options like:

  • Add a new node in tree
  • Edit a node
  • Delete a node

You may add these options by using the jQuery code. See the demonstration online with code:

bootstrap treeview

See online demo and code

The markup for this example:

 

The jQuery code:

 

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 need 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 the classes in the style section or your single external CSS file as well.

Have a look at this demo where I have changed the background of the treeview. Besides, on mouse hover, the active tree/nodes will change.

bootstrap treeview

See online demo and code

Only a few CSS classes are changed in the demo while rest remains the same:

For overall background:

 

For mouseover effect on any node:

 

For parents with the child on hover:

 

Similarly, you may play with other classes to change the style of easy tree view plug-in.