Press "Enter" to skip to content

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.

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: '&#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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

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