Flexible AJAX-enabled Tree View Plugin For jQuery - Flextree

File Size: 610 KB
Views Total: 4308
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Flexible AJAX-enabled Tree View Plugin For jQuery - Flextree

Flextree is a simple, flexible jQuery plugin used for rendering a dynamic, highly customizable tree structure from external JSON data via AJAX request.


  • Drag and drop supported.
  • Collapsible and expandable like an accordion.
  • Supports checkboxes with 3 check stats.
  • Custom template for each node.
  • Lots of customization options and API.

Basic usage:

1. Include the jQuery Flextree's CSS files in the header that will provide the primary CSS styles for the tree view.

<link rel="stylesheet" href="flextree.css">

2. Include jQuery library together with the flextree.js and flextree.components.js at the bottom of the webpage.

<script src="jquery.js"></script>
<script src="flextree.js"></script>
<script src="flextree.components.js"></script>

3. Prepare your JSON data:

    "id": "0",
    "parent_id": null,
    "categoryName": "Python",
    "items": [
      "Python Introduction",
    "id": "1",
    "parent_id": null,
    "categoryName": "J2EE",
    "items": [

4. Render a tree view using $.flextree function:

  • dataSource: JSON data array
  • template: custom template
  • args: args.id {string}, args.parentId {string}, args.correctParent {boolean}, args.collapsible {boolean}, args.collapseEvent {string}, args.exclusiveNode {boolean}, args.fixDblClickBug {boolean}, args.onBind {function (data {object}, i {number}, node {element})}
  • onBind: same as args.onBind, but when specify both, this will override args.onBind
$.flextree.tree(dataSource, template, args, onBind)

5. Global settings.

// padding-left for child nodes

// global template
var template = '...';
$.flextree.global.template = template;

// global args
var args = {
$.flextree.global.args = args;

6. API.

// get the parent

// get the ancestors

// get the children

// get the descendant

// get the siblings

// get the next node

// get all the next nodes

// get the previous node

// get all the previous nodes

// get the node

// get the root

// get all nodes

// collapse the node

// expand the node

This awesome jQuery plugin is developed by zhang-rf. For more Advanced Usages, please check the demo page or visit the official website.