8 Useful JQuery TreeView Examples



I have browsed the web for days to find out the javascript treeview. Every time I need to implement a treeview with a new feature, I have to search the whole web. So I have gathered a collection of very useful jquery treeview component or plugin here. I have also given the demo and details link the corresponding treeview implementation. Anyone can easily see the demos from this page and can choose the right treeview features he needs.

I will keep updating this page as soon as I get new jquery treeview plugins with some new features.


jQuery plugin: Treeview

Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements. Supports both location and cookie based persistence.


Demo Details


jsTree

jsTree is a javascript based, cross browser tree component. It uses jQuery and Sarissa (optionally). jsTree is absolutely free (licensed same as jQuery – under both GPL and MIT – whichever suits your needs).

 

Key features

  • Data sources:
    • predefined HTML – convert nested lists into a tree on the fly
    • JSON – provide a json object
    • XML – provide a nested structure or a flat (id -> parent_id) one
  • Async loading – just provide an URL and the tree will request data as needed (works for XML & JSON sources)
  • Open, close, rename, create, delete nodes (all with definable rules)
  • Various callbacks (onchange, oncreate, ondelete, onload, etc …)
  • Drag & drop support (definable with rules)
  • Multiple select
  • Localization – maintain the same tree in as many languages as you like
  • Right-to-left support (supported in both supplied themes)
  • Theme support (change icons, sizes, backgrounds, etc …)
  • Animated open & close (configurable)
  • Optional keyboard navigation
  • multitree support – move/copy nodes form to tree to tree (definable with rules)
  • also works as a jQuery plugin

Demo Details


SimpleTree Plugin

jQuery SimpleTree Drag&Drop plugin is intended for displaying tree structures. This treeview uses sliding animation for expand and collapse. The tree nodes can be dragged to any other place. It also provides ajax loading feature for tree nodes.

Demo Details


jQuery TreeView Menu (v1.4)

jQuery TreeView Menu brings together all the most practical features requested in a Tree Menu into one awesome menu script. The markup for the menu is simply a HTML list before the script transforms it into a TreeView Menu

Demo Details


JQUERY FILE TREE

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.

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
  • Supports jQuery easing functions
  • Single- and multi-folder views
  • Configurable load message

Demo Details


Dynatree

Dynatree is a JavaScript dynamic tree view plugin for jQuery with support for lazy loading of branches.

Demo Details


jQuery Checkbox Tree Plugin

This is a treeview plugin with the checkbox in each nodes. Each node of the tree can checked. Based on some settings, checking a node automatically checks the children, or the parents or both.

Demo Details


JQTreeTable

Take a plain html table, wrap the rows you want collapsing/expanding in a tbody with an id of treetable, map each row to it's parent row, set some options, and let jQTreeTable take it from there.

By wrapping it in a tbody, it means you can have other rows within the same table not part of the tree, and it also means that if javascript is disabled, users still get the plain table. A minimum of classes (three all told, with a maximum of two at any one time if highlighting and striping are enabled) are set on the <tr> element, so it should not get in the way of any styling that is set.

Most of the treeview examples expand or collapse only the node and the node contains mainly text. But this example expands and collapses a full row of a table.

Demo Details