jQuery Plugin for Tree Widget - jqTree

jQuery Plugin for Tree Widget - jqTree
File Size: 1.84 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

jqTree is a jQuery based Tree Widget that allows you to create folder tree from JSON data with some fancy animations.

Licensed under the Apache License 2.0.


  • Load JSON data from local
  • Load JSON data from server
  • Drag and drop supported
  • Auto scroll and auto escape supported
  • Save state supported

You might also like:

Basic Usage (load json data):

1. Include jQuery library and jqTree.js in the head section of your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../tree.jquery.js"></script>

2. Markup

<div id="tree1"></div>

3. The Javascript. In this example we load the data using the data option. As you can see, the data is an array of objects.

$(function() {
  var data = [{
  label: 'node1',
  children: [
    { label: 'child1' },
    { label: 'child2' }
  label: 'node2',
  children: [{
    label: 'child3' }

    data: data

4. Default options.

// Define the contents of the tree. 
data: data,

// Animation speed
animationSpeed: "fast",

// Open nodes initially.
autoOpen: false,

// Save and restore the state of the tree automatically. 
saveState: false,

// Turn on dragging and dropping of nodes.
dragAndDrop: false,

// Turn on selection of nodes.
selectable: true,

// Bind the context menu event (true/false).
useContextMenu: true,

// callback functions.
onCanSelectNode: null,
onSetStateFromStorage: null,
onGetStateFromStorage: null,
onCreateLi: null,
onIsMoveHandle: null,
onCanMove: null,
onCanMoveTo: null,
onLoadFailed: null,
onDragMove: null,
onDragStop: null,
onLoading: null

// The position of the toggle button
buttonLeft: true,

// The tabindex of the tree. 
tabIndex: 0

// Determine if text is autoescaped. 
autoEscape: true,

// Load the node data from this url.
dataUrl: null,

// A character or symbol to display on closed nodes.
closedIcon: '&#x25ba;',

// A character or symbol to display on opened nodes. 
openedIcon: '&#x25bc;',

// Turn slide animation on or off. 
slide: true,

nodeClass: Node,

// Process the tree data from the server.
dataFilter: null,

// Enable or disable keyboard support. 
keyboardSupport: true,

// Set the delay for opening a folder during drag-and-drop. 
openFolderDelay: 500,

// rtl or ltr
rtl: null

More Examples:


1.4.10 (2018-04-06)

1.4.8 (2018-07-24)

  • update to the latest version.

1.4.7 (2018-06-16)

  • update to the latest version.

1.4.6 (2018-05-08)

  • update to the latest version.

1.4.5 (2018-03-15)

  • update to the latest version.

1.4.4 (2017-12-21)

  • update to the latest version.

0.18.0 (2013-09-17)

  • Added 'custom html' example
  • _getDataUrlInfo: add selected_node parameter

0.17.0 (2013-07-14)

  • Fixed don't return from the click event prematurely when Ctrl is pressed

0.16.0 (2013-05-18)

  • Fixed _selectCurrentNode method by removing @tree_widget

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