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.

Features:

• 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",
      "Web2py",
      "Django",
      "Flask",
      "GUI",
      "Network"
    ]
  },
  {
    "id": "1",
    "parent_id": null,
    "categoryName": "J2EE",
    "items": [
      "JSP",
      "Maven",
      "Spring",
      "MyBaits",
      "Hibernate"
    ]
  }
]

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
$.flextree.global.padding='1em';

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

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

6. API.

// get the parent
$().treeParent()

// get the ancestors
$().treeParents()

// get the children
$().treeChildren()

// get the descendant
$().treeFind()

// get the siblings
$().treeSiblings()

// get the next node
$().treeNext()

// get all the next nodes
$().treeNextAll()

// get the previous node
$().treePrev()

// get all the previous nodes
$().treePrevAll()

// get the node
$().treeNode()

// get the root
$().treeRoot()

// get all nodes
$().treeAll()

// collapse the node
$().treeActivate()

// expand the node
$().treeExpanded()

---

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