Best jQuery Treeview Plugins for Developers

A tree view or an outline view is a graphical control element that presents a hierarchical view of information. Each item (often called a branch or a node) can have a number of subitems. This is often visualized by indentation in a list. An item can be expanded to reveal subitems, if any exist, and collapsed to hide subitems.

There are plenty of plugins out there by which you can create treeview for your files and also can display the dataflow of your web applications.

This article includes Best jQuery Treeview Plugins for Developers, if you are aware of any other useful jQuery Treeview plugins; please let us know by posting a comment below.

1. jQuery Horizontal Tree


jQuery Horizontal Tree is a jQuery plugin for visualising data in a tree structure. This plugin supports add, edit, delete functionality with ajax and also supports drag and drop for re-organisation of nodes.

A plugin that allows you to render structures with nested elements in a tree structure. To build the tree you need is to just make a single line call to the plugin and set parameter and supply the HTML element Id for a nested unordered list element that is representative of the data you’d like to display.
Demo & Download

2. Fancy Tree


Fancytree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, tables, drag’n’drop, and lazy loading.
Demo & Download

3. niceTree


Get rid of that ugly tree menu on your site with niceTree. An easy to install JQuery plugin with more options than you’ll ever need. niceTree will take your HTML and turn it into a collapsible menu system with unlimited menus within menus.

It has myriad of features like multiple tree support, colors, fast and lightweight, Ajax content, cookies, cross browser compatible, and includes beautiful animations.
Demo & Download

4. jqTree


JqTree is a jQuery widget for displaying a tree structure in html. It supports json data, loading via ajax and drag-and-drop. You can create tree from JSON data, loads data using Ajax, drag and drop, lazy loading, keyboard support, saves the state and browser compatible.
Demo & Download

5. Explr


Explr is static yet persistent, good-looking, customizable, cross-browser compatible, smooth animation effect, simple & lightweight less than 3KB jQuery simple tree plugin to create a simple hierarchical tree navigation from a normal menu list elements.
Demo & Download

6. Dynatree


Dynatree is a JavaScript dynamic tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag’n’drop, and lazy loading.
Demo & Download

7. Tree


This plugin does not require any external libraries or specific approach, you can chose either way to integrate it – build the tree in your backend code or add some data using JavaScript after page get loaded. It also supports states – you save tree state, update data and then restore the state back (expanded nodes, selected node).
Demo & Download

8. jsTree


jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.

jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery’s event system, so binding callbacks on various events in the tree is familiar and easy.
Demo & Download

9. jQuery Portfolio Gallery Tree


It’s a gallery tree plugin that means every gallery can have one or more sub galleries. It’s perfectly suitable for portfolio gallery. It’s fully responsive and also usable for other purposes like navigation, galleries etc.

It has some unique features like flat UI, 5 layouts, responsive design, supported by all major browsers and metro iOS 7 inspired.
Demo & Download

10. jQuery Treetable


jQuery treetable is a plugin for jQuery, the ‘Write Less, Do More, JavaScript Library’. With this plugin you can display a tree in an HTML table, e.g. a directory structure or a nested list. This plugin is released under both the MIT and the GPLv2 license by Ludo van den Boom.
Demo & Download

11. Bonsai


Bonsai is a lightweight jQuery plugin that takes a big nested list and prunes it down to a small expandable tree control. Also includes support for checkboxes (including ‘indeterminate’ state) and for populating the tree using a JSON data source.
Demo & Download

12. jTree Genealogy Tree Maker


jTree script is a complete script with all basic and advance features which allow you to build professional family tree making website using latest web standards including jquery, angular js, bootstrap and php. Script allows user to generate their own professional genealogy or family tree in real time, save it and share with others by making it public.
Demo & Download

13. jQuery a11ytree


a11yTree is a very lightweight and uninvasive jQuery plugin that transforms an HTML tree of nested unorded lists into an expanding and collapsing tree that’s universally accessible.
Demo & Download

14. jQuery Filetree


jQueryFileTree is a configurable, AJAX file browser plugin for jQuery. It is fully customizable via CSS, has ability to style icons based on file extension, uses Ajax t fetch file information on the fly ad much more.
Demo & Download

15. MGMiniMap


Magnoliyan Minimap or mgMiniMap is Photoshop Navigator Panel like jQuery plugin. Say you have a page which long content goes out of the visible part of the browser’s window – viewport. mgMiniMap shows minimizes and simplified preview of the full page content with clearly marked draggable viewport. While you scroll the page, minimap automatically updates the preview. Also, while you drag the viewport frame, the original content gets scrolled as well.
Demo & Download

16. jQuery Org Chart


jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure. To build the tree all you need is to make a single line call to the plugin and supply the HTML element Id for a nested unordered list element that is representative of the data you’d like to display. If drag-and-drop is enabled you’ll be able to reorder the tree which will also change the underlying list structure.
Demo & Download

Best jQuery Treeview Plugins for Developers
5 (100%) 6 votes

Leave a Reply