Full Featued File/Folder Tree In Pure JavaScript – TreeJS

Category: Javascript | July 9, 2018
Author: m-thalmann
Views Total: 2,011
Official Page: Go to website
Last Update: July 9, 2018
License: MIT

Preview:

Full Featued File/Folder Tree In Pure JavaScript – TreeJS

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){
  // ...
});

You Might Be Interested In:


Leave a Reply