New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Download folder tree
Download files
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()
No one has commented this - be first!
Post your comment
Comment preview: