📄 guide.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DHTML Tree v.1.4 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}
h5{
font-weight:bold;color:green;
margin:5px;
}
h6{
font-weight:bold;color:gray;
margin:0px;
}
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;}
span.important {font-weight:bold;color:maroon;}
</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>aCol - colour of not selected item</li>
<li>sCol - colour of selected item</li>
<!--- <li>top - </li> --->
<li>select - select node on load (any value)</li>
<li>style - node text style</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>
<li>topoffset - offset of the item from the node above</li>
<li>radio - if non empty, then children of this node will have radiobuttons</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>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -