Customizable jQuery Tree Widget Plugin | jqTree

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


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

  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: '&#x25ba;', // A character or symbol to display on opened nodes. openedIcon: '&#x25bc;', // 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.

Related Posts


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…

Leave a Reply

Your email address will not be published. Required fields are marked *