TreeJS

TreeJS is a simple JavaScript library, to display a TreeView like in the windows filebrowser. It implements partially the Java Swing TreeModel etc.

Demo:https://m-thalmann.github.io/treejs/demo/

Navigation

• Installation
• Usage
• Documentation
  • TreeView
  • TreeNode
  • TreePath
  • TreeUtil
  • TreeConfig
  • Events
  • Options
• Example

Installation

1. Download the .zip-File of the release and extract it into your project-folder.

2. Add this script-tag to the head of the file

<scriptsrc="path/to/js/file.js"></script>

3. Add this link-tag to the head of the file, to include the styles

<linkrel="stylesheet" href="path/to/css/file.css" />

4. Start using the library!

Usage

Create new TreeView

varroot=newTreeNode('root');// Create the root-nodevartree=newTreeView(root);// Create the tree

Set a container to display the tree

tree.setContainer('#container');// Uses document.querySelector

or

tree.setContainer(document.getElementById('container'));

(Re-)load the tree

tree.reload();// Always use this, when you change the TreeView or any of its nodes

Documentation

TreeView

It's the main object to display the Tree.

Instantiating

newTreeView(root,container,options);

• root (TreeNode): The root-node of the tree.
• container (DOM-Element/querySelector): The container for the tree to display (optional)
• options (object): A object with options for the tree (see below) (optional)

After the instantiation, the TreeView is reloaded/rendered

Methods

tree.setRoot(root);// Resets the root-node (TreeNode)tree.getRoot();// Returns the root-nodetree.expandAllNodes();// Expands all nodes of the treetree.expandPath(path);// Expands all nodes that are in the path (TreePath)tree.collapseAllNodes();// Collapses all nodes of the treetree.setContainer(container);// Resets the container (DOM-Element/querySelector)tree.getContainer();// Returns the containertree.setOptions(options);// Resets the options (object)tree.changeOption(option,value);// Changes one option (string, object)tree.getOptions();// Returns the optionstree.getSelectedNodesForNode(n);// Returns all selected nodes inside of this node (and itself, if its selected) (TreeNode)tree.getSelectedNodes();// Returns all selected nodes in the treetree.reload();// Reloads/Renders the tree inside of the container

TreeNode

It represents a node inside of a tree. You can append children to it and specify a userobject, which is used to display text on a node. This object can be a string but can also be a other object, where the toString() function is used to display the text.

Instantiating

newTreeNode(userobject,options);

• userobject (object): This object is used to display text on the node (if not string, toString() is used) (optional)
• options (object): A object with options for the node (see below) (optional)

Methods

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

TreePath

It represents a path inside of a tree (containing all nodes that form the path).

Instantiating

newTreePath(root,node);

• root & node (TreeNode): if they are both set, the method setPath(root, node) is executed (optional)

Methods

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

TreeUtil

A collection of default values and methods. Can't be instantiated.

Variables

TreeUtil.default_leaf_icon;// String, that represents the default icon for a leaf-nodeTreeUtil.default_parent_icon;// String, that represents the default icon for a normal node (with children)TreeUtil.default_open_icon;// String, that represents the default expanded-iconTreeUtil.default_close_icon;// String, that represents the default collapsed-icon

Methods

TreeUtil.isDOM(object);// Returns true, if the object is a DOM-Element, else false (object)TreeUtil.getProperty(opt,o,def);// Returns the value of 'o' in the array/object opt, if it is set;// else it returns def (object, string, object)TreeUtil.expandNode(node);// Expands the node and all it's children and theirs etc. (TreeNode)TreeUtil.collapseNode(node);// Collapses the node and all it's children and theirs etc. (TreeNode)

TreeConfig

A collection of values, that you can change (directly inside of the file or with JavaScript for only one site).

Variables

TreeConfig.leaf_icon;// The icon for a leaf-node (default: TreeUtil.default_leaf_icon)TreeConfig.parent_icon;// The icon for a normal node (default: TreeUtil.default_parent_icon)TreeConfig.open_icon;// The expanded-icon (default: TreeUtil.default_open_icon)TreeConfig.close_icon;// The collapsed-icon (default: TreeUtil.default_close_icon)TreeConfig.context_menu;// A function that is executed when a contextmenu is opened (default: undefined)

Events

It is possible to attach a event to a TreeNode: node.on(event, callback);

Event	Callback-Parameter(s)	Definition	Restriction
click	e[click_event], node[TreeNode]	Is triggered when the node is clicked	-
expand	node[TreeNode]	Is triggered when the node is expanded	Not-leaf only
collapse	node[TreeNode]	Is triggered when the node is collapsed	Not-leaf only
toggle_expanded	node[TreeNode]	Is triggered when the node is either expanded or collapsed	Not-leaf only
open	node[TreeNode]	Is triggered when the open()-Function is executed or the leaf is clicked	Leaf only
enable	node[TreeNode]	Is triggered when the node is enabled	-
disable	node[TreeNode]	Is triggered when the node is disabled	-
toggle_enabled	node[TreeNode]	Is triggered when the node is either enabled or disabled	-
select	node[TreeNode]	Is triggered when the node is selected	-
deselect	node[TreeNode]	Is triggered when the node is deselected	-
toggle_selected	node[TreeNode]	Is triggered when the node is either selected or deselected	-
contextmenu	e[contextmenu_event], node[TreeNode]	Is triggered when a contextmenu is opened on a node	-

Options

for TreeView

Option	Values	Definition
leaf_icon	[string]	Sets the leaf-icon for this tree to the string (can be overwritten by node)
parent_icon	[string]	Sets the node-icon for this tree to the string (can be overwritten by node)
show_root	[boolean]	Sets whether the root node is shown or not

for TreeNode

Option	Values	Definition
expanded	[boolean]	On creation, the node will have the expanded value set to this
enabled	[boolean]	On creation, the node will have the enabled value set to this
selected	[boolean]	On creation, the node will have the selected value set to this
icon	[string]	Sets the icon for this node to the string
allowsChildren	[boolean]	Sets if there can be added new children to this node
forceParent	[boolean]	This node will be displayed as parent, even if it is empty

Example

Code:

constroot=newTreeNode('root');constn1=newTreeNode('1');constn11=newTreeNode('1.1');constn2=newTreeNode('2');constn3=newTreeNode('3');constn31=newTreeNode('3.1');constn32=newTreeNode('3.2');constn321=newTreeNode('3.2.1');constn33=newTreeNode('3.3');root.addChild(n1);root.addChild(n2);root.addChild(n3);n1.addChild(n11);n3.addChild(n31);n3.addChild(n32);n3.addChild(n33);n32.addChild(n321);n3.setEnabled(false);constview=newTreeView(root,'#container');

Output: