JS Render Tree: Create and modify a tree view of page elements

Recommend this page to a friend!
  Info   View files Example   View files View files (9)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 60 All time: 486 This week: 4Up
Version License JavaScript version Categories
js-render-tree 1.1BSD License1.5HTML
Description Author

This package can create and modify a tree view of page elements.

It can take a given set of elements and display them as a tree.

The package can manipulate the elements tree by adding, removing, renaming, saving and loading the tree elements.

Picture of Vallo Reima
  Performance   Level  
Name: Vallo Reima <contact>
Classes: 6 packages by
Country: Estonia Estonia
Age: ???
All time rank: 351 in Estonia Estonia
Week rank: 6 Up1 in Estonia Estonia Equal
Innovation award
Innovation award
Nominee: 4x

Winner: 1x


Render a tree of objects

The Tree and TreeServ JavaScript classes allow to create and change the tree structure front-end.

The usage

Call the script after the page load (see index.html):

>var tree = new Tree([opts]); >tree.Init([opts][,data]);

opts - the options object:

  • tro - tree object (object, default is id='tree')
  • cmo - command set (object, default is id='command')
  • cfm - confirm node deletion (bool, default is no confirming);
  • rcn - create the tree recursively (bool, default is iteratively);
  • pth - images path.

The default tree is created and first node is selected.

Command set

Click the node to select it. The selected node has gray background. Click selected node again to deselect. The commands to handle the tree:

  • Add - create a sub-node of selected node; if no nodes selected then the root node is created.
  • Edit - rename the node.
  • Delete - remove the node with it's sub-nodes.
  • Save - save current tree to reload later.
  • Restore - load the last saved tree.

The command buttons are available or disabled depending on the node selection.


Add and Edit commands switch you into the Change status. Type in the node name and press Enter to save. Or press Esc to cancel. Delete asks for confirmation if cfm option is true. Save command requires HTML5 localStorage support. The tree state is saved under localStorage.treeState. Restore loads the default tree if nothing is saved.


The index.html demo shell displays default tree with the command set. You can select another tree structure in the test.js. Assign the tree definition array to the treeData variable and include the script tag into index.html head.

The package

The following files are included:

  1. main.js - Tree class; controls the tree activity;
  2. serv.js - TreeServ class; serves the tree changes;
  3. base.js - common functionality;
  4. img/ - images folder;
  5. index.html - demo shell;
  6. style.css - layout and tree styles;
  7. test.js - tree structure test data
  8. readme.md - the file you are reading.
  Files folder image Files  
File Role Description
Files folder imageimg (2 files)
Accessible without login Plain text file base.js Aux. Auxiliary script
Accessible without login Plain text file index.html Example Example script
Plain text file main.js Class Class source
Accessible without login Plain text file README.md Doc. Documentation
Accessible without login Plain text file serv.js Example Example script
Accessible without login Plain text file style.css Data Auxiliary data
Accessible without login Plain text file test.js Aux. Auxiliary script

  Files folder image Files  /  img  
File Role Description
  Accessible without login Image file close.gif Icon Icon image
  Accessible without login Image file open.gif Icon Icon image

 Version Control Unique User Downloads Download Rankings  
This week:0
All time:486
This week:4Up