Best jQuery Treeview Plugins & Tutorials with Demo

Hummingbird : A tiny and fast jQuery Treeview Plugin

Hummingbird : A tiny and fast jQuery Treeview Plugin

Hummingbird is a tiny and fast jQuery Treeview Plugin.

Features: 

  • Display hierarchical tree structures.
  • Based on simple pseudo HTML lists or full HTML structures.
  • Tri-state logic.
  • Manual and programmatical check, uncheck, collapse, expand, etc.
  • Supports n-tuple nodes, i.e. doubles, triplets, etc.
  • Supports disabled nodes, checked or unchecked.
  • Get checked/unchecked items programmatically.
  • Add and remove nodes dynamically.
  • Filter nodes.
  • Supports HTML5 data-* attribute to embed custom data.
  • Supports Font Awesome icons.
  • Search function.

Treeviz : Represent Tree Diagrams with JavaScript

Treeviz : Represent Tree Diagrams with JavaScript

Treeviz is a javascript module aims at providing an easy interface in order to represent tree diagrams on screen with the ability to handle dynamic data flows. The data format must be JSON.

Artarax : jQuery TreeView Plugin

Artarax : jQuery TreeView Plugin

Artarax is a jQuery plugin for tree view of any list with heading and sub headings

Gijgo : Free Javascript Controls

Gijgo : Free Javascript Controls

Gijgo is a set of free open source javascript controls distributed under MIT License. All widgets are high performance, built on top of the jQuery JavaScript Library and with built-in support for Bootstrap and Material Design. They are designed to saves you time and scales with your development process.

Drop Down Tree : jQuery Combo Box Tree View with Autocomplete

Drop Down Tree : jQuery Combo Box Tree View with Autocomplete

Drop Down Tree is an easy-to-use jQuery plugin for classifying transmitted data. The plugin displays a combo, which embeds a collapsible tree drawn by the transmitted data. The plugin has features of dynamic search and filter. The appearance is easy customizable using CSS. Drop Down Tree plugin is developed using only JavaScript.

Features:

  • Collapsible tree view: feature of collapse/expand tree elements
  • Autocomplete, filter and search works correctly under all browsers including Edge, old and new versions of Safari, Opera, Internet Explorer, etc.
  • Appearance is easy customizable using CSS and responsive design.
  • Returns the id of the selected item instead of text.

SmartTree : jQuery Viewing area Load Tree plugin

SmartTree : jQuery Viewing area Load Tree plugin

Support the visual area to load the tree components to ensure that the case of large data in the case of rapid loading and smooth operation. Using zTree code organization, the interface name is the same as zTree. In the zTree based on the increase in search and filtering. Function to be further improved, I hope you put forward valuable advice, must be in the first time to modify.

Hierarchy view component with pure CSS

Hierarchy view component with pure CSS

Zviad Sichinava writes his very first tutorial where he shows how to build a component that displays relational data with HTML/CSS only.

Easy-Tree.js : jQuery Bootstrap Tree View Plugin

Easy-Tree.js : jQuery Bootstrap Tree View Plugin

A plugin base on jquery and bootstrap 3, can convert an un-order list to a tree easily. The tree that selectable, addable, editable and deletable.

Almightree : jQuery Large Nested Lists Plugin

Almightree : jQuery Large Nested Lists Plugin

A jQuery plugin which makes large nested lists easier to navigate.

jQuery File Tree : AJAX File Browser plugin

jQuery File Tree : AJAX File Browser plugin

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. Continuation of unmaintained jQuery File Tree (v1.01) (12 April 2008).

Features:

  • Produces valid, semantic XHTML
  • Fully customizable via CSS
  • Ability to style icons based on file extension
  • Uses AJAX to fetch file information on the fly
  • Easy to configure and implement
  • Includes connector scripts for PHP and ASP.NET (C#)
  • Supports custom connector scripts for extended functionality
  • Customizable expand/collapse event
  • Customizable expand/collapse speeds