8 Useful JQuery TreeView Examples
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.
- 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
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.
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
JQUERY FILE TREE
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.
- 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
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.
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.
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.