JqTree is a jQuery widget for displaying a tree structure in HTML. It supports JSON data, ajax upload, and drag-and-drop.

Features:

• Create a tree from JSON data
• Load data using ajax
• Drag and drop
• Saves the state
• Keyboard support
• Lazy loading
• Works on ie9+, firefox, chrome, and safari
• Written in Typescript

How to make use of it:

1. Include the jQuery library and the jqTree.js plugin’s files within the HTML web page.

<link rel="stylesheet" href="/path/to/jqtree.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/tree.jquery.js"></script>

2. Create a container to hold the tree view.

<div id="myTree"></div>

3. Prepare your information in JSON or in an array of objects as follows:

const data = [
      {
        label: "node 1",
        id: 1,
        children: [{ 
          label: "node 1-1", 
          id: 2 
        }, { 
          label: "node 1-2", 
          id: 3 
        }
        // ...
        ]
      },
      {
        label: "node2",
        id: 4,
        children: [{ 
          label: "node 2-1", 
          id: 5 
        }]
      }
      // ...
];

4. Visualize the info in a tree.

$("#myTree").tree({
  data: data
});

5. All default options to config the tree.

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

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

// 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).
useContext: 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,

// Shows empty folders
showEmptyFolder: false,

// The tabindex of the tree. 
tabIndex: 0

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

// A character or symbol to display on closed nodes.
closedIcon: '►',

// A character or symbol to display on opened nodes. 
openedIcon: '▼',

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

// Node class
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

jQuery Plugin for Tree Widget, jqTree Plugin/Github

See Demo And Download

Official Website(mbraak): Click Here

This superior jQuery/javascript plugin is developed by mbraak. For extra Advanced usage, please go to the official website.