jQuery Plugin for Tree Widget – jqTree

jqTree is a jQuery based mostly Tree Widget that lets you create folder tree from JSON information with some fancy animations.

Licensed underneath the Apache License 2.0.

Options:

• Load JSON information from native
• Load JSON information from server
• Drag and drop supported
• Keyboard interactions
• Single & A number of Choice
• Auto scroll and auto escape supported
• Save state supported
• Lazy load for higher efficiency

You may also like:

Methods to use it:

1. Embody jQuery library and the jqTree.js plugin’s information within the HTML web page.

<hyperlink 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 carry the tree view.

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

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

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

4. Visualize the info in a tree.

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

5. All default choices to config the tree.

// Outline the contents of the tree. 
information: information,

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

// Animation velocity
animationSpeed: "quick",

// Open nodes initially.
autoOpen: false,

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

// Activate dragging and dropping of nodes.
dragAndDrop: false,

// Activate number of nodes.
selectable: true,

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

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

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

// Reveals empty folders
showEmptyFolder: false,

// The tabindex of the tree. 
tabIndex: 0

// Decide if textual content is autoescaped. 
autoEscape: true,

// A personality or image to show on closed nodes.
closedIcon: '►',

// A personality or image to show on opened nodes. 
openedIcon: '▼',

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

// Node class
nodeClass: Node,

// Course of the tree information from the server.
dataFilter: null,

// Allow or disable keyboard help. 
keyboardSupport: true,

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

// rtl or ltr
rtl: null,

// units the delay earlier than drag-and-drop is starte
startDndDelay: 300,

6. API strategies.

// Add a brand new node as mum or dad
var newNode = $('#myTree').tree('getNodeByName', 'newNode');
$('#myTree').tree(
  'addParentNode',
  {
    identify: 'new_parent',
    id: 987
    },
  newNode
);

// Add a brand new node after an present node
var nodeExample = $('#myTree').tree('getNodeByName', 'nodeExample');
$('#myTree').tree(
  'addNodeAfter',
  {
    identify: 'new_node',
    id: 456
  },
  nodeExample
);

// Add a brand new node earlier than an present node
var nodeExample = $('#myTree').tree('getNodeByName', 'nodeExample');
$('#myTree').tree(
  'addNodeBefore',
  {
    identify: 'new_node',
    id: 456
  },
  nodeExample
);

// Add a node to mum or dad node.
var nodeExample = $('#myTree').tree('getNodeByName', 'nodeExample');
$('#myTree').tree(
  'appendNode',
  {
    identify: 'new_node',
    id: 456,
    youngsters: [
      { name: 'child1', id: 457 },
      { name: 'child2', id: 458 }
    ]
  },
  nodeExample
);

// Add a root node
$('#myTree').tree(
  'appendNode',
  {
    identify: 'new_node',
    id: 456
  }
);

// Prepend a node
$('#myTree').tree(
  'prependNode',
  {
    identify: 'new_node',
    id: 456,
    youngsters: [
      { name: 'child1', id: 457 },
      { name: 'child2', id: 458 }
    ]
  },
  nodeExample
);

// Collapse a node with or with out animation
$('#myTree').tree('closeNode', node, true/false);

// Destroy the occasion
$('#myTree').tree('destroy');

// Get node data
$('#myTree').tree('getNodeByCallback',
  operate(node) {
    if (node.identify == 'abc') {
      // Node is discovered; return true
      return true;
    }
    else {
      // Node not discovered; proceed looking out
      return false;
    }
});
$('#myTree').tree('getNodeById', id);
$('#myTree').tree('getNodeByHtmlElement', component);
$('#myTree').tree('getSelectedNode');
$('#myTree').tree('getState');
$('#myTree').tree('getTree');

// Detect if is dragging
$('#myTree').tree('isDragging');

// Load new information
$('#myTree').tree('loadData', new_data);

// Load a sub tree
$('#myTree').tree('loadData', information, node);

// Load information from an URL
$('#myTree').tree('loadDataFromUrl', '/class/tree/');
$('#myTree').tree('loadDataFromUrl', '/class/tree/', node);
$('#myTree').tree('loadDataFromUrl', '/class/tree/', null, operate(){
  // ...
});

// Choose the subsequent/prev node
$('#myTree').tree('moveDown');
$('#myTree').tree('moveUp');

// Transfer a node
$('#myTree').tree('moveNode', node, target_node, 'after');

// Open a node
$('#myTree').tree('openNode', node);
$('#myTree').tree('openNode', node, slide(TRUE/FALSE));
$('#myTree').tree('openNode', node, slide(TRUE/FALSE));
$('#myTree').tree('openNode', node, slide(TRUE/FALSE), operate(node){
  // fired when completed
});

// Reload information
$('#myTree').tree('reload');
$('#myTree').tree('reload', operate(){
  // fired when loaded
});

// Take away a node
$('#myTree').tree('removeNode', node);

// Choose a node
$('#myTree').tree('selectNode', node);
$('#myTree').tree('selectNode', node, null); // deselect
$('#myTree').tree('selectNode', node, { mustToggle, mustSetFocus });

// Scroll to a node
$('#myTree').tree('scrollToNode', node);

// Set choices
$('#myTree').tree('setOption', 'keyboardSupport', false);

// Set state
$('#myTree').tree('setState', state);

// Develop/collapse a node
$('#myTree').tree('toggle', node);
$('#myTree').tree('toggle', node, slide(TRUE/FALSE));

// Convert information to JSON
$('#myTree').tree('toJson');

// refresh
$('#myTree').tree('refresh');

// Update information
$('#myTree').tree(
  'updateNode',
  node,
  {
    identify: 'new identify',
    id: 1,
    youngsters: [
      { name: 'child1', id: 2 }
    ]
  }
);

7. Node features.

// Add a node to the choice.
var node = $('#myTree').tree('getNodeById', 123);
$('#myTree').tree('addToSelection', node);

// Return an inventory of chosen nodes.
var nodes = $('#myTree').tree('getSelectedNodes');

// Return if this node is chosen.
var node = $('#tree1').tree('getNodeById', 123);
var isSelected = $('#tree1').tree('isNodeSelected', node);

// Take away a node from the choice.
var node = $('#tree1').tree('getNodeById', 123);
$('#tree1').tree('removeFromSelection', node);

// Get the subtree of a node.
var node = $('#tree1').tree('getNodeById', 123);
var information = node.getData();

// Get the extent of a node.
var node = $('#tree1').tree('getNodeById', 123);
var degree = node.getLevel();

// Get the subsequent node within the tree.
var node = node.getNextNode();

// Get the subsequent sibling of a node. 
var node = node.getNextSibling();

// Return the earlier node within the tree.
var node = node.getPreviousNode();

// Get the earlier sibling of this node. 
var node = node.getPreviousSibling();

// Get the earlier seen node within the tree. 
var node = node.getPreviousVisibleNode();

// Entry the mum or dad of a node.
var parentNode = node.mum or dad;

// Entry the youngsters of a node.
for (var i=0; i < node.youngsters.size; i++) {
  var youngster = node.youngsters[i];
}

8. Occasion handlers.

$('#myTree').on('tree.click on', operate(occasion) {
  // click on a node
  var node = occasion.node;
  alert(node.identify);
});

$('#myTree').on('tree.dblclick', operate(occasion) {
  // double-click a node
  var node = occasion.node;
  alert(node.identify);
});

$('#myTree').on('tree.shut', operate(e) {
  // shut a node
  console.log(e.node);
});

$('#myTree').on('tree.contextmenu', operate(occasion) {
  // right-click a node
  var node = occasion.node;
  alert(node.identify);
});

$('#myTree').on('tree.init', operate() {
  // on init
});

$('#myTree').on('tree.load_data', operate(e) {
  // load information
  console.log(e.tree_data);
});

$('#myTree').on('tree.loading_data', operate(e) {
  // loading information
  console.log(e.isLoading, e.node, e.$el);
});

$('#myTree').on('tree.transfer', operate(occasion) {
  // transfer a node
  console.log('moved_node', occasion.move_info.moved_node);
  console.log('target_node', occasion.move_info.target_node);
  console.log('place', occasion.move_info.place);
  console.log('previous_parent', occasion.move_info.previous_parent);
});

$('#myTree').on('tree.refresh', operate(e) {
  // on refresh
});

$('#myTree').on('tree.choose', operate(occasion) {
  if (occasion.node) {
    // node was chosen
    var node = occasion.node;
    alert(node.identify);
  }
  else {
    // occasion.node is null
    // a node was deselected
    // e.previous_node incorporates the deselected node
  }
});

Extra Examples:

Changelog:

1.8.5 (2024-10-06)

1.8.5 (2024-09-28)

1.8.4 (2024-07-20)

• replace braces package deal to repair safety difficulty

1.8.3 (2024-05-07)

1.8.2 (2024-03-25)

1.8.1 (2024-03-17)

1.8.0 (2023-12-27)

• Open mother and father in addToSelection
• This launch drops help for very outdated browsers (like IE 11).
• Use a mouse handler

1.7.5 (2023-10-22)

1.7.4 (2023-09-25)

1.7.3 (2023-09-17)

1.7.2 (2023-09-15)

• enhance kinds of closedIcon and openedIcon

1.7.1 (2023-08-07)

1.7.0 (2022-12-24)

• dispatch the tree.load_data after initializing the tree
• Rename getPreviousNode to getPreviousVisibleNode and getNextNode to getNextVisibleNode.
• Add new getPreviousNode and getNextNode features that ignores if a node is seen.

1.6.3 (2022-08-08)

1.6.2 (2021-12-16)

1.6.1 (2021-12-14)

• Add refresh technique
• Replace package deal

1.6.0 (2021-02-09)

• Enhance efficiency of inside node lookup
• Modified: getNodeById doesn’t convert strings to numbers anymore
• Repair drag-and-drop on ie11

1.5.3 (2021-01-13)

1.5.2 (2020-10-25)

1.5.1 (2020-09-24)

1.5.0 (2020-09-07)

• Repair definition of onLoading

1.4.12 (2020-06-26)

• Enhance efficiency of title rendering

1.4.12 (2019-11-11)

1.4.11 (2018-04-06)

1.4.11 (2018-04-06)

1.4.10 (2018-04-06)

1.4.8 (2018-07-24)

• replace to the newest model.

1.4.7 (2018-06-16)

• replace to the newest model.

1.4.6 (2018-05-08)

• replace to the newest model.

1.4.5 (2018-03-15)

• replace to the newest model.

1.4.4 (2017-12-21)

• replace to the newest model.

0.18.0 (2013-09-17)

• Added ‘customized html’ instance
• _getDataUrlInfo: add selected_node parameter

0.17.0 (2013-07-14)

• Mounted do not return from the clicking occasion prematurely when Ctrl is pressed

0.16.0 (2013-05-18)

• Mounted _selectCurrentNode technique by eradicating @tree_widget

This superior jQuery plugin is developed by mbraak. For extra Superior Usages, please examine the demo web page or go to the official web site.