Full Featued File/Folder Tree In Pure JavaScript – TreeJS

Preview:

Description:

TreeJS is a simple, fast, standalone JavaScript library to dynamically render a folder tree that behaviors like the Windows’ File Browser.

It comes with several useful API methods to manage the file/folder tree easily and programmatically.

How to use it:

Load the TreeJS’ JavaScript and Stylesheet.

<script src="tree.js"></script>
<link rel="stylesheet" href="treejs.css">

Load the Font Awesome for the folder icons (OPTIONAl).

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

Create a container element to hold the folder tree.

<div id="container"></div>

Prepare your data for the folder tree.

var root = new TreeNode("root");
    n1 = new TreeNode("1");
    n11 = new TreeNode("1.1");
    n2 = new TreeNode("2");
    n3 = new TreeNode("3");
    n31 = new TreeNode("3.1");
    n32 = new TreeNode("3.2");
    n321 = new TreeNode("3.2.1");
    n33 = new TreeNode("3.3");
root.addChild(n1);
root.addChild(n2);
root.addChild(n3);
n1.addChild(n11);
n3.addChild(n31);
n3.addChild(n32);
n3.addChild(n33);
n3.setEnabled(false);
n32.addChild(n321);

Render the folder tree in the container you created.

var tree = new TreeView(root, "#container");

Customize the icons for the folder tree.

var tree = new TreeView(root, "#container",{
    leaf_icon: "<span>&#128441;</span>"
    parent_icon: "<span>&#128449;</span>",
    open_icon: "<span>&#9698;</span>",
    close_icon: "<span>&#9654;</span>"
});

Execute a function when a context menu is triggered.

var tree = new TreeView(root, "#container",{
    context_menu: undefined
});

API methods for the folder tree.

// Resets the root-node (TreeNode)
tree.setRoot(root);                  
// Returns the root-node
tree.getRoot();                      
 // Expands all nodes
tree.expandAllNodes();            
// Expands all nodes that are in the path (TreePath)  
tree.expandPath(path);               
// Collapses all nodes
tree.collapseAllNodes();             
// Resets the container
tree.setContainer(container);        
// Returns the container
tree.getContainer();                 
// Resets the options (object)
tree.setOptions(options);            
// Changes one option (string, object)
tree.changeOption(option, value);    
// Returns the options
tree.getOptions();                   
// Returns all selected nodes in the tree
tree.getSelectedNodes();             
// Reloads/Renders the tree inside of the container
tree.reload();

API methods for the nodes.

new TreeNode(userobject, options);
// Adds a child to the current node and sets the parent of the node (TreeNode)
node.addChild(node);                
// Removes the child at this position (integer) 
node.removeChildPos(pos);            
// Removes the child from the current node, if contained (TreeNode)
node.removeChild(node);              
// Returns a array with the children of the current node
node.getChildren();                  
// Returns the number of children
node.getChildCount();                
// Returns the position of the child; -1 is returned if not found (TreeNode)
node.getIndexOfChild(node);          
// Tries to get the root node of this node
node.getRoot();                      
// Resets the userobject (object)
node.setUserObject(userobject);      
// Returns the userobject
node.getUserObject();                
// Resets the options (object)
node.setOptions(options);            
// Changes one option (string, object)
node.changeOption(option, value);    
// Returns the options
node.getOptions();                   
// Returns true, if the node doesn't have any children, else false
node.isLeaf();                       
// Sets the expanded-state of the node (if it shows its children) (boolean)
node.setExpanded(true|false);        
// Toggles the expanded-state of the node
node.toggleExpanded();               
// Returns, if the node is expanded or not
node.isExpanded();                   
// Sets the enabled-state of the node (if it is enabled) (boolean)
node.setEnabled(true|false);         
// Toggles the enabled-state of the node
node.toggleEnabled();                
// Returns, if the node is enabled or not
node.isEnabled();                    
// Sets the selected-state of the node (if it is selected) (boolean)
node.setSelected(true|false);        
// Toggles the selected-state of the node
node.toggleSelected();               
// Returns, if the node is selected or not
node.isSelected();                   
// Triggers the "open"-event of the node
node.open();                         
// Sets the eventlistener of the event, if the callback is specified;
// if only the event is set, it returns the callback-function; if that is not
// set, it returns a empty function (string, function)
node.on(event, callback);            
// Returns the callback-function for this event, if set (string)
node.getListener(event);             
// Returns if the node is equal to the parameter (TreeNode)
node.equals(node);                   
// Returns the generated string from the userobject
node.toString();

API methods for the tree path.

new TreePath(root, node);
// Generates the path between root and node (TreeNode, TreeNode)
path.setPath(root, node);            
// Returns the generated path as a array
path.getPath();                      
// Returns the path as a string (nodes joined with a ' - ')
path.toString();

Possible events which can be attached to the tree node.

node.on('click', function(e, node){
  // ...
});
node.on('expand', function(node){
  // ...
});
node.on('collapse', function(node){
  // ...
});
node.on('toggle_expanded', function(node){
  // ...
});
node.on('open', function(node){
  // ...
});
node.on('enable', function(node){
  // ...
});
node.on('disable', function(node){
  // ...
});
node.on('toggle_enabled', function(node){
  // ...
});
node.on('select', function(node){
  // ...
});
node.on('deselect', function(node){
  // ...
});
node.on('toggle_selected', function(node){
  // ...
});
node.on('contextmenu', function(e, node){
  // ...
});

Changelog:

12/19/2020

• Added possibility to force a node to be a parent

12/09/2020

• Fixed: Invalid condition for non-string user objects