mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-10-08 02:53:13 +02:00
627 lines
25 KiB
HTML
627 lines
25 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||
|
||
<html>
|
||
<head>
|
||
<title>DHTML Tree guide and samples</title>
|
||
</head>
|
||
|
||
<body>
|
||
<style>
|
||
body {font-size:14px;line-height:18px;}
|
||
.{font-family:arial;}
|
||
h2 {cursor:pointer;font-size:20px;margin:30px 0px 40px 5px;line-height:10px}
|
||
h3 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
|
||
h4 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
|
||
a h4{
|
||
color:blue;
|
||
font-weight:bold;
|
||
}
|
||
.op {cursor:pointer;}
|
||
div.block {margin-left:5px;}
|
||
xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
|
||
li {margin-top:2px;}
|
||
</style>
|
||
<h2><a href="http://www.scbr.com/docs/products/dhtmlxTree/index.shtml" target="_top" title="Visit javascript tree home page">dhtmlXTree</a> Guide and Samples</h2>
|
||
<div class="block">
|
||
<!--- --->
|
||
<a name="mf"><h3 >Main features</h3
|
||
></a><div style="display:show" class="block">
|
||
<li>Multibrowser/Multiplatform support </li>
|
||
<li>Full controll with JavaScript</li>
|
||
<li>Dynamic loading</li>
|
||
<li>XML support</li>
|
||
<li>Dynamic rendering (Smart XML parsing) for big trees</li>
|
||
<li>drag-&-drop (within one tree, between trees, between frames) </li>
|
||
<li>checkboxes (two/three states)</li>
|
||
<li>customizable icons (with javascript or xml) </li>
|
||
<li>context menu (integration with dhtmlxMenu)</li>
|
||
<li>user data for nodes</li>
|
||
<li>multi-line tree items</li>
|
||
<li>high stability</li>
|
||
<li>Macromedia Cold Fusion support</li>
|
||
<li>JSP support</li>
|
||
<li>ASP.NET support</li>
|
||
</div>
|
||
|
||
<a name="browsers"><h3 >Supported browsers</h3
|
||
></a><div style="display:show" class="block">
|
||
<li>IE 5.x and above</li>
|
||
<li>Mac OS X Safari</li>
|
||
<li>Mozilla 1.4 and above</li>
|
||
<li>FireFox 0.9 and above</li>
|
||
<li>Opera (Xml loading depends on browser version)</li>
|
||
</div>
|
||
|
||
<h3 >Working with dhtmlXTree</h3
|
||
><div style="display:show" class="block">
|
||
<!--- Initialize object on page --->
|
||
<a name="init"><h4 >Initialize object on page</h4
|
||
></a><div class="block">
|
||
<XMP>
|
||
<div id="treeBox" style="width:200;height:200"></div>
|
||
<script>
|
||
tree=new dhtmlXTreeObject(document.getElementById('treeBox'),"100%","100%",0);
|
||
tree.setImagePath("gfx/");
|
||
tree.enableCheckBoxes(false);
|
||
tree.enableDragAndDrop(true);
|
||
</script>
|
||
</XMP>
|
||
Parameters passed to the constructor are:
|
||
<li>object to attach tree to (should be loaded before calling constructor)</li>
|
||
<li>width of the tree</li>
|
||
<li>height of the tree</li>
|
||
<li>identifier of level parent to tree root level (superroot)</li><br>
|
||
Specify Additional parameters of the tree:
|
||
<li>setImagePath(url) - method specifies the path to the folder with tree icons</li>
|
||
<li>enableCheckBoxes(mode) - enable/disable checkboxes in tree (checkboxes appear by default)</li>
|
||
<li>enableDragAndDrop(mode) - enable/disable drag-n-drop in tree</li>
|
||
</div>
|
||
<!--- Set Additional init parameters --->
|
||
<a name="handlers"><h4 >Set Event Handlers</h4
|
||
></a><div class="block">
|
||
<XMP>
|
||
<div id="treeBox" style="width:200;height:200"></div>
|
||
<script>
|
||
tree=new dhtmlXTreeObject(document.getElementById('treeBox'),"100%","100%",0);
|
||
...
|
||
tree.setOnClickHandler(onNodeSelect);//set function object to call on node select
|
||
//see other available event handlers in API documentation
|
||
function onNodeSelect(nodeId){
|
||
...
|
||
}
|
||
</script>
|
||
</XMP>
|
||
In most cases functions specified inside event handlers get some values with the arguments. For details about passed arguments please refer to <a href="alpha.html">API documentation</a>.<br>
|
||
</div>
|
||
<!--- Adding nodes with Script --->
|
||
<a name="scriptadd"><h4 >Adding nodes with Script</h4
|
||
></a><div class="block">
|
||
<XMP>
|
||
<script>
|
||
tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
|
||
...
|
||
tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED");
|
||
tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED");
|
||
</script>
|
||
</XMP>
|
||
<li>0s passed to the function for arguments 4-7 (function to call on select, images) mean use default values for them</li>
|
||
<li>Last argument is a comma delimited string of following possible value (upper case only):</li>
|
||
<li type="circle">SELECT - move selection to this node after inserting</li>
|
||
<li type="circle">CALL - call function on select</li>
|
||
<li type="circle">TOP - add node to the top position </li>
|
||
<li type="circle">CHILD - node has children</li>
|
||
<li type="circle">CHECKED - checkbox is checked (if exists)</li>
|
||
</div>
|
||
<!--- Using XML --->
|
||
<a name="xmlload"><h4 >Loading data with XML</h4
|
||
></a><div class="block">
|
||
<XMP>
|
||
<script>
|
||
tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
|
||
tree.setXMLAutoLoading("http://127.0.0.1/xml/tree.xml");
|
||
tree.loadXML("http://127.0.0.1/xml/tree.xml");//load root level from xml
|
||
</script>
|
||
</XMP>
|
||
<li>ID of opened node (as id url parameter) will be added to URL specified in initXMLAutoLoading(url) during the call</li>
|
||
<li>No additional ID is added to the url specified in loadXML(url) method during the call</li>
|
||
<li>Using loadXML() without parameters you load url specified in initXMLAutoLoading(url) method</li>
|
||
<XMP>
|
||
XML Syntax:
|
||
<?xml version='1.0' encoding='iso-8859-1'?>
|
||
<tree id="0">
|
||
<item text="My Computer" id="1" child="1" im0="my_cmp.gif" im1="my_cmp.gif" im2="my_cmp.gif" call="true" select="yes">
|
||
<userdata name="system">true</userdata>
|
||
<item text="Floppy (A:)" id="11" child="0" im0="flop.gif" im1="flop.gif" im2="flop.gif"/>
|
||
<item text="Local Disk (C:)" id="12" child="0" im0="drv.gif" im1="drv.gif" im2="drv.gif"/>
|
||
</item>
|
||
<item text="Recycle Bin" id="4" child="0" im0="recyc.gif" im1="recyc.gif" im2="recyc.gif"/>
|
||
</tree>
|
||
</XMP>
|
||
<br>
|
||
In <strong>PHP</strong> script use the following code for page header:<br>
|
||
<xmp>
|
||
<?php
|
||
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
|
||
header("Content-type: application/xhtml+xml"); } else {
|
||
header("Content-type: text/xml");
|
||
}
|
||
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
|
||
?>
|
||
</xmp>
|
||
<br>
|
||
<strong><tree></strong> node is mandatory. It specifies the parent of loading block of data. According to this its id parameter specifies the ID oth that parent.
|
||
To load root level you need to specify the ID you used when created tree object: new myObjTree(boxObject,width,height,<b>0</b>) <br>
|
||
|
||
<strong><item></strong> can contain subitems (in order to load more than one level at once) or not.<br>
|
||
Mandatory parameters for this tag are:<br>
|
||
<li>text - label of the node</li>
|
||
<li>id - id of the node</li>
|
||
Optional parameters for this tag are:<br>
|
||
<li>tooltip - tooltip for the node</li>
|
||
<li>im0 - image for node without children (tree will get images from the path specified in setImagePath(url) method)</li>
|
||
<li>im1 - image for opened node with children</li>
|
||
<li>im2 - image for closed node with children</li>
|
||
<li>acolor - colour of not selected item</li>
|
||
<li>scolor - colour of selected item</li>
|
||
<!--- <li>top - </li> --->
|
||
<li>select - select node on load (any value)</li>
|
||
<li>open - show node opened (any value)</li>
|
||
<li>call - call function on select(any value)</li>
|
||
<li>checked - check checkbox if exists(any value)</li>
|
||
<li>child - spec. if node has children (1) or not (0)</li><br>
|
||
<li>imheight - height of the icon</li>
|
||
<li>imwidth - width of the icon</li>
|
||
<br><br>
|
||
To set <strong>userdata</strong> directly within XML use <strong><userdata></strong><br>
|
||
It has just one parameter: <br>
|
||
<li>name</li><br>
|
||
and value to specify userdata value
|
||
</div>
|
||
<!--- Setting custom icons to nodes --->
|
||
<a name="iconscust"><h4 >Setting custom icons to nodes</h4
|
||
></a><div class="block">
|
||
There are two ways to set custom icons for the node. And it depends on the way you add items.<br>
|
||
<em>Important:</em> tree will get images for the nodes from the path specified in setImagePath(url) method.<br><br>
|
||
|
||
Javascript way. Using arguments of insertNewChild(...) or insertNewNext(...) methods:
|
||
<XMP>
|
||
<script>
|
||
var im0 = "doc.gif";//icon to show if node contains no children
|
||
var im1 = "opened.gif";//if node contains children and opened
|
||
var im2 = "closed.gif";//if node contains children and closed
|
||
tree.insertNewItem(0,1,"New Node 1",0,im0,im1,im2);
|
||
tree.insertNewNext(1,2,"New Node 2",0,"txt.gif","opened.gif","closed.gif");
|
||
</script>
|
||
</XMP>
|
||
XML way. Using parameters of <item> tag:
|
||
<XMP>
|
||
<?xml version='1.0' encoding='iso-8859-1'?>
|
||
<tree id="0">
|
||
<item text="My Computer" id="1" child="1" im0="doc.gif" im1="my_opened.gif" im2="my_closed.gif">
|
||
</tree>
|
||
</XMP>
|
||
<li>im0 - image for node without children (tree will get images from the path specified in setImagePath(url) method)</li>
|
||
<li>im1 - image for opened node with children</li>
|
||
<li>im2 - image for closed node with children</li>
|
||
</div>
|
||
<!--- Dynamical loading --->
|
||
<a name="dyntree"><h4 >Building dynamic tree</h4
|
||
></a><div class="block">
|
||
If your tree should contain large amount of nodes (or you simply do not want to waist time loading hidden nodes), it would be better to load them on demand, not at once.
|
||
For this purpose we made the tree to load levels dynamically using XML. <br>
|
||
See chapter <a href="#xmlload">"Loading data with XML"</a><br>
|
||
or for more details <a href="kb/dyn_loading.html">"Dynamical Loading in dhtmlxTree v.1.x"</a> article from our Knowledge Base.
|
||
</div>
|
||
|
||
|
||
|
||
<a name="nodesman"><h4 >Manipulating nodes</h4
|
||
></a><div class="block">
|
||
A few examples of manipulating node with tree object methods:
|
||
<XMP>
|
||
<script>
|
||
tree=new dhtmlXTreeObject('treeboxbox_tree',"100%","100%",0);
|
||
...
|
||
var sID = tree.getSelectedItemId();//get id of selected node
|
||
tree.setLabel(sID,"New Label");//change label of selecte node
|
||
tree.setItemColor(sID,'blue','red');//set colors for selected node's label (for not selected state and for selected state)
|
||
tree.openItem(sID);//expand selected node
|
||
tree.closeItem(sID);//close selected node
|
||
tree.changeItemId(sID,100);//change id of selected node to 100
|
||
alert("This node has children: "+tree.hasChildren(100));//show alert with information if this node has children
|
||
</script>
|
||
</XMP>
|
||
</div>
|
||
|
||
<a name="serialize"><h4 >Serializing Tree</h4></a><div class="block">
|
||
Serialization methods allows getting tree in xml representation (xml string). Various levels of serializations define the number of tree parameters reflected in resulting XML:<br>
|
||
|
||
<XMP>
|
||
<script>
|
||
tree.setSerializationLevel(userDataFl,itemDetailsFl);
|
||
var myXmlStr = tree.serializeTree();
|
||
|
||
</script>
|
||
</XMP>
|
||
<li>no parameters - id,open,select,text,child</li>
|
||
<li>userDataFl true - userdata</li>
|
||
<li>itemDetailsFl true - im0,im1,im2,acolor,scolor,checked,open</li>
|
||
</div>
|
||
|
||
|
||
<a name="tooltip"><h4 >Tooltips</h4></a><div class="block">
|
||
There are three ways to set tooltip for the node:<br>
|
||
<li>Use node label ("text" attribute of item node) as tooltip - enableAutoTooltips(mode) - <em>false</em> by default</li>
|
||
<li>Use "tooltip" attribute of item node for tooltip (it is used by default if this attribute was specified)</li>
|
||
<li>setItemText(itemId,newLabel,<strong>newTooltip</strong>)</li>
|
||
</div>
|
||
|
||
<a name="move"><h4 >Moving Nodes</h4></a><div class="block">
|
||
To move Item programaticaly developer can use the following ways: <br>
|
||
<br>
|
||
<strong>To move upp/down/left:</strong>
|
||
<XMP>
|
||
tree.moveItem(nodeId,mode)
|
||
</XMP>
|
||
<i>mode</i> possible values are:<br>
|
||
<li>"down" - move node down in list of nodes (do not pay attention on hierarchy)</li>
|
||
<li>"up" - move node up in list of nodes</li>
|
||
<li>"left" - move node up in hierarchy</li>
|
||
<br><br>
|
||
|
||
<strong>To move directly into position (within tree)</strong>
|
||
<XMP>
|
||
tree.moveItem(nodeId,mode,targetId)
|
||
</XMP>
|
||
<i>mode</i> possible values are:<br>
|
||
<li>"item_child" - place node as child of node specified in third argument</li>
|
||
<li>"item_sibling" - place node as sibling of node specified in third argument</li><br>
|
||
<i>targetId</i> - id of target node.
|
||
<br><br>
|
||
|
||
<strong>To move node into position (to another tree)</strong>
|
||
<XMP>
|
||
tree.moveItem(nodeId,mode,targetId,targetTree)
|
||
</XMP>
|
||
<i>mode</i> possible values as above.<br>
|
||
<i>targetId</i> - id of target node (in target tree).<br>
|
||
<i>targetTree</i> - target tree object<br><br>
|
||
|
||
<strong>Cut/Paste way</strong><br>
|
||
Another way is to use doCut(),doPaste(id) - but this works with selected item only. Developer can also delete node in one place and create it in other (also the way ;-)).<br>
|
||
To give users the possibility to move items use drag-n-drop functionlity.
|
||
</div>
|
||
|
||
<a name="counter"><h4 >Items Counter</h4></a><div class="block">
|
||
There is a possibility to display item children elements counter with the label of the node. To activate this feature use the following:
|
||
<XMP>
|
||
<script>
|
||
tree.setChildCalcMode(mode);
|
||
</script>
|
||
</XMP>
|
||
Possible modes are:<br>
|
||
<li>"child" - all childs on this level</li>
|
||
<li>"leafs" - all childs without subchilds on this level</li>
|
||
<li>"childrec" - all childs</li>
|
||
<li>"leafsrec" all childs without subchilds</li>
|
||
<li>"disabled" - nothing</li>
|
||
<br>
|
||
Other related methods:<br>
|
||
<strong>_getChildCounterValue(itemId)</strong> - get current counter value<br>
|
||
<strong>setChildCalcHTML(before,after)</strong> - html around counter to change default [x]<br>
|
||
Use <em>child</em> attribute in xml if you need to set counter value when using dynamical loading.
|
||
|
||
</div>
|
||
|
||
<a name="smartxml"><h4 >Smart XML Parsing</h4></a><div class="block">
|
||
The idea of Smart XML Parsing is simple - the entire tree structute loaded on client side, but only nodes which should be displayed are rendered. This helps to dramaticaly decrease loading time and general performance of large trees. Plus - in the contrary to Dynamical Loading - entrire tree structure is available for most of script methods (for example Search performed agains all nodes - not only rendered). To activate Smart XML Parsing use the following method:
|
||
<XMP>
|
||
<script>
|
||
tree.enableSmartXMLParsing(true);//false to disable
|
||
</script>
|
||
</XMP>
|
||
Smart XML Parsing do not work if tree loaded fully expanded.
|
||
</div>
|
||
|
||
<a name="checkbox"><h4 >Checkboxes in tree</h4></a><div class="block">
|
||
dhtmlxTree support two or three state checkboxes. Three state checkboxes means: checked/unchecked/some-child-checked (not all).
|
||
To enable three state checkboxes use the following method:
|
||
<XMP>
|
||
<script>
|
||
tree.enableThreeStateCheckboxes(true)//false to disable
|
||
</script>
|
||
</XMP>
|
||
Using three-state checboxes with smart xml parsing you need to specify third state manually (checked="-1"):
|
||
<xmp>
|
||
<item checked="-1" ...>
|
||
<item checked="1" .../>
|
||
<item .../>
|
||
</item>
|
||
</xmp>
|
||
Checkboxes can be disabled - <strong>disableCheckbox(id,state)</strong><br>
|
||
Some node can hide checkboxes - <strong>showItemCheckbox(id,state)</strong> (<strong>nocheckbox</strong> xml attribute)
|
||
|
||
</div>
|
||
|
||
<a name="dnd"><h4 >Drag-and-drop technics</h4></a><div class="block">
|
||
There are three modes of drag-n-drop (set with <strong>setDragBehavior(mode)</strong>):<br>
|
||
<li>Drop as child - "child"</li><br>
|
||
<li>Drop as sibling - "sibling"</li><br>
|
||
<li>Complex mode (both previous are active) - "complex"</li> <br>
|
||
Plus two modes of each of them:<br>
|
||
<li>1. Common drag-n-drop</li><br>
|
||
<li>2. Copy with drag-n-drop - <strong>tree.enableMercyDrag(1/0)</strong></li><br>
|
||
All modes can be changed on the fly.<br>
|
||
<br>
|
||
<h5>Event handlers</h5>
|
||
To process drag-n-drop before drop occured use onDrug event handler - <strong>setDragHandler(func)</strong>. If func doesn't return <em>true</em>, drop will be canceled.<br>
|
||
After drop occured there is another event - onDrop - handle it using setDropHandler(func).<br>
|
||
Both event handlers pass 5 parameters into the func object:<br>
|
||
<li>id of node which was dragged</li>
|
||
<li>id of target node</li>
|
||
<li>id of target-before node (if drop as sibling)</li>
|
||
<li>tree object source</li>
|
||
<li>tree object target</li>
|
||
</div>
|
||
|
||
<a name="dndifr"><h4 >Drag-and-drop between iframes</h4></a><div class="block">
|
||
Drag-n-drop between iframes enabled by default. All you need to do additionaly is to insert the following code into the page where no tree exists:<br>
|
||
<xmp>
|
||
<script src="js/dhtmlXCommon.js"></script>
|
||
<script>
|
||
new dhtmlDragAndDropObject();
|
||
</script>
|
||
</xmp>
|
||
</div>
|
||
|
||
<a name="guide_perf"><h4 >Increasing Performance</h4></a><div class="block">
|
||
Taking into account the general low performance of DHTML we introducrd two ways of increasing performance of large trees:<br>
|
||
1. <a href="#dyntree">Dynamical Loading</a><br>
|
||
2. <a href="#smartxml">Smart XML Parsing</a><br>
|
||
Also be sure your tree was organized well - putting a lot of items on one level of the branch makes tree difficalt for visual perception and decrease performance.
|
||
</div>
|
||
|
||
<a name="context_menu"><h4 >Context Menu</h4></a><div class="block">
|
||
There is built in context menu in dhtmlxTree. The content of this menu can be set with XML or script. For changing context menu content depending on tree item developer can implement function for hidding/showing items of the same menu or associate different menues with different items. To enable context menu do the following:
|
||
<XMP>
|
||
<script>
|
||
//init menu
|
||
aMenu=new dhtmlXContextMenuObject('120',0,"Demo menu");
|
||
aMenu.menu.setGfxPath("../imgs/");
|
||
aMenu.menu.loadXML("menu/_context.xml");
|
||
aMenu.setContextMenuHandler(onMenuClick);
|
||
|
||
//init tree
|
||
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
|
||
...
|
||
tree.enableContextMenu(aMenu); //link context menu to tree
|
||
function onMenuClick(id){
|
||
alert("Menu item "+id+" was clicked");
|
||
}
|
||
</script>
|
||
</XMP>
|
||
</div>
|
||
|
||
<a name="refresh"><h4 >Refreshing nodes</h4></a><div class="block">
|
||
<li>refreshItems(itemIdList,source) to refresh only items from the itemIdList (not their children)</li>
|
||
<li>refreshItem(itemId) - to refresh children of item with itemId. In this case auto loading should be activated.</li>
|
||
</div>
|
||
|
||
<a name="sort"><h4 >Sorting nodes</h4></a><div class="block">
|
||
You can sort nodes in dhtmlxTree Pro (necessary file: dhtmlXTree_sb.js) using follwoing ways:<br>
|
||
<strong>Sort by label text (if no custom comparator specified)</strong><br>
|
||
<XMP>
|
||
tree.sortTree(nodeId,order,all_levels);
|
||
</XMP>
|
||
<li><em>nodeId</em> - parent of the level to start sorting from (id of superroot for entire tree) </li>
|
||
<li><i>order</i> - sort direction: "ASC"/"DES"</li>
|
||
<li><em>all_levels</em> - if true, then all sublevels will be processed as well</li>
|
||
<br><br>
|
||
<strong>Custom defined sorting</strong><br>
|
||
<XMP>
|
||
//define your comparator (in our case it compares second words in label)
|
||
function mySortFunc(idA,idB){
|
||
a=(tree.getItemText(idA)).split(" ")[1]||"";
|
||
b=(tree.getItemText(idB)).split(" ")[1]||"";
|
||
return ((a>b)?1:-1);
|
||
}
|
||
tree = new ...
|
||
//attach your comparator to the tree
|
||
tree.setCustomSortFunction(mySortFunc);
|
||
</XMP>
|
||
Comparator function gets 2 nodes IDs. Use your tree object there and these IDs to return a comparison result.
|
||
<br>
|
||
If custome comparator was specified, then tree.sortTree(...) method uses it for sorting.
|
||
|
||
</div>
|
||
|
||
<a name="search"><h4 >Search functionlity</h4></a><div class="block">
|
||
Search functionality of dhtmlxTree allows moving focus on node with label fitting searchString mask.<br>
|
||
Has support for Smart XML Parsing.<br><br>
|
||
Script syntax:
|
||
<XMP>
|
||
tree.findItem(searchString); //find item next to current selection
|
||
tree.findItem(searchString,1,1)//find item previous to current selection
|
||
tree.findItem(searchString,0,1)//search from top
|
||
</XMP>
|
||
Example of usage is included in Professional Edition package <20> samples/treeExPro2.html.
|
||
</div>
|
||
|
||
|
||
<a name="multiline"><h4 >Multiline tree items</h4></a><div class="block">
|
||
...allows displaying tree items in multiline mode. For now it is recommended to turn tree lines off for better appearance. To enable multiline feature you need to do the following:
|
||
<XMP>
|
||
tree.enableTreeLines(false);
|
||
tree.enableMultiLineItems(true);
|
||
</XMP>
|
||
Example of usage is included in professional edition package <20> samples/treeExPro6.html.
|
||
</div>
|
||
|
||
<a name="g_icons"><h4 >Icons in Tree</h4></a><div class="block">
|
||
<h4>Set Icons</h4>
|
||
There is a way to set icons for the node explicetly using script (<strong>setItemImage,setItemImage2</strong>) or xml (<strong>im0,im1,im2</strong> attributes of item node):<br>
|
||
<li>im0 - item without children</li>
|
||
<li>im1 - closed item with children</li>
|
||
<li>im2 - opened item with children</li>
|
||
<h4>Set Icon Size</h4>
|
||
There is a way to set icon size for the whole tree or each node using script or xml:<br>
|
||
|
||
XML syntax for icon size per each item (optional):
|
||
<xmp><item ... imheight="Xpx" imwidth="Xpx"></item></xmp>
|
||
|
||
Script syntax:
|
||
<XMP>
|
||
tree.setIconSize(w,h);//set global icon size
|
||
tree.setIconSize(w,h,itemId)//set icon size for particular item
|
||
</XMP>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<a name="error"><h4 >Error handling in dhtmlxTree</h4></a><div class="block">
|
||
Some exceptions in dhtmlxTree can be captured and processed.
|
||
|
||
<xmp>
|
||
function myErrorHandler(type, desc, erData){
|
||
alert(erData[0].status)
|
||
}
|
||
dhtmlxError.catchError("ALL",myErrorHandler);
|
||
</xmp>
|
||
<strong>Supported Error Types are:</strong><br>
|
||
<li>"All"</li>
|
||
<li>"LoadXML"</li>
|
||
<br><br>
|
||
<strong>Handler gets the following params:</strong><br>
|
||
<li>type - string (mentioned above)</li>
|
||
<li>desc - error description (hardcoded in code)</li>
|
||
<li>erData - error related array objects(see below).</li>
|
||
<br>
|
||
<table width="100%" border="0" style="font-size:12px;" cellspacing="0">
|
||
<tr style="font-weight:bold;">
|
||
<td width="100">Type</td>
|
||
<td>Object(s)</td>
|
||
</tr>
|
||
<tr>
|
||
<td>LoadXML</td>
|
||
<td>[0] - response object</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<a name="cftag"><h3 >Cold Fusion Tag for dhtmlXTree</h3
|
||
></a><div class="block">
|
||
<XMP>
|
||
<cf_dhtmlXTree
|
||
name="tree"
|
||
width="250"
|
||
height="250"
|
||
JSPath="../"
|
||
CSSPath="../"
|
||
iconspath="gfx/"
|
||
xmldoc="tree.xml"
|
||
checkboxes="false"
|
||
dragndrop="true"
|
||
style="background-color:whitesmoke;border:1px solid blue;"
|
||
onSelect="onNodeSelect"
|
||
onDrop="onDropNode">
|
||
...configuration xml...
|
||
</cf_dhtmlXTree>
|
||
</XMP>
|
||
<li>name - [optional] name of the tree js object to use in javascript, if skiped, then name autogenerated</li>
|
||
<li>width - [optional] width of the tree (definitely it sets the with of the tree box, leaving the with of the tree itself by 100%)</li>
|
||
<li>height - [optional] height of the tree</li>
|
||
<li>JSPath - [optional] absolute or relative path to directory which contains tree js files, "js" directory by default</li>
|
||
<li>CSSPath - [optional] absolute or relative path to directory which contains tree css files, "css" directory by default</li>
|
||
<li>iconspath - [optional] absolute or relative path to directory which contains tree icon files, "img" directory by default</li>
|
||
<li>xmldoc - [mandatory for xml loading] url of the xml file used to load levels dynamically</li>
|
||
<li>checkboxes - [optional] show checkboxes (none, twoState, threeState)</li>
|
||
<li>dragndrop - [optional] activate drag-&-drop (true,false)</li>
|
||
<li>style - [optional] style for the tree box</li>
|
||
<li>onSelect - [optional] javascript function to call on node selection</li>
|
||
<li>oncheck - [optional] javascript function to call on node (un)checking</li>
|
||
<li>onDrop - [optional] javascript function to call on node drop</li>
|
||
<li>im1 - [optional] default image used for child nodes</li>
|
||
<li>im2 - [optional] default image used for opened branches</li>
|
||
<li>im3 - [optional] default image used for closed branches</li>
|
||
<br>
|
||
For description of optional configuration xml - see chapter <em>"Loading data with XML"</em>
|
||
<br><br>
|
||
Minimal possible tag syntax with on-page xml:
|
||
<XMP>
|
||
<cf_dhtmlXTree>
|
||
<item text="Top node" id="t1" >
|
||
<item text="Child node 1" id="c1" ></item>
|
||
<item text="Child node 2" id="c2" ></item>
|
||
</item>
|
||
</cf_dhtmlXTree>
|
||
</XMP>
|
||
Minimal possible tag syntax with server-side xml:
|
||
<XMP>
|
||
<cf_dhtmlXTree xmldoc="tree.xml">
|
||
</cf_dhtmlXTree>
|
||
</XMP>
|
||
With images specified:
|
||
<XMP>
|
||
<cf_dhtmlXTree
|
||
im1="book.gif"
|
||
im2="books_open.gif"
|
||
im3="books_close.gif">
|
||
<item text="Mystery " id="mystery" open="yes" >
|
||
<item text="Lawrence Block" id="lb" >
|
||
<item text="All the Flowers Are Dying" id="lb_1" />
|
||
<item text="The Burglar on the Prowl" id="lb_2" />
|
||
<item text="The Plot Thickens" id="lb_3" />
|
||
<item text="Grifters Game" id="lb_4" />
|
||
<item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
|
||
</item>
|
||
<item text="Robert Crais" id="rc" >
|
||
<item text="The Forgotten Man" id="rc_1" />
|
||
<item text="Stalking the Angel" id="rc_2" />
|
||
<item text="Free Fall" id="rc_3" />
|
||
<item text="Sunset Express" id="rc_4" />
|
||
<item text="Hostage" id="rc_5" />
|
||
</item>
|
||
<item text="Ian Rankin" id="ir" ></item>
|
||
<item text="James Patterson" id="jp" ></item>
|
||
<item text="Nancy Atherton" id="na" ></item>
|
||
</item>
|
||
</cf_dhtmlXTree>
|
||
</XMP>
|
||
With Events Handlers,Checkboxes and Drag-n-drop:
|
||
<XMP>
|
||
<cf_dhtmlXTree
|
||
dragndrop="true"
|
||
checkboxes="twoState"
|
||
onSelect="onClick"
|
||
onCheck="onCheck"
|
||
onDrop="onDrag">
|
||
<item text="Mystery " id="mystery" open="yes" >
|
||
<item text="Lawrence Block" id="lb" >
|
||
<item text="All the Flowers Are Dying" id="lb_1" />
|
||
<item text="The Burglar on the Prowl" id="lb_2" />
|
||
<item text="The Plot Thickens" id="lb_3" />
|
||
<item text="Grifters Game" id="lb_4" />
|
||
<item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
|
||
</item>
|
||
<item text="Robert Crais" id="rc" >
|
||
<item text="The Forgotten Man" id="rc_1" />
|
||
<item text="Stalking the Angel" id="rc_2" />
|
||
<item text="Free Fall" id="rc_3" />
|
||
<item text="Sunset Express" id="rc_4" />
|
||
<item text="Hostage" id="rc_5" />
|
||
</item>
|
||
<item text="Ian Rankin" id="ir" ></item>
|
||
<item text="James Patterson" id="jp" ></item>
|
||
<item text="Nancy Atherton" id="na" ></item>
|
||
</item>
|
||
</cf_dhtmlXTree>
|
||
</XMP>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|