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.