jQuery Plugin for Tree Widget - jqTree

jQuery Plugin for Tree Widget - jqTree
File Size: 1.34 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.

Features:

  • Load JSON data from local
  • Load JSON data from server
  • Drag and drop supported
  • Auto scroll and auto eascape 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' }
  ]
  }];

  $('#tree1').tree({
    data: data
  });
});

4. Default options.

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

// 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,
buttonLeft: true,
onLoading: null

// 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:

Change logs:

1.3.7 (2017-01-11)

  • update to the latest version.

1.3.6 (2016-11-05)

  • update to the latest version.

1.3.5 (2016-09-15)

  • update to the latest version.

1.3.4 (2016-07-18)

  • 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.