This time I will share jQuery Plugin and tutorial about Flexible AJAX-enabled Tree View Plugin For jQuery – Flextree, hope it will help you in programming stack.
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.
1 |
<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.
1 |
<script src="jquery.js"></script> |
2 |
<script src="flextree.js"></script> |
3 |
<script src="flextree.components.js"></script> |
3. Prepare your JSON data:
05 |
"categoryName": "Python", |
07 |
"Python Introduction", |
18 |
"categoryName": "J2EE", |
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
1 |
$.flextree.tree(dataSource, template, args, onBind) |
5. Global settings.
02 |
$.flextree.global.padding='1em'; |
06 |
$.flextree.global.template = template; |
12 |
$.flextree.global.args = args; |
6. API.
This awesome jQuery plugin is developed by zhang-rf. For more Advanced Usages, please check the demo page or visit the official website.
