Download folder tree

Demo

Bookmark and Share

Download files

Download

Licensing

This script is licensed under LGPL. Commercial licenses are also available

PHP

This script requires that you have PHP support. I'm planning to implement support for other server side languages later on. If you like the script and wants to convert the code to JSP, ASP or similar, please do so. If you send me the new script(post@dhtmlgoodies.com), I will post the script on this website

Setup information

The tree is a PHP class. The first you have to do is to include the class file:
include("dhtmlgoodies_tree.class.php");
Then you create a object of the class like this:
$tree = new dhtmlgoodies_tree();

The next step is to add nodes to the tree. There are two methods to choose from in order to do this. The new method(added 2011) addToArrayAss accepts an array as only argument.

Example:
$tree->addToArrayAss(array(
  'id' => 1,
  'title' => "America",
  'parentId' => 0,
  'url' => "http://www.dhtmlgoodies.com",
  'target' => "_blank",
  'icon' => "images/dhtmlgoodies_sheet.gif",
  'onclick' => "alert('hello')"
  )
);

parentId, url, target, icon and onclick are optional parameters.

You can also add nodes with the addToArray() method. This method takes up to 7 arguments(ID, title, parent ID, url, target and icon). The last arguments(icon) and onclick are optional.

Example:
$tree->addToArray(1,"America",0,"");
$tree->addToArray(2,"USA",1,"");
$tree->addToArray(3,"Alabama",2,"http://www.domain.com","frmMain");
$tree->addToArray(4,"Alaska",2,"","frmMain");
$tree->addToArray(5,"Arizona",2,"","frmMain");
$tree->addToArray(6,"Arkansas",2,"","frmMain");
$tree->addToArray(7,"California",2,"","frmMain");
$tree->addToArray(8,"Colorado",2,"","frmMain",
  "images/dhtmlgoodies_sheet.gif","alert('id is 8')");

The 'ID' identifies the node in the tree, thus it have to be unique. Title is the title of the node in the tree while parent ID is used for child nodes to identify it's parent. Url and target are optional arguments. The target is typically used if you're dealing with a frameset and wants the url to be opened in another frame than where the tree is.

You can see in the example code above, that "USA" have ID=2 and parentID=1. "1" is a the unique identification of USA in the tree and the parentID refers to the parent node which is "America".

Root nodes doesn't have any parent ID(example: America)

Usually, you don't add these nodes manually as I have done here. The best approach is to get them from a database. Example:
$res = mysql_query("select ID,title,parentID,url from table_category") or die(mysql_error());
while($inf = mysql_fetch_array($res)){
  $tree->addToArrayAss(array(
    'id' => $inf["ID"],
    'title' = >$inf["title"],
    'parentId' => $inf["parentID"],
    'url' => $inf["url"],
    'target' => "_blank")
  );
}

When all the nodes has been added, you have to call the functions which outputs Javascript, CSS and the HTML to the browser:
$tree->writeCSS();
$tree->writeJavascript();
$tree->drawTree();

For more info see the example file(dhtmlgoodies_tree.html) in the downloadable zip file and open the file dhtmlgoodies_tree_index.html to see how it works in your browser.

Expand all/Collapse all

You have two javascript functions which you could use to expand or collapse all nodes. The name of these functions are:

  • expandAll()
  • collapseAll()

Comments

No one has commented this - be first!

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com