updated dhtmlXTree to version 1.2

This commit is contained in:
Ralf Becker 2006-03-19 17:51:23 +00:00
parent e5c5848f4b
commit f219bf221e
97 changed files with 8369 additions and 848 deletions

View File

@ -20,13 +20,13 @@
<p>The Licensee has the right to use the software only in ONE commercial project (for one License). It is possible to use the software on any Website unlimited number of times but within the ONE commercial project (application). "Website" and "site" means the technology, and is not limited by internet sites, it also includes intranet and extranet websites. When referred to a site, a site means a location where all the web pages share a single fully qualified domain name.</p>
<p>The Licensee has the right to apply for free-of-charge support (consultations) on the product within 3 months since purchasing the product and also free-of-charge elimination of any found bugs during the same period.</p>
<p>The Licensee has the right to apply for free-of-charge support (consultations) on the product within 1 month since purchasing the product and also free-of-charge elimination of any found bugs during the same period.</p>
<p>Modifications to the software are allowed, as long as they do not conflict with the license, but distribution of the modified software is forbidden. A non-exclusive royalty-free right is granted to the initial developer of the Software to use, modify and distribute your modification in future versions of the Software.</p>
<p>Modifications to the software are allowed, as long as they do not conflict with the license, but distribution of the modified software or part(s) of it as standalone application is forbidden. A non-exclusive royalty-free right is granted to the initial developer of the Software to use, modify and distribute your modification in future versions of the Software.</p>
<h3>a) specific restrictions</h3>
<p>The licensee is not permitted to distribute the components in any fashion which would promote, encourage or allow reuse or redistribution of the JavaScript component.</p>
<p>The licensee is not permitted to distribute the component or its part(s) in any fashion which would promote, encourage or allow reuse or redistribution of the JavaScript component.</p>
<h3>b) general restrictions</h3>
<p>Software may not be transferred, leased, assigned, or sublicensed, in whole or in part.</p>
<p>IF THESE RESTRICTIONS ARE NOT ALLOWED BY YOUR RESPECTIVE LAW THEN CONTACT SCAND LLC TO CHECK IF THE RESTRICTIONS CAN BE RELAXED IN YOUR CASE. THE RELAXATION CAN ONLY BE GIVEN BY WRITTEN CONSENT.</p>

View File

@ -17,15 +17,17 @@
<h2>1. LIMITED LICENSE GRANT.</h2>
<p>Scand LLC grants to you ("Licensee") a nonexclusive, nontransferable, worldwide, royalty-free license to use this version of dhtmlxTree (the "Software").
The Licensee has the right to use the Software in any number of projects, but only by the ONE company.</p>
The Licensee has the right to use the Software in any number of projects (applications) any number of times per each, but only developed by the ONE company (for one license).
</p>
<p>The Licensee has the right to apply for free-of-charge support (consultations) on the product within 2 years since purchasing the product and also free-of-charge elimination of any found bugs during the same period.</p>
<p>The Licensee has the right to apply for free-of-charge support (consultations) on the product within 1 year since purchasing the product and also free-of-charge elimination of any found bugs during the same period.</p>
<p>Modifications to the software are allowed, as long as they do not conflict with the license, but distribution of the modified software is forbidden. A non-exclusive royalty-free right is granted to the initial developer of the Software to use, modify and distribute your modification in future versions of the Software.</p>
<p>Modifications to the software are allowed, as long as they do not conflict with the license, but distribution of the modified software or part(s) of it as standalone application is forbidden. A non-exclusive royalty-free right is granted to the initial developer of the Software to use, modify and distribute your modification in future versions of the Software.</p>
<h3>a) specific restrictions</h3>
<p>The licensee is not permitted to distribute the components in any fashion which would promote, encourage or allow reuse or redistribution of the JavaScript component.</p>
<p>The Licensee is not permitted to distribute the component or its part(s) in any fashion which would promote, encourage or allow reuse or redistribution of the JavaScript component.</p>
<h3>b) general restrictions</h3>
<p>Software may not be transferred, leased, assigned, or sublicensed, in whole or in part.</p>

View File

@ -0,0 +1,53 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dhtmlxTree Open Source License</title>
</head>
<style>
h1{font-family:arial;font-size:28px;border-bottom:1px solid black;}
h2{font-family:arial;font-size:18px;color:gray;}
h3{font-family:arial;font-size:16px;color:gray;margin-left:10px}
p{font-size:14px;margin-bottom:3px;}
p.cr{border-top:1px solid black;font-family:arial;font-size:12px;}
</style>
<body>
<h1>dhtmlxTree Open Source License</h1>
<h2>1. LIMITED LICENSE GRANT. </h2>
<p>Scand LLC grants to you ("Licensee") a nonexclusive, nontransferable, worldwide, royalty-free license to use this version of dhtmlxTree Professional Edition (the "Software") in open-source project.</p>
<p>The Licensee has the right to use the software only in ONE open-source project (for one License). It is possible to use the software on any Website unlimited number of times but within the ONE open-source project (application). "Website" and "site" means the technology, and is not limited by internet sites, it also includes intranet and extranet websites. When referred to a site, a site means a location where all the web pages share a single fully qualified domain name.</p>
<p>The Licensee has the right to apply for free-of-charge support (consultations) on the product within 3 months since purchasing the product and also free-of-charge elimination of any found bugs during the same period.</p>
<p>Modifications to the software are allowed, as long as they do not conflict with the license, but distribution of the modified software or part(s) of it as standalone application is forbidden. A non-exclusive royalty-free right is granted to the initial developer of the Software to use, modify and distribute your modification in future versions of the Software.</p>
<h3>a) specific restrictions</h3>
<p>The licensee is not permitted to distribute the component or its part(s) in any fashion which would promote, encourage or allow reuse or redistribution of the JavaScript component.</p>
<p>The Licensee is not permitted to distribute the Software in source code form together with open-source product. Modified javascript files should be obfuscated using jsShreder utility (provided by Scand LLC for free) before including into distributed product.</p>
<h3>b) general restrictions</h3>
<p>Software may not be transferred, leased, assigned, or sublicensed, in whole or in part.</p>
<p>IF THESE RESTRICTIONS ARE NOT ALLOWED BY YOUR RESPECTIVE LAW THEN CONTACT SCAND LLC TO CHECK IF THE RESTRICTIONS CAN BE RELAXED IN YOUR CASE. THE RELAXATION CAN ONLY BE GIVEN BY WRITTEN CONSENT.</p>
<h3>c) disclaimer of warranty</h3>
<p>The Software is provided "AS IS," without a warranty of any kind.</p>
<p>ALL EXPRESS OR IMPLIED REPRESENTATIONS AND WARRANTIES, INCLUDING ANY IMPLIED WARRANTY OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, ARE HEREBY EXCLUDED.</p>
<p>IF THIS DISCLAIMER IS NOT ALLOWED BY YOUR RESPECTIVE LAW THEN CONTACT SCAND LLC TO CHECK IF THE DISCLAIMER CAN BE RELAXED IN YOUR CASE. THE RELAXATION CAN ONLY BE GIVEN BY WRITTEN CONSENT.</p>
<h3>d) limitation of liability.</h3>
<p>IN NO EVENT WILL SCAND LLC BE LIABLE FOR ANY LOST REVENUE, PROFIT OR DATA, OR FOR DIRECT, INDIRECT, SPECIAL, CONSEQUENTIAL, INCIDENTAL OR PUNITIVE DAMAGES HOWEVER CAUSED AND REGARDLESS OF THEORY OF LIABILITY ARISING OUT OF THE USE OF, INABILITY TO USE OR DOWNLOADING OF THE SOFTWARE, EVEN IF SCAND LLC HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.</p>
<p>IF THIS LIMITATION IS NOT ALLOWED BY YOUR RESPECTIVE LAW THEN CONTACT SCAND LLC TO CHECK IF THE LIMITATION CAN BE RELAXED IN YOUR CASE. THE RELAXATION CAN ONLY BE GIVEN BY WRITTEN CONSENT.</p>
<h2>2. COPYRIGHT</h2>
<p>SCAND LLC and its licensors retain all ownership rights to the software and related documentation. Use of the software and related documentation is governed by the license agreement accompanying the software and applicable copyright law.</p>
<p>The documentation must always follow the related software. Making unauthorized copies, adaptations, or compilation works is prohibited. SCAND LLC may revise this documentation from time to time without notice.</p>
<p>THIS DOCUMENTATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND. IN NO EVENT SHALL SCAND LLC BE LIABLE FOR ANY LOSS OF PROFITS, LOSS OF BUSINESS, LOSS OF USE OR DATA, INTERRUPTION OF BUSINESS, OR FOR INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY KIND, ARISING FROM ANY ERROR IN THIS DOCUMENTATION.</p>
<p>This means that the software and documentation come with no warranty, without any limitation. No liability of any kind can be accepted and this the fullest extent. If your law doesn't allow this, then do not use this software and documentation. </p>
<p class="cr">The Software and documentation are copyright &copy; 1996-2005 Scand LLC. All rights reserved.</p>
</body>
</html>

View File

@ -0,0 +1,82 @@
<cfsetting enablecfoutputonly="yes">
<cfparam name="attributes.width" default="100%">
<cfparam name="attributes.height" default="100%">
<cfparam name="attributes.name" default="t#left(replace(CreateUUID(),'-','','All'),15)#">
<cfparam name="attributes.JSPath" default="js/">
<cfparam name="attributes.CSSPath" default="css/">
<cfparam name="attributes.iconspath" default="imgs/">
<cfparam name="attributes.xmldoc" default="">
<cfparam name="attributes.checkboxes" default="none"> <!--- [ Scand: none, twoState, threeState ] --->
<cfparam name="attributes.dragndrop" default="false">
<cfparam name="attributes.style" default="background-color:whitesmoke;border:1px solid blue;">
<cfparam name="attributes.onSelect" default="">
<cfparam name="attributes.onDrop" default="">
<cfparam name="attributes.onCheck" default="">
<cfparam name="attributes.xmlFile" default="">
<cfparam name="attributes.im1" default="">
<cfparam name="attributes.im2" default="">
<cfparam name="attributes.im3" default="">
<cfif not ThisTag.HasEndTag>
<cfabort showerror="You need to supply a closing &lt;CF_dhtmlXTree&gt; tag.">
</cfif>
<cfif ThisTag.ExecutionMode is "End">
<cfsavecontent variable="treeOutput">
<cfoutput>
<cfif not isDefined("request.dhtmlXTreeScriptsInserted")>
<link rel="STYLESHEET" type="text/css" href="#attributes.CSSPath#dhtmlXTree.css">
<script src="#attributes.JSPath#dhtmlXCommon.js"></script>
<script src="#attributes.JSPath#dhtmlXTree.js"></script>
<cfset request.dhtmlXTreeScriptsInserted=1>
</cfif>
<div id="treebox_#attributes.name#" style="width:#attributes.width#; height:#attributes.height#; overflow:auto; #attributes.style#"></div>
<script>
function drawTree#attributes.name#(){
#attributes.name#=new dhtmlXTreeObject('treebox_#attributes.name#',"100%","100%",0);
#attributes.name#.setImagePath("#attributes.iconspath#");
<cfswitch expression="#attributes.checkboxes#">
<cfcase value="twoState">
#attributes.name#.enableCheckBoxes(true)
#attributes.name#.enableThreeStateCheckboxes(false);
</cfcase>
<cfcase value="threeState">
#attributes.name#.enableCheckBoxes(true)
#attributes.name#.enableThreeStateCheckboxes(true);
</cfcase>
<cfdefaultcase>
#attributes.name#.enableCheckBoxes(false)
#attributes.name#.enableThreeStateCheckboxes(false);
</cfdefaultcase>
</cfswitch>
<cfif len(attributes.onSelect)>
#attributes.name#.setOnClickHandler("#attributes.onSelect#");
</cfif>
<cfif len(attributes.onCheck)>
#attributes.name#.setOnCheckHandler("#attributes.onCheck#");
</cfif>
<cfif len(attributes.onDrop)>
#attributes.name#.setDragHandler("#attributes.onDrop#");
</cfif>
#attributes.name#.enableDragAndDrop(#attributes.dragndrop#)
<cfif (len(attributes.im1) or len(attributes.im2)) or len(attributes.im3)>
#attributes.name#.setStdImages("#attributes.im1#","#attributes.im2#","#attributes.im3#");
</cfif>
<cfif len(attributes.xmlFile)>
#attributes.name#.setXMLAutoLoading("#attributes.xmlFile#");
#attributes.name#.loadXML("#attributes.xmlFile#")
</cfif>
<cfif Len(Trim(ThisTag.GeneratedContent))>
#attributes.name#.loadXMLString("<?xml version='1.0'?><tree id='0'>#replace(replace(ThisTag.GeneratedContent,'"',"'","ALL"),"#chr(13)##chr(10)#","","ALL")#</tree>")
</cfif>
};
window.setTimeout("drawTree#attributes.name#()",100);
</script>
</cfoutput>
</cfsavecontent>
<cfset ThisTag.GeneratedContent = treeOutput>
</cfif>
<cfsetting enablecfoutputonly="no">

View File

@ -0,0 +1,82 @@
<cfsetting enablecfoutputonly="yes">
<cfparam name="attributes.width" default="100%">
<cfparam name="attributes.height" default="100%">
<cfparam name="attributes.name" default="t#left(replace(CreateUUID(),'-','','All'),15)#">
<cfparam name="attributes.JSPath" default="js/">
<cfparam name="attributes.CSSPath" default="css/">
<cfparam name="attributes.iconspath" default="imgs/">
<cfparam name="attributes.xmldoc" default="">
<cfparam name="attributes.checkboxes" default="none"> <!--- [ Scand: none, twoState, threeState ] --->
<cfparam name="attributes.dragndrop" default="false">
<cfparam name="attributes.style" default="background-color:whitesmoke;border:1px solid blue;">
<cfparam name="attributes.onSelect" default="">
<cfparam name="attributes.onDrop" default="">
<cfparam name="attributes.onCheck" default="">
<cfparam name="attributes.xmlFile" default="">
<cfparam name="attributes.im1" default="">
<cfparam name="attributes.im2" default="">
<cfparam name="attributes.im3" default="">
<cfif not ThisTag.HasEndTag>
<cfabort showerror="You need to supply a closing &lt;CF_dhtmlXTree&gt; tag.">
</cfif>
<cfif ThisTag.ExecutionMode is "End">
<cfsavecontent variable="treeOutput">
<cfoutput>
<cfif not isDefined("request.dhtmlXTreeScriptsInserted")>
<link rel="STYLESHEET" type="text/css" href="#attributes.CSSPath#dhtmlXTree.css">
<script src="#attributes.JSPath#dhtmlXCommon.js"></script>
<script src="#attributes.JSPath#dhtmlXTree.js"></script>
<cfset request.dhtmlXTreeScriptsInserted=1>
</cfif>
<div id="treebox_#attributes.name#" style="width:#attributes.width#; height:#attributes.height#; overflow:auto; #attributes.style#"></div>
<script>
function drawTree#attributes.name#(){
#attributes.name#=new dhtmlXTreeGridObject('treebox_#attributes.name#',"100%","100%",0);
#attributes.name#.tree.setImagePath("#attributes.iconspath#");
<cfswitch expression="#attributes.checkboxes#">
<cfcase value="twoState">
#attributes.name#.tree.enableCheckBoxes(true)
#attributes.name#.tree.enableThreeStateCheckboxes(false);
</cfcase>
<cfcase value="threeState">
#attributes.name#.tree.enableCheckBoxes(true)
#attributes.name#.tree.enableThreeStateCheckboxes(true);
</cfcase>
<cfdefaultcase>
#attributes.name#.tree.enableCheckBoxes(false)
#attributes.name#.tree.enableThreeStateCheckboxes(false);
</cfdefaultcase>
</cfswitch>
<cfif len(attributes.onSelect)>
#attributes.name#.tree.setOnClickHandler("#attributes.onSelect#");
</cfif>
<cfif len(attributes.onCheck)>
#attributes.name#.tree.setOnCheckHandler("#attributes.onCheck#");
</cfif>
<cfif len(attributes.onDrop)>
#attributes.name#.tree.setDragHandler("#attributes.onDrop#");
</cfif>
#attributes.name#.tree.enableDragAndDrop(#attributes.dragndrop#)
<cfif (len(attributes.im1) or len(attributes.im2)) or len(attributes.im3)>
#attributes.name#.tree.setStdImages("#attributes.im1#","#attributes.im2#","#attributes.im3#");
</cfif>
<cfif len(attributes.xmlFile)>
#attributes.name#.setXMLAutoLoading("#attributes.xmlFile#");
#attributes.name#.loadXML("#attributes.xmlFile#")
</cfif>
<cfif Len(Trim(ThisTag.GeneratedContent))>
#attributes.name#.loadXMLString("<?xml version='1.0'?><tree id='0'>#replace(replace(ThisTag.GeneratedContent,'"',"'","ALL"),"#chr(13)##chr(10)#","","ALL")#</tree>")
</cfif>
};
window.setTimeout("drawTree#attributes.name#()",100);
</script>
</cfoutput>
</cfsavecontent>
<cfset ThisTag.GeneratedContent = treeOutput>
</cfif>
<cfsetting enablecfoutputonly="no">

View File

@ -0,0 +1,109 @@
<h3 onclick="openFull(this)">Cold Fusion Tag for dhtmlXTree</h3>
This chapter also included into main documentation for dhtmlXTree.
<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>

View File

@ -0,0 +1,109 @@
<h3 onclick="openFull(this)">Cold Fusion Tag for dhtmlXTree</h3>
This chapter also included into main documentation for dhtmlXTree.
<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>

View File

@ -3,7 +3,7 @@
padding : 0;
border : 0;
}
.containerTableStyle { overflow : auto;}
.containerTableStyle { overflow : auto; font-size : 12px;}
.standartTreeRow{ font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 12px; -moz-user-select: none; }
.selectedTreeRow{ background-color : navy; color:white; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 12px; -moz-user-select: none; }
.standartTreeImage{ width:18px; height:18px; overflow:hidden; border:0; padding:0; margin:0; }

View File

@ -0,0 +1,4 @@
.treeGridHeader { font-family:arial;font-size:12px;background-Color:activeborder;border: 1px solid;border-color : white Gray Gray white;text-align: center;height:18; overflow:hidden; background-position:right; background-repeat:no-repeat; -moz-user-select: none; }
.treeGridHeaderDrag { background-color:white; float:left; width:1px; overflow:hidden; cursor: w-resize; height:18px; }
.selectedGridRow { font-family:arial;font-size:12px; background-color:navy; color:white; -moz-user-select: none; width: 100%; overflow-x:100; height: 18px; }
.standartGridRow { font-family:arial;font-size:12px; -moz-user-select: none; width: 100%; overflow-x:100; height: 18px; vertical-align: middle; }

View File

@ -0,0 +1,21 @@
p{
margin-top : 1px;
margin-bottom : 1px;
}
body{
font-weight : bold;
font-family : Tahoma;
font-size : 13px;
}
.editorComment{
color:gray;
}
.editorTags{
color: #0000CD;
}
.editorCFTags{
color: #D2691E;
}
.editorQuotes{
color: #3CB371;
}

View File

@ -23,102 +23,194 @@
div.block {margin-left:30px;}
</style><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">changeItemId(itemId,newItemId)<br /><strong style="color:#6c6c6c;font-size:12px">change item id</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - old node id</li><li type="circle">newItemId - new node id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">clearCut()<br /><strong style="color:#6c6c6c;font-size:12px">clear cut</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">closeAllItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">collapse target node and all child nodes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">clearSelection(itemId)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">unselect item in tree</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - reserved</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">closeAllItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">collapse target node and all child nodes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">closeItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">collapse node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteChildItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">delete all child of node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node identificator</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteItem(itemId,selectParent)<br /><strong style="color:#6c6c6c;font-size:12px">delete node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node identificator</li><li type="circle">selectParent - If true parent of deleted item get selection, else no selected items leaving in tree.</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">doCut()<br /><strong style="color:#6c6c6c;font-size:12px">mark selected item as cutted</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteChildItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">delete all children of node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteItem(itemId,selectParent)<br /><strong style="color:#6c6c6c;font-size:12px">delete node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><li type="circle">selectParent - If true parent of deleted item get selection, else no selected items leaving in tree.</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">disableCheckbox(itemId,mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">disable checkbox</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - Id of tree item</li><li type="circle">mode - 1 - on, 0 - off;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">doCut()<br /><strong style="color:#6c6c6c;font-size:12px">mark selected item as cutted</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">doPaste(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">insert previously cutted branch</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of new parent node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableAutoSavingSelected(mode)
[<span style="color:red;">Commercial</span>]
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of new parent node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableActiveImages(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable active images (clickable and dragable)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableAutoSavingSelected(mode,cookieName)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable autosaving selected node in cookie</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">mode - true/false</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableCheckBoxes(mode)<br /><strong style="color:#6c6c6c;font-size:12px">hide checkboxes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">mode - true/false</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableAutoTooltips(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable auto tooltips (node text as tooltip)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableCheckBoxes(mode)<br /><strong style="color:#6c6c6c;font-size:12px">hide checkboxes (all checkboxes in tree)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enabled/disabled</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableContextMenu(menu)
[<span style="color:red;">Commercial</span>]
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable context menu</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">menu - menu object</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableDragAndDrop(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable drag-and-drop</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enabled/disabled</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableDragAndDropScrolling(mode)
[<span style="color:red;">Commercial</span>]
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">menu - dhtmlXmenu object</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableDragAndDrop(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable drag-and-drop</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enabled/disabled [ can be true/false/temporary_disabled - last value mean that tree can be D-n-D can be switched to true later ]</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableDragAndDropScrolling(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable auto scrolling while drag-and-drop</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enabled/disabled</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableMultiLineItems(width)
[<span style="color:red;">Commercial</span>]
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enabled/disabled</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableHighlighting(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable item highlighting (item text highlited on mouseover)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableMercyDrag(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable drag without removing (copy instead of move)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableMultiLineItems(width)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable multi line items</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">width - text width, if equls zero then use single lines items;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableSmartXMLParsing(mode)
[<span style="color:red;">Commercial</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable smart XML parsing mode</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">width - text width, if equls zero then use single lines items;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableSmartCheckboxes(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable smart checkboxes ,true by default (auto checking childs and parents for 3-state checkboxes)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableSmartXMLParsing(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable smart XML parsing mode (usefull for big, well structured XML)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableThreeStateCheckboxes(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enable three state checkboxes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableTreeImages(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enable tree images</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableTreeLines(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enableTreeLines(mode);</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enable/disable tree lines</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">findItem(searchStr,direction,top)<br /><strong style="color:#6c6c6c;font-size:12px">find tree item by text, select and focus it</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">searchStr - search text</li><li type="circle">direction - 0: top -&gt; bottom; 1: bottom -&gt; top</li><li type="circle">top - 1: start searching from top</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">findItemIdByLabel(searchStr,direction,top)<br /><strong style="color:#6c6c6c;font-size:12px">find tree item by text</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableTreeLines(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable tree lines (parent-child threads)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enable/disable tree lines</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">findItem(searchStr,direction,top)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">find tree item by text, select and focus it</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">searchStr - search text</li><li type="circle">direction - 0: top -&gt; bottom; 1: bottom -&gt; top</li><li type="circle">top - 1: start searching from top</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">findItemIdByLabel(searchStr,direction,top)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">find tree item by text</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">searchStr - search text</li><li type="circle">direction - 0: top -&gt; bottom; 1: bottom -&gt; top</li><li type="circle">top - 1: start searching from top</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">focusItem(itemId)
[<span style="color:red;">Commercial</span>]
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">focus item in tree</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - item Id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllChecked()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with checked checkboxes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllCheckedBranches()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with checked checkboxes, and parent of that checkboxes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - item Id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllChecked()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with checked checkboxes, separated by comma</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllCheckedBranches()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with checked and third state checkboxes, separated by comma</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllFatItems()<br /><strong style="color:#6c6c6c;font-size:12px">Returns the list of all items which has child nodes, separated by commas.</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllLeafs()<br /><strong style="color:#6c6c6c;font-size:12px">Returns the list of all items which doesn't have child nodes.</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllPartiallyChecked()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with third state checkboxes, separated by comma</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllSubItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">Returns the list of all children items from all next levels of tree, separated by commas.</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getChildItemIdByIndex(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">retun child node identificator by index</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - parent node identificator</li><li type="circle">index - index of child node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemColor(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">get node color</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemIdByIndex(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">retun node identificator by index</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node identificator</li><li type="circle">index - index of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemText(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return node text</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getLevel(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return node level</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getParentId(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return parent node identificator</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSelectedItemId()<br /><strong style="color:#6c6c6c;font-size:12px">retun selected node identificator</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllUnchecked(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with unchecked checkboxes, separated by comma</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getChildItemIdByIndex(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">retun child node id by index</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - parent node id</li><li type="circle">index - index of child node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemColor(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">get node color</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemIdByIndex(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">retun node id by index</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><li type="circle">index - index of node, 0 based</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemText(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return item text</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getLevel(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return node level (position in hierarchy)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getOpenState(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return open/close state</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getParentId(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return parent item id</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSelectedItemId()<br /><strong style="color:#6c6c6c;font-size:12px">retun selected item id</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSelectedItemText()<br /><strong style="color:#6c6c6c;font-size:12px">retun selected node text</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSubItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">Returns the list of all children items from the next level of tree, separated by commas.</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getUserData(itemId,name)<br /><strong style="color:#6c6c6c;font-size:12px">return user data from target node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node identificator</li><li type="circle">name - key for user data</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">hasChildren(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return count of childrens</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewItem(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new child node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">parentId - parent node id</li><li type="circle">itemId - new node id</li><li type="circle">itemText - new node text</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node childs flag (for dynamical trees) (optional)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewNext(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new node next to specified</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">parentItemId - node id</li><li type="circle">itemId - new node id</li><li type="circle">itemName - new node text</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node childs flag (for dynamical trees) (optional)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">isItemChecked(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return state of nodes's checkbox</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node identificator</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadOpenStates(name)
[<span style="color:red;">Commercial</span>]
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getUserData(itemId,name)<br /><strong style="color:#6c6c6c;font-size:12px">return user data from target node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node id</li><li type="circle">name - key for user data</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getXMLState()
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">return current state of XML loading</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">hasChildren(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return number of childrens</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewChild(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new node as a child to specified with parentId</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">parentId - parent node id</li><li type="circle">itemId - new node id</li><li type="circle">itemText - new node label</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node children flag (for dynamical trees) (optional)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewItem(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new node as a child to specified with parentId</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">parentId - parent node id</li><li type="circle">itemId - new node id</li><li type="circle">itemText - new node text</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node childs flag (for dynamical trees) (optional)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewNext(itemId,newItemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new node next to specified</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><li type="circle">newItemId - new node id</li><li type="circle">itemText - new node text</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node childs flag (for dynamical trees) (optional)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">isItemChecked(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return state of nodes's checkbox</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadOpenStates(name)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">restore open nodes from cookie</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional,cookie name</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadState(name)
[<span style="color:red;">Commercial</span>]
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">load tree from cookie</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional,cookie name</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXML(file)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml file</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">file - link too XML file</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXMLString(xmlString)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml string</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">xmlString - XML string</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openAllItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand target node and all child nodes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">refreshItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">refresh tree branch from xml</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node, if not defined tree super root used.</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">restoreSelectedItem(name)
[<span style="color:red;">Commercial</span>]
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional,cookie name</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXML(file,afterCall)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml file</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">file - link too XML file</li><li type="circle">afterCall - function which will be called after xml loading</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXMLString(xmlString,afterCall)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml string</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">xmlString - XML string</li><li type="circle">afterCall - function which will be called after xml loading</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">moveItem(itemId,mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">move item (inside of tree)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - item Id</li><li type="circle">mode - moving mode (left,up,down)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openAllItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand target node and all child nodes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openAllItemsDynamic(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand target node and all child nodes (same as openAllItems, but works in dynamic trees)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">itemId - node id, optional</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">refreshItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">refresh tree branch from xml (XML with description of child nodes rerequested from server)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node, if not defined tree super root used.</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">refreshItems(itemIdList,source)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">refresh specified tree nodes (get XML from server and updat only nodes included in itemIdList)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemIdList - list of node identificators</li><li type="circle">source - server side script</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">restoreSelectedItem(name)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">restore selected item from cookie</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional, cookie name</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">saveOpenStates(name)
[<span style="color:red;">Commercial</span>]
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">save open nodes to cookie</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional,cookie name</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">saveSelectedItem(name)
[<span style="color:red;">Commercial</span>]
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">save selected item to cookie</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional, cookie name</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">saveState(name)
[<span style="color:red;">Commercial</span>]
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">save tree to cookie</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional, cookie name</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">selectItem(itemId,mode)<br /><strong style="color:#6c6c6c;font-size:12px">select node ( and optionaly fire onselect event)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node identificator</li><li type="circle">mode - If true, script function for selected node will be called.</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">serializeTree()
[<span style="color:red;">Commercial</span>]
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><li type="circle">mode - If true, script function for selected node will be called.</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">serializeTree()
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">return xml description of tree</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setCheck(itemId,state)<br /><strong style="color:#6c6c6c;font-size:12px">change state of node's checkbox</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node identificator</li><li type="circle">state - checkbox state</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setDragBehavior(mode)
[<span style="color:red;">Commercial</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set Drag-And-Drop behavior</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - behavior name (child or sibling)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setDragHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when drag-and-drop event occured</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node id</li><li type="circle">state - checkbox state (0/1/unsure)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setChildCalcHTML( htmlA,htmlB )
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set child calculation prefix and postfix</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">htmlA - postfix ([ - by default)</li><li type="circle">htmlB - postfix (] - by default)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setChildCalcMode( mode )
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set child calculation mode</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - mode name as string . Possible values: child - child, no recursive; leafs - child without subchilds, no recursive; ,childrec - child, recursive; leafsrec - child without subchilds, recursive; disabled (disabled by default)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setDragBehavior(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set Drag-And-Drop behavior (child - drop as chils, sibling - drop as sibling, complex - complex drop behaviour )</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - behavior name (child,sibling,complex)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setDragHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when drag-and-drop event occured</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onDrag<br />Event occured after item was dragged and droped on another item, but before item moving processed.<li type="square">ID of source item</li><li type="square">ID of target item</li><li type="square">if node droped as sibling then contain id of item before whitch source node will be inserted</li><li type="square">source Tree object</li><li type="square">target Tree object</li><br /><em style="color:blue;">Event returns:</em>true - confirm drag-and-drop; false - deny drag-and-drop;</fieldset><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">aFunc - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setDropHandler(func)
[<span style="color:red;">Commercial</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set function called after drag-and-drap event occured</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setImageArrays(arrayName,image1,image2,image3,image4,image5)<br /><strong style="color:#6c6c6c;font-size:12px">enableTreeLines(mode);</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set function called after drag-and-drap event occured</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onDrop<br />Event raised after drag-and-drop processed. Event also raised while programmatic moving nodes.<li type="square">ID of source item</li><li type="square">ID of target item</li></fieldset><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setEscapingMode(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set escaping mode (used for escaping ID in server requests)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - escaping mode ("utf8" for UTF escaping)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setIconSize(newWidth,newHeight,itemId)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set size of gfx icons</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">newWidth - new icon width</li><li type="circle">newHeight - new icon height</li><li type="circle">itemId - item Id, if skipped set default value for all new icons, optional</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setImageArrays(arrayName,image1,image2,image3,image4,image5)<br /><strong style="color:#6c6c6c;font-size:12px">set images used for parent-child threads drawing</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">arrayName - name of array: plus, minus</li><li type="circle">image1 - line crossed image</li><li type="circle">image2 - image with top line</li><li type="circle">image3 - image with bottom line</li><li type="circle">image4 - image without line</li><li type="circle">image5 - single root image</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setImagePath( newPath )<br /><strong style="color:#6c6c6c;font-size:12px">set path to image directory</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">newPath - path to image directory</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemCloseable(itemId,flag)<br /><strong style="color:#6c6c6c;font-size:12px">prevent node from closing</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><li type="circle">flag - if 0 - node can't be closed, else node can be closed</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemColor(itemId,defaultColor,selectedColor)<br /><strong style="color:#6c6c6c;font-size:12px">set node color</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><li type="circle">defaultColor - node color</li><li type="circle">selectedColor - selected node color</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemImage(itemId,image1,image2)<br /><strong style="color:#6c6c6c;font-size:12px">set node images</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><li type="circle">image1 - node without childrens image or closed node image (if image2 specified)</li><li type="circle">image2 - open node image (optional)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemImage2(itemId, image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">set node images</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><li type="circle">image1 - node without childrens image</li><li type="circle">image2 - closed node image</li><li type="circle">image3 - open node image</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemText(itemId,newLabel)<br /><strong style="color:#6c6c6c;font-size:12px">set new node text (HTML allowed)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><li type="circle">newLabel - node text</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnCheckHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called before checkbox checked/unchecked</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node selected</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnDblClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node double clicked</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnOpenHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called before tree node opened/closed</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setStdImages(image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">set default images for nodes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><li type="circle">flag - if 0 - node can't be closed, else node can be closed</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemColor(itemId,defaultColor,selectedColor)<br /><strong style="color:#6c6c6c;font-size:12px">set node color</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><li type="circle">defaultColor - node color</li><li type="circle">selectedColor - selected node color</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemContextMenu(itemId,cMenu)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set context menu to individual nodes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><li type="circle">cMenu - context menu object</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemImage(itemId,image1,image2)<br /><strong style="color:#6c6c6c;font-size:12px">set item images</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><li type="circle">image1 - node without childrens image or closed node image (if image2 specified)</li><li type="circle">image2 - open node image (optional)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemImage2(itemId, image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">set item images</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><li type="circle">image1 - node without childrens image</li><li type="circle">image2 - closed node image</li><li type="circle">image3 - open node image</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemStyle(itemId,style_string)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set individual item style</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><li type="circle">style_string - valid CSS string</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemText(itemId,newLabel,newTooltip)<br /><strong style="color:#6c6c6c;font-size:12px">set new node text (HTML allowed)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><li type="circle">newLabel - node text</li><li type="circle">newTooltip - (optional)tooltip for the node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setListDelimeter(separator)<br /><strong style="color:#6c6c6c;font-size:12px">set list separator (comma by default)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">separator - char or string using for separating items in lists</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnCheckHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called before checkbox checked/unchecked</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onCheck<br />Event raised immideatly after item in tree was checked/unchecked.<li type="square">ID of item which will be checked/unchecked</li><li type="square">Current checkbox state. 1 - item checked, 0 - item unchecked.</li></fieldset><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node selected</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onClick<br />Event raised immideatly after text part of item in tree was clicked, but after default onClick functionality was processed.<li type="square">ID of clicked item</li></fieldset><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnDblClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node double clicked</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onDblClick<br />Event raised immideatly after item in tree was doubleclicked, before default onDblClick functionality was processed.<li type="square">ID of item which was doubleclicked</li><br /><em style="color:blue;">Event returns:</em>true - confirm opening/closing; false - deny opening/closing;</fieldset><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnLoadingEnd(func)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set function called after xml loading/parsing ended</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onXMLLoadingEnd<br />event fired simultaneously with ending XML parsing, new items already available in tree<li type="square">tree object</li></fieldset><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnLoadingStart(func)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set function called before xml loading/parsing started</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onXMLLoadingStart<br />event fired simultaneously with starting XML parsing<li type="square">tree object</li></fieldset><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnOpenHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called before tree node opened/closed</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onOpen<br />Event raised immideatly after item in tree got command to open/close , and before item was opened//closed. Event also raised for unclosable nodes and nodes without open/close functionality - in that case result of function will be ignored.<li type="square">ID of node which will be opened/closed</li><li type="square">Current open state of tree item. 0 - item has not childs, -1 - item closed, 1 - item opened.</li><br /><em style="color:blue;">Event returns:</em>true - confirm opening/closing; false - deny opening/closing;</fieldset><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnRightClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node selected</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onRightClick<br />Event occured after right mouse button was clicked.<li type="square">ID of clicked item</li></fieldset><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setSerializationLevel(userData,fullXML)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">configure XML serialization</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">userData - enable/disable user data serialization</li><li type="circle">fullXML - enable/disable full XML serialization</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setStdImages(image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">set default images for nodes (must be called before XML loading)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">a0 - image for node without childrens;</li><li type="circle">a1 - image for closed node;</li><li type="circle">a2 - image for opened node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setSubChecked(itemId,state)<br /><strong style="color:#6c6c6c;font-size:12px">change state of node's checkbox and all childnodes checkboxes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node identificator</li><li type="circle">state - checkbox state</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setUserData(itemId,name,value)<br /><strong style="color:#6c6c6c;font-size:12px">set user data for target node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node identificator</li><li type="circle">name - key for user data</li><li type="circle">value - user data</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setXMLAutoLoading(filePath)<br /><strong style="color:#6c6c6c;font-size:12px">enables dinamic loading from XML mode</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">filePath - name of script returning XML;</li></div>
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node id</li><li type="circle">state - checkbox state</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setUserData(itemId,name,value)<br /><strong style="color:#6c6c6c;font-size:12px">set user data for target node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node id</li><li type="circle">name - key for user data</li><li type="circle">value - user data</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setXMLAutoLoading(filePath)<br /><strong style="color:#6c6c6c;font-size:12px">enables dynamic loading from XML</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">filePath - name of script returning XML;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setXMLAutoLoadingBehaviour(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">define which script be called on dynamic loading</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - id for some_script?id=item_id ; name for some_scriptitem_id, xmlname for some_scriptitem_id.xml</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">showItemCheckbox(itemId,state)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">show/hide checkbox for tree item (work only for individual items, not for all tree )</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of selected item</li><li type="circle">state - checkbox show state : 0/1</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">showItemSign(itemId,state)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">show/hide (+/-) icon (work only for individual items, not for all tree )</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of selected item</li><li type="circle">state - show state : 0/1</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">sortTree(nodeId,order,all_levels)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">reorder items in tree</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_sb.js<li type="circle">nodeId - id of top node</li><li type="circle">all_levels - sorting all levels or only current level</li><li type="circle">order - sorting order - ASC or DES</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">updateItem(itemId,name,im0,im1,im2,achecked)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">update item properties</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - list of node identificators</li><li type="circle">name - list of node identificators, optional</li><li type="circle">im0 - list of node identificators, optional</li><li type="circle">im1 - list of node identificators, optional</li><li type="circle">im2 - list of node identificators, optional</li><li type="circle">achecked - list of node identificators, optional</li></div>

View File

@ -0,0 +1,405 @@
/*
Copyright Scand LLC http://www.scbr.com
This version of Software is free for using in non-commercial applications. For commercial use please contact info@scbr.com to obtain license
*/
/**
* @desc: xmlLoader object
* @type: private
* @param: funcObject - xml parser function
* @param: object - jsControl object
* @topic: 0
*/
function dtmlXMLLoaderObject(funcObject, dhtmlObject,async){
this.xmlDoc="";
if(arguments.length==2)
this.async=true;
else
this.async=async;
this.onloadAction=funcObject||null;
this.mainObject=dhtmlObject||null;
return this;
};
/**
* @desc: xml loading handler
* @type: private
* @param: dtmlObject - xmlLoader object
* @topic: 0
*/
dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
this.check=function (){
if(dhtmlObject.onloadAction!=null){
if (!dhtmlObject.xmlDoc.readyState) dhtmlObject.onloadAction(dhtmlObject.mainObject);
else {
if (dhtmlObject.xmlDoc.readyState != 4) return false;
else dhtmlObject.onloadAction(dhtmlObject.mainObject); }
}
};
return this.check;
};
/**
* @desc: return XML top node
* @param: tagName - top XML node tag name (not used in IE, required for Safari and Mozilla)
* @type: private
* @returns: top XML node
* @topic: 0
*/
dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
if (this.xmlDoc.responseXML) { var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName); var z=temp[0]; }
else var z=this.xmlDoc.documentElement;
if (z) return z;
alert("Incorrect XML");
return document.createElement("DIV");
};
/**
* @desc: load XML
* @type: private
* @param: filePath - xml file path
* @topic: 0
*/
dtmlXMLLoaderObject.prototype.loadXMLString=function(xmlString){
try
{
var parser = new DOMParser();
this.xmlDoc = parser.parseFromString(xmlString,"text/xml");
}
catch(e){
this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
this.xmlDoc.async=this.async
this.xmlDoc.loadXML(xmlString);
}
this.onloadAction(this.mainObject);
}
dtmlXMLLoaderObject.prototype.loadXML=function(filePath){
try
{
this.xmlDoc = new XMLHttpRequest();
this.xmlDoc.open("GET",filePath,this.async);
this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
this.xmlDoc.send(null);
}
catch(e){
if (document.implementation && document.implementation.createDocument)
{
this.xmlDoc = document.implementation.createDocument("", "", null);
this.xmlDoc.onload = new this.waitLoadFunction(this);
}
else
{
this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
this.xmlDoc.async=this.async
this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
}
this.xmlDoc.load(filePath);
}
};
/**
* @desc: Call wrapper
* @type: private
* @param: funcObject - action handler
* @param: dhtmlObject - user data
* @returns: function handler
* @topic: 0
*/
function callerFunction(funcObject,dhtmlObject){
this.handler=function(e){
if (!e) e=event;
funcObject(e,dhtmlObject);
return true;
};
return this.handler;
};
/**
* @desc: Calculate absolute position of html object
* @type: private
* @param: htmlObject - html object
* @topic: 0
*/
function getAbsoluteLeft(htmlObject){
var xPos = htmlObject.offsetLeft;
var temp = htmlObject.offsetParent;
while (temp != null) {
xPos += temp.offsetLeft;
temp = temp.offsetParent;
}
return xPos;
}
/**
* @desc: Calculate absolute position of html object
* @type: private
* @param: htmlObject - html object
* @topic: 0
*/
function getAbsoluteTop(htmlObject) {
var yPos = htmlObject.offsetTop;
var temp = htmlObject.offsetParent;
while (temp != null) {
yPos += temp.offsetTop;
temp = temp.offsetParent;
}
return yPos;
}
/**
* @desc: Convert string to it boolean representation
* @type: private
* @param: inputString - string for covertion
* @topic: 0
*/
function convertStringToBoolean(inputString){ if (typeof(inputString)=="string") inputString=inputString.toLowerCase();
switch(inputString){
case "1":
case "true":
case "yes":
case "y":
case 1:
case true:
return true;
break;
default: return false;
}
}
/**
* @desc: find out what symbol to use as url param delimiters in further params
* @type: private
* @param: str - current url string
* @topic: 0
*/
function getUrlSymbol(str){
if(str.indexOf("?")!=-1)
return "&"
else
return "?"
}
function dhtmlDragAndDropObject(){
this.lastLanding=0;
this.dragNode=0;
this.dragStartNode=0;
this.dragStartObject=0;
this.tempDOMU=null;
this.tempDOMM=null;
this.waitDrag=0;
if (window.dhtmlDragAndDrop) return window.dhtmlDragAndDrop;
window.dhtmlDragAndDrop=this;
return this;
};
dhtmlDragAndDropObject.prototype.removeDraggableItem=function(htmlNode){
htmlNode.onmousedown=null;
htmlNode.dragStarter=null;
htmlNode.dragLanding=null;
}
dhtmlDragAndDropObject.prototype.addDraggableItem=function(htmlNode,dhtmlObject){
htmlNode.onmousedown=this.preCreateDragCopy;
htmlNode.dragStarter=dhtmlObject;
this.addDragLanding(htmlNode,dhtmlObject);
}
dhtmlDragAndDropObject.prototype.addDragLanding=function(htmlNode,dhtmlObject){
htmlNode.dragLanding=dhtmlObject;
}
dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e)
{
if (window.dhtmlDragAndDrop.waitDrag) {
window.dhtmlDragAndDrop.waitDrag=0;
document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
return false;
}
window.dhtmlDragAndDrop.waitDrag=1;
window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
window.dhtmlDragAndDrop.dragStartNode=this;
window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
if ((e)&&(e.preventDefault)) { e.preventDefault(); return false; }
return false;
};
dhtmlDragAndDropObject.prototype.callDrag=function(e){
if (!e) e=window.event;
dragger=window.dhtmlDragAndDrop;
if ((e.button==0)&&(isIE())) return dragger.stopDrag();
if (!dragger.dragNode) {
dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
if (!dragger.dragNode) return dragger.stopDrag();
dragger.gldragNode=dragger.dragNode;
document.body.appendChild(dragger.dragNode);
document.body.onmouseup=dragger.stopDrag;
dragger.waitDrag=0;
dragger.dragNode.pWindow=window;
dragger.initFrameRoute();
}
if (dragger.dragNode.parentNode!=window.document.body){
var grd=dragger.gldragNode;
if (dragger.gldragNode.old) grd=dragger.gldragNode.old;
//if (!document.all) dragger.calculateFramePosition();
grd.parentNode.removeChild(grd);
var oldBody=dragger.dragNode.pWindow;
if (isIE()){
var div=document.createElement("Div");
div.innerHTML=dragger.dragNode.outerHTML;
dragger.dragNode=div.childNodes[0]; }
else dragger.dragNode=dragger.dragNode.cloneNode(true);
dragger.dragNode.pWindow=window;
dragger.gldragNode.old=dragger.dragNode;
document.body.appendChild(dragger.dragNode);
oldBody.dhtmlDragAndDrop.dragNode=dragger.dragNode;
}
dragger.dragNode.style.left=e.clientX+15+(dragger.fx?dragger.fx*(-1):0)+document.body.scrollLeft+"px";
dragger.dragNode.style.top=e.clientY+3+(dragger.fy?(-1)*dragger.fy:0)+document.body.scrollTop+"px";
if (!e.srcElement) var z=e.target; else z=e.srcElement;
dragger.checkLanding(z,e.clientX, e.clientY );
}
dhtmlDragAndDropObject.prototype.calculateFramePosition=function(n){
//this.fx = 0, this.fy = 0;
if (window.name) {
var el =parent.frames[window.name].frameElement.offsetParent;
var fx=0;
var fy=0;
while (el) { fx += el.offsetLeft; fy += el.offsetTop; el = el.offsetParent; }
if ((parent.dhtmlDragAndDrop)) { var ls=parent.dhtmlDragAndDrop.calculateFramePosition(1); fx+=ls.split('_')[0]*1; fy+=ls.split('_')[1]*1; }
if (n) return fx+"_"+fy;
else this.fx=fx; this.fy=fy;
}
return "0_0";
}
dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject,x,y){
if ((htmlObject)&&(htmlObject.dragLanding)) { if (this.lastLanding) this.lastLanding.dragLanding._dragOut(this.lastLanding);
this.lastLanding=htmlObject; this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode,x,y); }
else {
if ((htmlObject)&&(htmlObject.tagName!="BODY")) this.checkLanding(htmlObject.parentNode,x,y);
else { if (this.lastLanding) this.lastLanding.dragLanding._dragOut(this.lastLanding,x,y); this.lastLanding=0; }
}
}
dhtmlDragAndDropObject.prototype.stopDrag=function(e,mode){
dragger=window.dhtmlDragAndDrop;
if (!mode)
{
dragger.stopFrameRoute();
var temp=dragger.lastLanding;
dragger.lastLanding=null;
if (temp) temp.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,temp);
}
dragger.lastLanding=null;
if ((dragger.dragNode)&&(dragger.dragNode.parentNode==document.body)) dragger.dragNode.parentNode.removeChild(dragger.dragNode);
dragger.dragNode=0;
dragger.gldragNode=0;
dragger.fx=0;
dragger.fy=0;
dragger.dragStartNode=0;
dragger.dragStartObject=0;
document.body.onmouseup=dragger.tempDOMU;
document.body.onmousemove=dragger.tempDOMM;
dragger.tempDOMU=null;
dragger.tempDOMM=null;
dragger.waitDrag=0;
}
dhtmlDragAndDropObject.prototype.stopFrameRoute=function(win){
if (win)
window.dhtmlDragAndDrop.stopDrag(1,1);
for (var i=0; i<window.frames.length; i++)
if ((window.frames[i]!=win)&&(window.frames[i].dhtmlDragAndDrop))
window.frames[i].dhtmlDragAndDrop.stopFrameRoute(window);
if ((parent.dhtmlDragAndDrop)&&(parent!=window)&&(parent!=win))
parent.dhtmlDragAndDrop.stopFrameRoute(window);
}
dhtmlDragAndDropObject.prototype.initFrameRoute=function(win,mode){
if (win) {
window.dhtmlDragAndDrop.preCreateDragCopy();
window.dhtmlDragAndDrop.dragStartNode=win.dhtmlDragAndDrop.dragStartNode;
window.dhtmlDragAndDrop.dragStartObject=win.dhtmlDragAndDrop.dragStartObject;
window.dhtmlDragAndDrop.dragNode=win.dhtmlDragAndDrop.dragNode;
window.dhtmlDragAndDrop.gldragNode=win.dhtmlDragAndDrop.dragNode;
window.document.body.onmouseup=window.dhtmlDragAndDrop.stopDrag;
window.waitDrag=0;
if ((!isIE())&&(mode)) window.dhtmlDragAndDrop.calculateFramePosition();
}
if ((parent.dhtmlDragAndDrop)&&(parent!=window)&&(parent!=win))
parent.dhtmlDragAndDrop.initFrameRoute(window);
for (var i=0; i<window.frames.length; i++)
if ((window.frames[i]!=win)&&(window.frames[i].dhtmlDragAndDrop))
window.frames[i].dhtmlDragAndDrop.initFrameRoute(window,((!win||mode)?1:0));
}
//determines if current browser is IE
function isIE(){
if(navigator.appName.indexOf("Microsoft")!=-1)
if (navigator.userAgent.indexOf('Opera') == -1)
return true;
return false;
}
//multibrowser Xpath processor
dtmlXMLLoaderObject.prototype.doXPath = function(xpathExp,docObj){
if(isIE()){//IE
if(arguments.length==1){
docObj = this.xmlDoc
}
return docObj.selectNodes(xpathExp);
}else{//Mozilla
var nodeObj = docObj;
if(!docObj){
if(!this.xmlDoc.nodeName){
docObj = this.xmlDoc.responseXML
}else{
docObj = this.xmlDoc;
}
}
if(docObj.nodeName.indexOf("document")!=-1){
nodeObj = docObj;
}else{
nodeObj = docObj;
docObj = docObj.ownerDocument;
}
var rowsCol = new Array();
var col = docObj.evaluate(xpathExp, nodeObj, null, XPathResult.ANY_TYPE,null);
var thisColMemb = col.iterateNext();
while (thisColMemb) {
rowsCol[rowsCol.length] = thisColMemb;
thisColMemb = col.iterateNext();
}
return rowsCol;
}
}
if ( window.Node )
Node.prototype.removeNode = function( removeChildren )
{
var self = this;
if ( Boolean( removeChildren ) )
{
return this.parentNode.removeChild( self );
}
else
{
var range = document.createRange();
range.selectNodeContents( self );
return this.parentNode.replaceChild( range.extractContents(), self );
}
}

View File

@ -0,0 +1,11 @@
.defaultTreeTable{
margin : 0px;
padding : 0px;
border : 0px;
}
.containerTableStyle { overflow : auto; font-size : 12px;}
.standartTreeRow{ font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 12px; -moz-user-select: none; }
.selectedTreeRow{ background-color : navy; color:white; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 12px; -moz-user-select: none; }
.standartTreeImage{ width:18px; height:18px; overflow:hidden; border:0; padding:0; margin:0; }
.hiddenRow { width:1px; overflow:hidden; }
.dragSpanDiv{ font-size : 12px; border: thin solid 1px 1px 1px 1px; }

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,81 @@
<?xml version="1.0" encoding="utf-8"?><div style="position:absolute;right:20"><a href="javascript:void(0)" onclick="expandAll(true)">expand</a><a href="javascript:void(0)" onclick="expandAll(false)">collaps</a></div><script><!--
function openFull(el){
el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
}
function expandAll(fl){
var elAr = document.getElementsByTagName("DIV");
for(var i=2;i<elAr.length;i++){
if(elAr[i].style.display=='none' || elAr[i].block_fl){
elAr[i].block_fl = true;
if(fl)
elAr[i].style.display = "";
else
elAr[i].style.display = "none";
}
}
}
--></script><style>
.{font-family:arial;}
h2 {cursor:pointer;font-size:16px;margin-left:10px;line-height:10px}
h3 {cursor:pointer;font-weight:normal;color:gray;text-decoration:underline;line-height:10px}
div.block {margin-left:30px;}
</style><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">addRow(parentId,itemId,data,itemActionHandler,image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">add row to grid</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeGridObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">parentId - parent node id</li><li type="circle">itemId - new node id</li><li type="circle">data - array of row data</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">changeItemId(itemId,newItemId)<br /><strong style="color:#6c6c6c;font-size:12px">change item id</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - old node id</li><li type="circle">newItemId - new node id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">clearCut()<br /><strong style="color:#6c6c6c;font-size:12px">clear cut</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">closeAllItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">collapse target node and all child nodes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - node id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">closeItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">collapse node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteChildItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">delete all child of node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">itemId - node identificator</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteItem(itemId,selectParent)<br /><strong style="color:#6c6c6c;font-size:12px">delete node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">itemId - node identificator</li><li type="circle">selectParent - If true parent of deleted item get selection, else no selected items leaving in tree.</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteRow(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">delete row of grid</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeGridObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">itemId - item id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">doCut()<br /><strong style="color:#6c6c6c;font-size:12px">mark selected item as cutted</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">doPaste(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">insert previously cutted branch</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">itemId - id of new parent node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableCheckBoxes(mode)<br /><strong style="color:#6c6c6c;font-size:12px">hide checkboxes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableDragAndDrop(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable drag-and-drop</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableTreeLines(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enableTreeLines(mode);</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">mode - enable/disable tree lines</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllChecked()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with checked checkboxes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllCheckedBranches()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with checked checkboxes, and parent of that checkboxes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllSubItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">Returns the list of all children items from all next levels of tree, separated by commas.</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getChildItemIdByIndex(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">retun child node identificator by index</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
<li type="circle">itemId - parent node identificator</li><li type="circle">index - index of child node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getGridData(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">get data from specefied row by index</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeGridObject<br /><em style="color:blue;">Topic(s): </em>Data manipulation;
<li type="circle">itemId - item id</li><li type="circle">index - column index</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemColor(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">get node color</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemIdByIndex(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">retun node identificator by index</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
<li type="circle">itemId - node identificator</li><li type="circle">index - index of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemText(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return node text</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getLevel(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return node level</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getParentId(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return parent node identificator</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSelectedItemId()<br /><strong style="color:#6c6c6c;font-size:12px">retun selected node identificator</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSelectedItemText()<br /><strong style="color:#6c6c6c;font-size:12px">retun selected node text</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
</div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSubItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">Returns the list of all children items from the next level of tree, separated by commas.</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getUserData(itemId,name)<br /><strong style="color:#6c6c6c;font-size:12px">return user data from target node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<li type="circle">itemId - target node identificator</li><li type="circle">name - key for user data</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">hasChildren(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return count of childrens</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewItem(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new child node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">parentId - parent node id</li><li type="circle">itemId - new node id</li><li type="circle">itemText - new node text</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node childs flag (for dynamical trees) (optional)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewNext(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new node next to specified</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">parentItemId - node id</li><li type="circle">itemId - new node id</li><li type="circle">itemName - new node text</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node childs flag (for dynamical trees) (optional)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">isItemChecked(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return state of nodes's checkbox</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<li type="circle">itemId - target node identificator</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXML(file)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml file</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeGridObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">file - link to XML file</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXMLString(xmlString)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml string</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeGridObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">xmlString - XML string</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXMLString(xmlString)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml string</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Private;
<li type="circle">xmlString - XML string</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openAllItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand target node and all child nodes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - node id</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - identificator of node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">refreshItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">refresh tree branch from xml</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node, if not defined tree super root used.</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">selectItem(itemId,mode)<br /><strong style="color:#6c6c6c;font-size:12px">select node ( and optionaly fire onselect event)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Selection control;
<li type="circle">itemId - node identificator</li><li type="circle">mode - If true, script function for selected node will be called.</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setCheck(itemId,state)<br /><strong style="color:#6c6c6c;font-size:12px">change state of node's checkbox</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<li type="circle">itemId - target node identificator</li><li type="circle">state - checkbox state</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setDragHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when drag-and-drap event occured</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">aFunc - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setGridData(itemId,index,newValue)<br /><strong style="color:#6c6c6c;font-size:12px">set data in specefied row by index</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeGridObject<br /><em style="color:blue;">Topic(s): </em>Data manipulation;
<li type="circle">itemId - item id</li><li type="circle">index - column index</li><li type="circle">newValue - new grid value</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setImageArrays(arrayName,image1,image2,image3,image4,image5)<br /><strong style="color:#6c6c6c;font-size:12px">enableTreeLines(mode);</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">arrayName - name of array: plus, minus</li><li type="circle">image1 - line crossed image</li><li type="circle">image2 - image with top line</li><li type="circle">image3 - image with bottom line</li><li type="circle">image4 - image without line</li><li type="circle">image5 - single root image</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setImagePath( newPath )<br /><strong style="color:#6c6c6c;font-size:12px">set path to image directory</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">newPath - path to image directory</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemCloseable(itemId,flag)<br /><strong style="color:#6c6c6c;font-size:12px">prevent node from closing</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - identificator of node</li><li type="circle">flag - if 0 - node can't be closed, else node can be closed</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemColor(itemId,defaultColor,selectedColor)<br /><strong style="color:#6c6c6c;font-size:12px">set node color</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li><li type="circle">defaultColor - node color</li><li type="circle">selectedColor - selected node color</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemImage(itemId,image1,image2)<br /><strong style="color:#6c6c6c;font-size:12px">set node images</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li><li type="circle">image1 - node without childrens image or closed node image (if image2 specified)</li><li type="circle">image2 - open node image (optional)</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemImage2(itemId, image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">set node images</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li><li type="circle">image1 - node without childrens image</li><li type="circle">image2 - closed node image</li><li type="circle">image3 - open node image</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemText(itemId,newLabel)<br /><strong style="color:#6c6c6c;font-size:12px">set new node text (HTML allowed)</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li><li type="circle">newLabel - node text</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnCheckHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called before checkbox checked/unchecked</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node selected</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnDblClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node double clicked</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnOpenHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called before tree node opened/closed</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">func - event handling function</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setStdImages(image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">set default images for nodes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">a0 - image for node without childrens;</li><li type="circle">a1 - image for closed node;</li><li type="circle">a2 - image for opened node</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setSubChecked(itemId,state)<br /><strong style="color:#6c6c6c;font-size:12px">change state of node's checkbox and all childnodes checkboxes</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<li type="circle">itemId - target node identificator</li><li type="circle">state - checkbox state</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setUserData(itemId,name,value)<br /><strong style="color:#6c6c6c;font-size:12px">set user data for target node</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<li type="circle">itemId - target node identificator</li><li type="circle">name - key for user data</li><li type="circle">value - user data</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setXMLAutoLoading(filePath)<br /><strong style="color:#6c6c6c;font-size:12px">enables dinamic loading from XML mode</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeGridObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">filePath - name of script returning XML;</li></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setXMLAutoLoading(filePath)<br /><strong style="color:#6c6c6c;font-size:12px">enables dinamic loading from XML mode</strong><br /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Object: </em>dhtmlXTreeObject<br /><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">filePath - name of script returning XML;</li></div>

View File

@ -0,0 +1,342 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DHTML Tree Grid Extension guide and samples</title>
</head>
<body>
<div style="position:absolute;right:20"><a href="javascript:void(0)" onclick="expandAll(true)">expand</a>&nbsp;<a href="javascript:void(0)" onclick="expandAll(false)">collaps</a></div>
<script>
function openFull(el){
el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
}
function expandAll(fl){
var elAr = document.getElementsByTagName("DIV");
for(var i=2;i<elAr.length;i++){
if(elAr[i].className=='block'){
if(fl)
elAr[i].style.display = "";
else
elAr[i].style.display = "none";
}
}
}
</script>
<style>
body {font-size:14px;line-height:18px;}
.{font-family:arial;}
h2 {cursor:pointer;font-size:16px;margin-left:10px;line-height:10px}
h3 {cursor:pointer;font-weight:normal;color:gray;text-decoration:underline;line-height:10px}
h4 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
.op {cursor:pointer;}
div.block {margin-left:30px;}
xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
li {margin-top:2px;}
</style>
<h2 onclick="openFull(this)">dhtmlXTreeGrid Guide and Samples</h2>
<div class="block">
<!--- --->
<h3 onclick="openFull(this)">Main features</h3
><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>drag-&-drop (within one treegrid, between treegrids) </li>
<li>checkboxes (two/three states)</li>
<li>customizable icons (with javascript or xml) </li>
<li>user data for nodes</li>
<li>high stability</li>
<li>Macromedia Cold Fusion support</li>
</div>
<h3 onclick="openFull(this)">Supported browsers</h3
><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 onclick="openFull(this)">Working with dhtmlXTreeGrid</h3
><div style="display:show" class="block">
<!--- Initialize object on page --->
<h4 onclick="openFull(this)">Initialize object on page</h4
><div style="display:none" class="block">
<XMP>
<div id="treeBox" style="width:200;height:200"></div>
<script>
treegrid=new dhtmlXTreeGridObject(document.getElementById('treeBox'),"100%","100%",0);
tree.setImagePath("gfx/");
tree.enableCheckBoxes(false);
</script>
</XMP>
Parameters passed to the constructor are:
<li>object to attach treegrid to (should be loaded before calling constructor)</li>
<li>width of the treegrid</li>
<li>height of the treegrid</li>
<li>identifier of level parent to treegrid root level</li><br>
Specify Additional parameters of the treegrid:
<li>setImagePath(url) - method specifies the path to the folder with treegrid icons</li>
<li>enableCheckBoxes(mode) - enable/disable checkboxes in treegrid (checkboxes appear by default)</li>
</div>
<!--- Set Additional init parameters --->
<h4 onclick="openFull(this)">Set Event Handlers</h4
><div style="display:none" class="block">
<XMP>
<div id="treeBox" style="width:200;height:200"></div>
<script>
treegrid=new dhtmlXTreeGridObject(document.getElementById('treeBox'),"100%","100%",0);
...
treegrid.tree.setOnDragHandler(onDrop);//set function object to call on drop
treegrid.tree.setOnClickHandler(onNodeSelect);//set function object to call on node select
treegrid.tree.setOnOpenHandler(onOpen,state);//set function to call on open/close node
treegrid.tree.setOnDblClickHandler(onDblClick);//set function to call on dbl click
</script>
</XMP>
<li>Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)</li>
<li>Dropped node ID and new parent node ID will be passed to function specified as argument for setDragFunction(funcObj)</li>
<li>node ID and node state will be passed to the function specified as argument for setOpenAction(funcObj,state)</li>
<li>node ID will be passed to the function specified as argument for setDblClickAction(funcObj)</li>
</div>
<!--- Adding nodes with Script --->
<h4 onclick="openFull(this)">Adding nodes with Script</h4
><div style="display:none" 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 --->
<h4 onclick="openFull(this)">Loading data with XML</h4
><div style="display:none" class="block">
<XMP>
<script>
tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
tree.setXMLAutoLoading("http://127.0.0.1/xml/tree.xml");
tree.loadXML();//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>
<strong>&lt;tree&gt;</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>&lt;item&gt;</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>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>top - </li> --->
<li>select - select node on load (0/1)</li>
<li>call - call function on select(0/1)</li>
<li>checked - check checkbox if exists(0/1)</li>
<li>child - spec. if node has children (1) or not (0)</li><br>
To set userdata directly within XML use <strong>&lt;userdata&gt;</strong><br>
It has just one parameter: <br>
<li>name</li><br>
and value to specify userdata value
</div>
<!--- Setting custom icons to nodes --->
<h4 onclick="openFull(this)">Setting custom icons to nodes</h4
><div style="display:none" 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 &lt;item&gt; 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 --->
<h4 onclick="openFull(this)">Building dynamic tree</h4
><div style="display:none" 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 <em>"Loading data with XML"</em>
</div>
<h4 onclick="openFull(this)">Manipulating nodes</h4
><div style="display:none" 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>
</div>
<h3 onclick="openFull(this)">Cold Fusion Tag for dhtmlXTree</h3
><div style="display:none" 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>

View File

@ -0,0 +1,55 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DHTML Tree Grid SDK</title>
</head>
<style>
td.menu, td.menu a{
font-family:arial;
font-size:12px;
margin-left:10px;
text-decoration:none;
color:white;
}
.{font-family:arial;}
h2 {cursor:pointer;font-size:16px;margin-left:10px;line-height:10px}
h3 {cursor:pointer;font-weight:normal;color:gray;text-decoration:underline;line-height:10px}
div.block {margin-left:30px;}
#contentdiv {padding:10px;}
</style>
<body scroll="no" bgcolor="#2795d3">
<table width="100%" height="99%" cellspacing="0">
<tr>
<td colspan="2" height="20" style="font-size:20px;font-family:arial;font-weight:bold;color:#9ad8fa;">
dhtmlXTreeGrid SDK
</td>
</tr>
<tr>
<td class="menu" xstyle="border-bottom:1px solid black">
<a href="guide.html" target="contentframe">guide and code samples</a>
<a href="http://www.scbr.com/docs/products/dhtmlxTree/treeGrid.shtml" target="contentframe">tree grid samples</a>
</td>
<td height="20" class="menu" align="right" xstyle="border-bottom:1px solid black">
<em>api methods:</em>
<a href="tgroup.html" target="contentframe">grouped by type</a>
<a href="ogroup.html" target="contentframe">grouped by object</a>
<a href="alpha.html" target="contentframe">alphabeticaly sorted</a>
</td>
</tr>
<tr>
<td colspan="2">
<iframe src="guide.html" name="contentframe" style="background-color:white;border-top:1px solid #6495ed;" height="100%" width="100%" frameborder="0"></iframe>
</td>
</tr>
</table>
<small style="font-size:10px"><a href="http://www.scand.com" style="text-decoration:none;color:white">&copy;Scand LLC, 2004</a></small>
</body>
</html>

View File

@ -0,0 +1,81 @@
<?xml version="1.0" encoding="utf-8"?><div style="position:absolute;right:20"><a href="javascript:void(0)" onclick="expandAll(true)">expand</a><a href="javascript:void(0)" onclick="expandAll(false)">collaps</a></div><script><!--
function openFull(el){
el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
}
function expandAll(fl){
var elAr = document.getElementsByTagName("DIV");
for(var i=2;i<elAr.length;i++){
if(elAr[i].style.display=='none' || elAr[i].block_fl){
elAr[i].block_fl = true;
if(fl)
elAr[i].style.display = "";
else
elAr[i].style.display = "none";
}
}
}
--></script><style>
.{font-family:arial;}
h2 {cursor:pointer;font-size:16px;margin-left:10px;line-height:10px}
h3 {cursor:pointer;font-weight:normal;color:gray;text-decoration:underline;line-height:10px}
div.block {margin-left:30px;}
</style><h2 onclick="openFull(this)">dhtmlXTreeGridObject object API</h2><div class="block" style="display:show;"><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">addRow(parentId,itemId,data,itemActionHandler,image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">add row to grid</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">parentId - parent node id</li><li type="circle">itemId - new node id</li><li type="circle">data - array of row data</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteRow(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">delete row of grid</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">itemId - item id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getGridData(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">get data from specefied row by index</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Data manipulation;
<li type="circle">itemId - item id</li><li type="circle">index - column index</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXML(file)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml file</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">file - link to XML file</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXMLString(xmlString)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml string</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">xmlString - XML string</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setGridData(itemId,index,newValue)<br /><strong style="color:#6c6c6c;font-size:12px">set data in specefied row by index</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Data manipulation;
<li type="circle">itemId - item id</li><li type="circle">index - column index</li><li type="circle">newValue - new grid value</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setXMLAutoLoading(filePath)<br /><strong style="color:#6c6c6c;font-size:12px">enables dinamic loading from XML mode</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">filePath - name of script returning XML;</li><span /></div><span /></div><h2 onclick="openFull(this)">dhtmlXTreeObject object API</h2><div class="block" style="display:show;"><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">changeItemId(itemId,newItemId)<br /><strong style="color:#6c6c6c;font-size:12px">change item id</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - old node id</li><li type="circle">newItemId - new node id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">clearCut()<br /><strong style="color:#6c6c6c;font-size:12px">clear cut</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">closeAllItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">collapse target node and all child nodes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - node id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">closeItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">collapse node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteChildItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">delete all child of node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">itemId - node identificator</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteItem(itemId,selectParent)<br /><strong style="color:#6c6c6c;font-size:12px">delete node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">itemId - node identificator</li><li type="circle">selectParent - If true parent of deleted item get selection, else no selected items leaving in tree.</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">doCut()<br /><strong style="color:#6c6c6c;font-size:12px">mark selected item as cutted</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">doPaste(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">insert previously cutted branch</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">itemId - id of new parent node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableCheckBoxes(mode)<br /><strong style="color:#6c6c6c;font-size:12px">hide checkboxes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableDragAndDrop(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable drag-and-drop</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableTreeLines(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enableTreeLines(mode);</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">mode - enable/disable tree lines</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllChecked()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with checked checkboxes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllCheckedBranches()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with checked checkboxes, and parent of that checkboxes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllSubItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">Returns the list of all children items from all next levels of tree, separated by commas.</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getChildItemIdByIndex(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">retun child node identificator by index</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<li type="circle">itemId - parent node identificator</li><li type="circle">index - index of child node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemColor(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">get node color</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemIdByIndex(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">retun node identificator by index</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<li type="circle">itemId - node identificator</li><li type="circle">index - index of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemText(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return node text</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getLevel(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return node level</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getParentId(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return parent node identificator</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSelectedItemId()<br /><strong style="color:#6c6c6c;font-size:12px">retun selected node identificator</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSelectedItemText()<br /><strong style="color:#6c6c6c;font-size:12px">retun selected node text</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSubItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">Returns the list of all children items from the next level of tree, separated by commas.</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getUserData(itemId,name)<br /><strong style="color:#6c6c6c;font-size:12px">return user data from target node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<li type="circle">itemId - target node identificator</li><li type="circle">name - key for user data</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">hasChildren(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return count of childrens</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewItem(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new child node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">parentId - parent node id</li><li type="circle">itemId - new node id</li><li type="circle">itemText - new node text</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node childs flag (for dynamical trees) (optional)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewNext(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new node next to specified</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<li type="circle">parentItemId - node id</li><li type="circle">itemId - new node id</li><li type="circle">itemName - new node text</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node childs flag (for dynamical trees) (optional)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">isItemChecked(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return state of nodes's checkbox</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<li type="circle">itemId - target node identificator</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXMLString(xmlString)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml string</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Private;
<li type="circle">xmlString - XML string</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openAllItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand target node and all child nodes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - node id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">refreshItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">refresh tree branch from xml</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node, if not defined tree super root used.</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">selectItem(itemId,mode)<br /><strong style="color:#6c6c6c;font-size:12px">select node ( and optionaly fire onselect event)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<li type="circle">itemId - node identificator</li><li type="circle">mode - If true, script function for selected node will be called.</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setCheck(itemId,state)<br /><strong style="color:#6c6c6c;font-size:12px">change state of node's checkbox</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<li type="circle">itemId - target node identificator</li><li type="circle">state - checkbox state</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setDragHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when drag-and-drap event occured</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">aFunc - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setImageArrays(arrayName,image1,image2,image3,image4,image5)<br /><strong style="color:#6c6c6c;font-size:12px">enableTreeLines(mode);</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">arrayName - name of array: plus, minus</li><li type="circle">image1 - line crossed image</li><li type="circle">image2 - image with top line</li><li type="circle">image3 - image with bottom line</li><li type="circle">image4 - image without line</li><li type="circle">image5 - single root image</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setImagePath( newPath )<br /><strong style="color:#6c6c6c;font-size:12px">set path to image directory</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">newPath - path to image directory</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemCloseable(itemId,flag)<br /><strong style="color:#6c6c6c;font-size:12px">prevent node from closing</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<li type="circle">itemId - identificator of node</li><li type="circle">flag - if 0 - node can't be closed, else node can be closed</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemColor(itemId,defaultColor,selectedColor)<br /><strong style="color:#6c6c6c;font-size:12px">set node color</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li><li type="circle">defaultColor - node color</li><li type="circle">selectedColor - selected node color</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemImage(itemId,image1,image2)<br /><strong style="color:#6c6c6c;font-size:12px">set node images</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li><li type="circle">image1 - node without childrens image or closed node image (if image2 specified)</li><li type="circle">image2 - open node image (optional)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemImage2(itemId, image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">set node images</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li><li type="circle">image1 - node without childrens image</li><li type="circle">image2 - closed node image</li><li type="circle">image3 - open node image</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemText(itemId,newLabel)<br /><strong style="color:#6c6c6c;font-size:12px">set new node text (HTML allowed)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">itemId - identificator of node</li><li type="circle">newLabel - node text</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnCheckHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called before checkbox checked/unchecked</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node selected</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnDblClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node double clicked</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnOpenHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called before tree node opened/closed</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setStdImages(image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">set default images for nodes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<li type="circle">a0 - image for node without childrens;</li><li type="circle">a1 - image for closed node;</li><li type="circle">a2 - image for opened node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setSubChecked(itemId,state)<br /><strong style="color:#6c6c6c;font-size:12px">change state of node's checkbox and all childnodes checkboxes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<li type="circle">itemId - target node identificator</li><li type="circle">state - checkbox state</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setUserData(itemId,name,value)<br /><strong style="color:#6c6c6c;font-size:12px">set user data for target node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<li type="circle">itemId - target node identificator</li><li type="circle">name - key for user data</li><li type="circle">value - user data</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setXMLAutoLoading(filePath)<br /><strong style="color:#6c6c6c;font-size:12px">enables dinamic loading from XML mode</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<li type="circle">filePath - name of script returning XML;</li><span /></div><span /></div>

File diff suppressed because one or more lines are too long

View File

@ -6,41 +6,26 @@
</head>
<body>
<div style="position:absolute;right:20"><a href="javascript:void(0)" onclick="expandAll(true)">expand</a>&nbsp;<a href="javascript:void(0)" onclick="expandAll(false)">collaps</a></div>
<script>
function openFull(el){
el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
}
function expandAll(fl){
var elAr = document.getElementsByTagName("DIV");
for(var i=2;i<elAr.length;i++){
if(elAr[i].className=='block'){
if(fl)
elAr[i].style.display = "";
else
elAr[i].style.display = "none";
}
}
}
</script>
<style>
body {font-size:14px;line-height:18px;}
.{font-family:arial;}
h2 {cursor:pointer;font-size:16px;margin-left:10px;line-height:10px}
h3 {cursor:pointer;font-weight:normal;color:gray;text-decoration:underline;line-height:10px}
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:30px;}
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 onclick="openFull(this)">dhtmlXTree Guide and Samples</h2>
<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">
<!--- --->
<h3 onclick="openFull(this)">Main features</h3
><div style="display:show" 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>
@ -54,10 +39,12 @@
<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>
<h3 onclick="openFull(this)">Supported browsers</h3
><div style="display:show" class="block">
<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>
@ -65,50 +52,50 @@
<li>Opera (Xml loading depends on browser version)</li>
</div>
<h3 onclick="openFull(this)">Working with dhtmlXTree</h3
<h3 >Working with dhtmlXTree</h3
><div style="display:show" class="block">
<!--- Initialize object on page --->
<h4 onclick="openFull(this)">Initialize object on page</h4
><div style="display:none" class="block">
<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</li><br>
<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 --->
<h4 onclick="openFull(this)">Set Event Handlers</h4
><div style="display:none" class="block">
<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.setOnDragHandler(onDrop);//set function object to call on drop
tree.setOnClickHandler(onNodeSelect);//set function object to call on node select
tree.setOnOpenHandler(onOpen,state);//set function to call on open/close node
tree.setOnDblClickHandler(onDblClick);//set function to call on dbl click
//see other available event handlers in API documentation
function onNodeSelect(nodeId){
...
}
</script>
</XMP>
<li>Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)</li>
<li>Dropped node ID and new parent node ID will be passed to function specified as argument for setDragFunction(funcObj)</li>
<li>node ID and node state will be passed to the function specified as argument for setOpenAction(funcObj,state)</li>
<li>node ID will be passed to the function specified as argument for setDblClickAction(funcObj)</li>
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 --->
<h4 onclick="openFull(this)">Adding nodes with Script</h4
><div style="display:none" class="block">
<a name="scriptadd"><h4 >Adding nodes with Script</h4
></a><div class="block">
<XMP>
<script>
tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
@ -126,13 +113,13 @@
<li type="circle">CHECKED - checkbox is checked (if exists)</li>
</div>
<!--- Using XML --->
<h4 onclick="openFull(this)">Loading data with XML</h4
><div style="display:none" class="block">
<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();//load root level from 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>
@ -150,6 +137,18 @@ XML Syntax:
<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>&lt;tree&gt;</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>
@ -158,23 +157,29 @@ XML Syntax:
<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 (0/1)</li>
<li>open - show node opened (0/1)</li>
<li>call - call function on select(0/1)</li>
<li>checked - check checkbox if exists(0/1)</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>
To set userdata directly within XML use <strong>&lt;userdata&gt;</strong><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>&lt;userdata&gt;</strong><br>
It has just one parameter: <br>
<li>name</li><br>
and value to specify userdata value
</div>
<!--- Setting custom icons to nodes --->
<h4 onclick="openFull(this)">Setting custom icons to nodes</h4
><div style="display:none" class="block">
<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>
@ -200,17 +205,18 @@ XML Syntax:
<li>im2 - image for closed node with children</li>
</div>
<!--- Dynamical loading --->
<h4 onclick="openFull(this)">Building dynamic tree</h4
><div style="display:none" class="block">
<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 <em>"Loading data with XML"</em>
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>
<h4 onclick="openFull(this)">Manipulating nodes</h4
><div style="display:none" class="block">
<a name="nodesman"><h4 >Manipulating nodes</h4
></a><div class="block">
A few examples of manipulating node with tree object methods:
<XMP>
<script>
@ -226,12 +232,286 @@ XML Syntax:
</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 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 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>
<h3 onclick="openFull(this)">Cold Fusion Tag for dhtmlXTree</h3
><div style="display:none" class="block">
<a name="cftag"><h3 >Cold Fusion Tag for dhtmlXTree</h3
></a><div class="block">
<XMP>
<cf_dhtmlXTree
name="tree"

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 B

View File

@ -2,54 +2,13 @@
<html>
<head>
<title>DHTML Tree SDK</title>
<title>dhtmlxTree v.1.2 SDK</title>
</head>
<style>
td.menu, td.menu a{
font-family:arial;
font-size:12px;
margin-left:10px;
text-decoration:none;
color:white;
}
.{font-family:arial;}
h2 {cursor:pointer;font-size:16px;margin-left:10px;line-height:10px}
h3 {cursor:pointer;font-weight:normal;color:gray;text-decoration:underline;line-height:10px}
div.block {margin-left:30px;}
#contentdiv {padding:10px;}
</style>
<body scroll="no" bgcolor="#2795d3">
<table width="100%" height="99%" cellspacing="0">
<tr>
<td colspan="2" height="20" style="font-size:20px;font-family:arial;font-weight:bold;color:#9ad8fa;">
dhtmlXTree v.1.1 SDK
</td>
</tr>
<tr>
<td class="menu" xstyle="border-bottom:1px solid black">
<a href="guide.html" target="contentframe">guide and code samples</a>
<a href="http://www.scbr.com/docs/products/dhtmlxTree/" target="contentframe">tree samples</a>
</td>
<td height="20" class="menu" align="right" xstyle="border-bottom:1px solid black">
<em>api methods:</em>
<a href="tgroup.html" target="contentframe">grouped by type</a>
<a href="ogroup.html" target="contentframe">grouped by object</a>
<a href="alpha.html" target="contentframe">alphabeticaly sorted</a>
</td>
</tr>
<tr>
<td colspan="2">
<iframe src="guide.html" name="contentframe" style="background-color:white;border-top:1px solid #6495ed;" height="100%" width="100%" frameborder="0"></iframe>
</td>
</tr>
</table>
<small style="font-size:10px"><a href="http://www.scand.com" style="text-decoration:none;color:white">&copy;Scand LLC, 2004</a></small>
<!-- frames -->
<frameset cols="300px,*">
<frame name="toc" src="toc.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0">
<frame name="content" src="guide.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
</body>
</html>

View File

@ -0,0 +1,309 @@
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 11">
<meta name=Originator content="Microsoft Word 11">
<link rel=File-List href="Dynamical%20loading_files/filelist.xml">
<link rel=Edit-Time-Data href="Dynamical%20loading_files/editdata.mso">
<title>Dynamical loading means loading data on request</title>
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;
text-underline:single;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;
text-underline:single;}
span.GramE
{mso-style-name:"";
mso-gram-e:yes;}
@page Section1
{size:595.3pt 841.9pt;
margin:56.7pt 42.5pt 56.7pt 85.05pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;}
div.Section1
{page:Section1;}
/* List Definitions */
@list l0
{mso-list-id:483744830;
mso-list-template-ids:435879032;
mso-list-style-name:"Current List2";}
@list l0:level1
{mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:12.0pt;
mso-bidi-font-size:12.0pt;
mso-ascii-font-family:Arial;
mso-hansi-font-family:Arial;
color:blue;
mso-ansi-font-weight:bold;}
@list l0:level2
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:1.0in;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level3
{mso-level-number-format:roman-lower;
mso-level-tab-stop:1.5in;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level4
{mso-level-tab-stop:2.0in;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level5
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:2.5in;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level6
{mso-level-number-format:roman-lower;
mso-level-tab-stop:3.0in;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level7
{mso-level-tab-stop:3.5in;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level8
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:4.0in;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level9
{mso-level-number-format:roman-lower;
mso-level-tab-stop:4.5in;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l1
{mso-list-id:849370803;
mso-list-template-ids:1733444914;
mso-list-style-name:"Spec List";}
@list l1:level1
{mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:14.0pt;
mso-ascii-font-family:Arial;
mso-hansi-font-family:Arial;
mso-ansi-font-weight:bold;}
@list l1:level2
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:1.0in;
mso-level-number-position:left;
text-indent:-.25in;}
@list l1:level3
{mso-level-number-format:roman-lower;
mso-level-tab-stop:1.5in;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l1:level4
{mso-level-tab-stop:2.0in;
mso-level-number-position:left;
text-indent:-.25in;}
@list l1:level5
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:2.5in;
mso-level-number-position:left;
text-indent:-.25in;}
@list l1:level6
{mso-level-number-format:roman-lower;
mso-level-tab-stop:3.0in;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l1:level7
{mso-level-tab-stop:3.5in;
mso-level-number-position:left;
text-indent:-.25in;}
@list l1:level8
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:4.0in;
mso-level-number-position:left;
text-indent:-.25in;}
@list l1:level9
{mso-level-number-format:roman-lower;
mso-level-tab-stop:4.5in;
mso-level-number-position:right;
text-indent:-9.0pt;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
-->
</style>
</head>
<body lang=DE link=blue vlink=purple style='tab-interval:35.4pt'>
<h1>Dynamical Loading in dhtmlxTree v.1.x</h1>
<div class=Section1>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'>Dynamical loading means loading data on request. You
can split your data into parts by levels and decrease loading time this way.
For example initial xml document will be as follows:<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'>
<img width=562 height=161 src="imgs/image001.jpg"></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'>Just add parameter child=”1” to all nodes which have
dependent elements (children) and child=”0” to all nodes without children.<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'><o:p>&nbsp;</o:p></span></p>
<p class=MsoNormal><span class=GramE><span lang=EN-GB style='font-size:10.0pt;
font-family:Arial;mso-ansi-language:EN-GB'>&lt;?xml</span></span><span
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'>
version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?&gt;<o:p></o:p></span></p>
<p class=MsoNormal style='text-indent:35.4pt'><span lang=EN-GB
style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'>&lt;tree
id=”0”&gt;<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'>&lt;<span
class=GramE>item<span style='mso-spacerun:yes'>  </span>text</span>=&quot;Surveillance&quot;
id=&quot;<span style='color:red'>a1</span>&quot; im0=&quot;book.gif&quot;<span
style='color:red'>child=”1”</span>/&gt;<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'>&lt;item
…/&gt;<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'>…<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'>&lt;item
…/&gt;<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'>&lt;item
text=”Low income countries” id=”a333” im0=”book_titel.gif” …<span
style='color:red'> child=”0”</span>&gt;<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'><span style='mso-tab-count:1'>            </span>&lt;/tree&gt;<span
style='mso-tab-count:1'> </span><o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'><o:p>&nbsp;</o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'><o:p>&nbsp;</o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'><o:p>&nbsp;</o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'>As dynamical loading needs to process incoming <span
class=GramE>url</span> parameters to work really useful, it would be good to
use some server side programming language like ASP, ColdFusion, JSP or any
other. This is necessary on next stage.<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'><o:p>&nbsp;</o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'>If you use XML for building the tree, then you already
used the method<o:p></o:p></span></p>
<p class=MsoNormal><span class=GramE><span lang=EN-GB style='color:blue;
mso-ansi-language:EN-GB'>tree.setXMLAutoLoading(</span></span><span lang=EN-GB
style='color:blue;mso-ansi-language:EN-GB'>url)<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'>When user trying to open node with child=”1” tree
looks for data on client side first if no data found, then it goes to server
using URL specified in method mentioned above with id of node added to it,
like: <a href="http://127.0.0.1/myTree/tree.cfm?id=a1"
title="http://127.0.0.1/myTree/tree.cfm?id=a1"><span style='font-family:"Times New Roman";
mso-bidi-font-family:Arial'>http://127.0.0.1/myTree/tree.cfm?id=a1</span></a>,
where “a1” is id of the node which should be opened. So, here you need a server
side language to process incoming id parameter and to put just required part of
XML into response (in our case the xml contains next level of a1 node):<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'><o:p>&nbsp;</o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'><span style='mso-tab-count:1'>            </span><span
class=GramE>&lt;?xml</span> version=&quot;1.0&quot;
encoding=&quot;iso-8859-1&quot; ?&gt;<o:p></o:p></span></p>
<p class=MsoNormal style='text-indent:35.4pt'><span lang=EN-GB
style='font-size:10.0pt;font-family:Arial;color:red;mso-ansi-language:EN-GB'>&lt;tree
id=”a1”&gt;<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'>&lt;item
text=&quot;Bilateral surveillance&quot; id=&quot;a2&quot;
im0=&quot;book.gif&quot; im1=&quot;books_open.gif&quot;
im2=&quot;books_close.gif&quot; <span style='color:red'>child=”1”</span>/&gt;<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'>&lt;item
…/&gt;<o:p></o:p></span></p>
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'><o:p>&nbsp;</o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'><span style='mso-tab-count:1'>            </span>&lt;/tree&gt;<span
style='mso-tab-count:1'> </span><o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'><o:p>&nbsp;</o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'>The same should be repeated for each level and each
node that has children. If you xml contains data from Database, it would be
much better to generate xml on request directly from db otherwise youd
better use the following way to reduce the number of parts:<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'><o:p>&nbsp;</o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
mso-ansi-language:EN-GB'>You can split your xml document in any number of parts
(maximum all levels, minimum - 1). For example you can load not only next
level of children for <i style='mso-bidi-font-style:normal'>a1</i>, but the
whole branch started from the level next to <i style='mso-bidi-font-style:normal'>a1.
</i>In this<i style='mso-bidi-font-style:normal'> </i>case initial loading of
the tree will be rather fast, as you load just one level, then if user opens
some node, the whole branch will be loaded (but not the whole tree), <span
class=GramE>so</span> in any way it is much faster than load the whole tree on
start.<o:p></o:p></span></p>
<p class=MsoNormal><span lang=EN-GB style='mso-ansi-language:EN-GB'><o:p>&nbsp;</o:p></span></p>
</div>
</body>
</html>

View File

@ -0,0 +1,291 @@
<div style="position:absolute;left:80%;background-color:white;right:20;width:150;">
<a onclick="expandAll(true)" href="javascript:void(0)">expand</a>|<a onclick="expandAll(false)" href="javascript:void(0)">collaps</a>
</div>
<script>
function openFull(el){
el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
}
function expandAll(fl){
var elAr = document.getElementsByTagName("DIV");
for(var i=1;i<elAr.length;i++){
if(elAr[i].style.display=='none' || elAr[i].block_fl){
elAr[i].block_fl = true;
if(fl)
elAr[i].style.display = "";
else
elAr[i].style.display = "none";
}
}
}
</script>
<style>
.{font-family:arial;}
h2 {cursor:pointer;font-size:16px;margin-left:10px;line-height:10px}
h3 {cursor:pointer;font-weight:normal;color:gray;text-decoration:underline;line-height:10px}
div.block {margin-left:30px;}
xmp{color:green;background-color:lightgrey;padding:3px;}
</style>
<h2 onclick="openFull(this)">F.A.Q.</h2>
<div onclick="openFull(this)" style="display:block" class="block">
<a name="kb_faq_lic"></a><h3>Licensing</h3></a>
</div>
<div style="display:;margin-left:5px;margin-top:2px;">
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>May I use dhtmlxTree Standard Edition in my commercial projects for free?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">No. To use any edition in commercial project you need to purchase a Commercial or Enterprise License.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>How much does the professional version cost? Is it included with the commercial license?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">You'll get Professional Edition when you purchase Commercial ($99) or Enterprise ($399) License.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>What is the difference between Commercial and Enterprise Licenses?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">There are two main differences:
<li>According to Enterprise license you may use dhtmlxTree in any number of your projects, whereas Commercial License allows using dhtmlxTree in one project per license</li>
<li>Supporting period (as well as period of free upgrade) is 1 month for Commercial and 1 year for Enterprise License.</li></div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>How can I get Professional Edition of dhtmlxTree?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">To get Professional Edition of dhtmlxTree you need to purchase Commercial or Enterprise License. Right after that you'll get Professional Edition together with additional sample files by email.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Are the "pro" features available in the file downloaded from the site for evaluation, or do we have to buy a different file to try it out?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">You can download only Standard Edition from the site. If you want to evaluate Professional Edition please write us - info@scbr.com</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Will I get commented not obfuscated sources together with Professional Edition?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Is there some special documentation available with Professional Edition?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">No. There is only one variant of documentation. All methods specific for Professional Edition marked in documentation with red colored text "Professional" or "Commercial". </div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>May I modify dhtmlxTree and use modified files in my project?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes you may. At the same time according to the License Scand LLC remains the owner of all modifications in the code.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>How to buy dhtmlxTree License?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Please send email to info@scbr.com and you'll get necessary instructions right away.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>May I distribute dhtmlxTree as a part of my application? What License do I need for this? Should I buy additional License for each copy of my application?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">You may distribute dhtmlxTree as a part of you application if this application is not competitor to dhtmlxTree. You can use either Commercial or Enterprise License. Only one license necessary for one application - irregardless to number of copies sold.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>My licensing question regards including your dhtmlxtree code in a commercial product which will be redistributed and run on clients' machines. I'm curious whether this would require a license on each client machine, or whether my company would simply need to license the code once for inclusion in the code base.</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Only once.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Can we modify dhtmlxTree code and/or change some functionalities in order to match our requirements.</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Modifications to the software are allowed, and you may distribute it as a part of your application, but distribution of the modified software as a standalone component or as a part of concurrent software is forbidden. </div>
</div>
<div onclick="openFull(this)" style="display:block" class="block">
<a name="kb_faq_perf" id="kb_faq_perf"><h3>Performance. Dynamical Loading</h3></a>
</div>
<div style="display:;margin-left:5px;margin-top:2px;">
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>How can I load xml dynamically, so that the loading gets done more quickly?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">
As you know dhtmlXTree supports dynamical loading for such purposes. Dynamical loading means loading data on request. To make tree do this use method <em>tree.setXMLAutoLoading(url)</em><br>
In this case your xml should contain only necessary nodes. For example initial xml should contain only nodes of top level. To let the tree know that some node has children, use child="1". Like this:
<xmp>
<tree id="0">
<item text="Surveillance" id="a1" im0="book.gif" child="1"/>
...
<item text="Low income countries" id="a333" im0="book_titel.gif" child="0"/>
</tree>
</xmp>
When user trying to open node which has children, tree looks for data on client side first - if no data found, then it goes to server using URL specified in method mentioned above with ID of node added to it, like: http://127.0.0.1/myTree/tree.cfm?id=a1, where "a1" is ID of the node which should be opened. Using this ID you can create another xml, which contains only child nodes of opening node. Like this:
<xmp>
<tree id="a1">
<item text="Bilateral surveillance" id="a2" />
...
</tree>
</xmp>
As dynamical loading needs to process incoming url parameters and generate xml file content based on it to work really useful, it would be good to use some server side programming language like ASP, ColdFusion, JSP, PHP or any other for this.
</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Is there any solution for increasing tree performance when it contains hundreds or thousands of nodes?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">There are two ways:<br>
<li>Dynamical loading. In this case tree contains only nodes which were already opened and it doesn't really matters how much nodes are in the datasource .</li>
<li>Advanced XML Processing (available in Professional edition). In this case the whole xml documents loaded on client side, but only nodes which are visible are created in tree. This increases performance and decreases loading time.</li></div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>What happens is that the nodes get drawn as siblings of the root and not as children of the expanded node.</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">The reason is in xml file. It always contains the same ID of parent element: <xmp><tree id="every-time-id-of-super-root-level"></xmp>, but it should be <xmp><tree id="id-of-node-that-was-expanded"></xmp></div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Dynamical Loading always loads the whole tree and adds it to existing one.</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">XML file for initial loading should contain ONLY top level of the tree, xml that loads children should contain ONLY necessary nodes - so in most cases it generated with some server side routine using incoming "id" of parent node (node that was opened) which is passed to the file while calling it.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>I've created simple xml containig 10 000 nodes and ... after 30second IE almost breaks down with a warning</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">As performance is a weak place of DHTML, we implemented two ways of processing big trees. First is dynamical loading - xml loaded from server by parts (on request). This feature available in all editions. Second is "advanced xml processing" - xml loaded at once, but processed by parts on request. This feature available in pro edition only.</div>
</div>
<div onclick="openFull(this)" style="display:block" class="block">
<a name="kb_faq_dnd" id="kb_faq_dnd"><h3>Drag-n-drop, Nodes ordering</h3></a>
</div>
<div style="display:;margin-left:5px;margin-top:2px;">
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Is there any way to rearrange the nodes without reloading the tree?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">You can rearrange nodes with script (moveItem method) or using drag-n-drop (drop-as-sibling type)</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Can we use different drag-n-drop types for different nodes? For example we need drop-as-sibling for files and drop-as-child for folders.</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">You can switch the drop mode on-the-fly. Using onDrag or onDrop event handlers you can manage the active mode based on some specificity of node which is dragged or dropped. To identify the type of the node you can use userData property of the node, which can be set with xml or with javascript: setUserData(itemId,name,value). Any time you can get the value of any block of user data of any node using getUserData(id,name)</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Can I drag and drop either the node's id or value into the html text input field?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes, this is possible. Any page control can be set as "landing zone". Here is an example:
<xmp>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<input type="text" width="120px" id="sInput">
<script>
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setImagePath("../imgs/");
//user defined drag and drop control with event handlers inside
function s_control(){
//action occures on drag
this._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
targetHtmlObject.style.backgroundColor="";
targetHtmlObject.value=sourceHtmlObject.parentObject.label;
}
//action occures on drag moved in landing zone
this._dragIn=function(htmlObject,shtmlObject){
htmlObject.style.backgroundColor="#fffacd";
return htmlObject;
}
//action occures on drag moved out landing zone
this._dragOut=function(htmlObject){
htmlObject.style.backgroundColor="";
return this;
}
}
//set input control as "landing zone"
tree.dragger.addDragLanding(document.getElementById('sInput'), new s_control);
</script>
</xmp>
</div>
</div>
<div onclick="openFull(this)" style="display:block" class="block">
<a name="kb_faq_api" id="kb_faq_api"><h3>API, Initialization</h3></a>
</div>
<div style="display:;margin-left:5px;margin-top:2px;">
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>It seems that your tree does not make a distinction between "files" and "folders". If I drag a "file" onto another "file", it becomes a "folder".</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Generally the tree can only output data, it knows nothing about files or folders - you need to supply it with additional data and manage its behavior with script to get functionality you need.<br>
First you need to specify what nodes are files and what are folders using UserData (invisible data blocks that you can assign to any node). In your xml file use syntax like this:
<xmp>
<tree id="0">
<item text="My Folder" id="my_folder" child="1" ...>
<userdata name="folder">1</userdata>
<item text="My File" id="my_file" child="0" ...>
<userdata name="folder">0</userdata>
</item>
</item>
...
</tree>
</xmp>
In script you can manipulate this data using script methods:
<em>tree.getUserData(nodeId,key)</em>, for example:
<xmp>
function doOnSomeEvent(id){
If(yourTree.getUserData(id,"folder")=='0')
alert("This was file")
else
alert("This was folder")
}
</xmp>
This way you can cancel drop event for files:
<xmp>
tree.setDragFunction(doOnDrop);
function doOnDrop(nodeId,parentId){
if(tree.getUserData(parentId,"folder")=="0")
return false;
}
</xmp>
For more details about eventHandlers see "Set Event Handlers" chapter of Tree documentation.
</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>How to collapse all nodes in the tree.</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">To collapse all root nodes (nodes of first level) in the tree you need to close them all one by one:
<xmp>
function closeAllRoots(){
var rootsAr = tree.getSubItems(0).split(",")
for(var i=0;i<rootsAr.length;i++){
tree.closeAllItems(rootsAr[i])
}
}
</xmp>
where "0" is ID of Super Root level.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Is there a way to get a modified tree back to xml?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes, you can use serializeTree() method for this. It returns xml string. </div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>How can I have different nodes call different functions when clicked?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">You can use userData to keep function name for each node. In onclick event handler get this name and evaluate it.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>How to create nodes in tree and save them to db at the same time?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">1. user clicks button "add new item" (or whatever you have for this) <br>
2. create node in the tree with some unique identifier, like "newnodeid" and label like "New" or something. (Do not forget to call open node method before this if you use dynamical loading, inserting node as child and parent node was never opened before) <br>
3. move selection to the node with calling onclick function (last parameter should be true)<br>
4. determine that node id is "newnodeid" and load the form for creating new item. <br>
5. when form was submitted and data was saved on server return the page with added javascript block which should rename selected node according to entered name or whatever you need as a node label, set new node id - according to created record id (or whatever you have as node ids). <br>
6. Delete and update should be done very likely. <br>
7. Do not forget the main principle - update the tree after database was updated. </div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Can we limit the "maximum depth" of the tree to disallow child-dropping beyond a certain number of sub-nodes?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">You can get the level of the node in onDrop event handler and cancel drop if it exceeds maximum allowed.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Can we use HTML as a node label?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Serialization of the modified trees - how does that work?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Using <em>serializeTree()</em> method you can get back tree structure as xml string. In version 1.1 it serializes node text, icons, state, order, selection. Version 1.2 will support serialization of userData, checkboxes.</div>
</div>
<div onclick="openFull(this)" style="display:block" class="block">
<a name="kb_faq_else" id="kb_faq_else"><h3>Other Questions</h3></a>
</div>
<div style="display:;margin-left:5px;margin-top:2px;">
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Is there any support for cookies?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes, Professional Edition has the ability to save tree state into cookies and restore it. There are two types of this functionality:
<li>save the whole tree (not good for large trees as cookies has size limit)</li>
<li>save only opened/closed/selected state.</li></div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Is there any ability to use context menu (right-click menu) with dhtmlxTree </li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Context menu implemented into dhtmlxTree v.1.1 Professional Edition - the content of the menu can be defined with xml or javascript and can be managed with javascript.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>What is Super Root in the dhtmlxTree?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">When you create tree from constructor function, there is 4th parameter which represents the ID of Super Root element. Usually it is "0". Super Root is invisible level of the tree - the parent element for elements of first visible level ("root level").</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>Is it possible to use multiple-lines for a dhtmlxTree node?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes, there is such possibility in Professional Edition. The only limitation for current version - tree should not have dotted lines which visually link nodes (they should be turned off using enableTreeLines(false)) - otherwise appearance will be damaged.</div>
<div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
<li>I use various dhtmlX components on one page - tree, toolbar, menu. All of them have dhtmlxCommon.js file. Is it the same for all of them?</li>
</div>
<div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes, it is the same and you can get it either from tree package or from menu, toolbar - any dhtmlX component. If you have different versions of this file - would be better to use most recent.</div>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View File

@ -0,0 +1,13 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>

View File

@ -23,102 +23,194 @@
div.block {margin-left:30px;}
</style><h2 onclick="openFull(this)">dhtmlXTreeObject object API</h2><div class="block" style="display:show;"><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">changeItemId(itemId,newItemId)<br /><strong style="color:#6c6c6c;font-size:12px">change item id</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - old node id</li><li type="circle">newItemId - new node id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">clearCut()<br /><strong style="color:#6c6c6c;font-size:12px">clear cut</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">closeAllItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">collapse target node and all child nodes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">clearSelection(itemId)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">unselect item in tree</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - reserved</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">closeAllItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">collapse target node and all child nodes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">closeItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">collapse node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteChildItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">delete all child of node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node identificator</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteItem(itemId,selectParent)<br /><strong style="color:#6c6c6c;font-size:12px">delete node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node identificator</li><li type="circle">selectParent - If true parent of deleted item get selection, else no selected items leaving in tree.</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">doCut()<br /><strong style="color:#6c6c6c;font-size:12px">mark selected item as cutted</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteChildItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">delete all children of node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">deleteItem(itemId,selectParent)<br /><strong style="color:#6c6c6c;font-size:12px">delete node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><li type="circle">selectParent - If true parent of deleted item get selection, else no selected items leaving in tree.</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">disableCheckbox(itemId,mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">disable checkbox</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - Id of tree item</li><li type="circle">mode - 1 - on, 0 - off;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">doCut()<br /><strong style="color:#6c6c6c;font-size:12px">mark selected item as cutted</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">doPaste(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">insert previously cutted branch</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of new parent node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableAutoSavingSelected(mode)
[<span style="color:red;">Commercial</span>]
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of new parent node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableActiveImages(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable active images (clickable and dragable)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableAutoSavingSelected(mode,cookieName)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable autosaving selected node in cookie</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">mode - true/false</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableCheckBoxes(mode)<br /><strong style="color:#6c6c6c;font-size:12px">hide checkboxes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">mode - true/false</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableAutoTooltips(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable auto tooltips (node text as tooltip)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableCheckBoxes(mode)<br /><strong style="color:#6c6c6c;font-size:12px">hide checkboxes (all checkboxes in tree)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enabled/disabled</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableContextMenu(menu)
[<span style="color:red;">Commercial</span>]
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable context menu</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">menu - menu object</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableDragAndDrop(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable drag-and-drop</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enabled/disabled</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableDragAndDropScrolling(mode)
[<span style="color:red;">Commercial</span>]
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">menu - dhtmlXmenu object</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableDragAndDrop(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable drag-and-drop</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enabled/disabled [ can be true/false/temporary_disabled - last value mean that tree can be D-n-D can be switched to true later ]</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableDragAndDropScrolling(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable auto scrolling while drag-and-drop</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enabled/disabled</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableMultiLineItems(width)
[<span style="color:red;">Commercial</span>]
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enabled/disabled</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableHighlighting(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable item highlighting (item text highlited on mouseover)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableMercyDrag(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable drag without removing (copy instead of move)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableMultiLineItems(width)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable multi line items</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">width - text width, if equls zero then use single lines items;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableSmartXMLParsing(mode)
[<span style="color:red;">Commercial</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable smart XML parsing mode</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">width - text width, if equls zero then use single lines items;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableSmartCheckboxes(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable smart checkboxes ,true by default (auto checking childs and parents for 3-state checkboxes)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableSmartXMLParsing(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable smart XML parsing mode (usefull for big, well structured XML)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableThreeStateCheckboxes(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enable three state checkboxes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableTreeImages(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enable tree images</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableTreeLines(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enableTreeLines(mode);</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enable/disable tree lines</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">findItem(searchStr,direction,top)<br /><strong style="color:#6c6c6c;font-size:12px">find tree item by text, select and focus it</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">searchStr - search text</li><li type="circle">direction - 0: top -&gt; bottom; 1: bottom -&gt; top</li><li type="circle">top - 1: start searching from top</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">findItemIdByLabel(searchStr,direction,top)<br /><strong style="color:#6c6c6c;font-size:12px">find tree item by text</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - 1 - on, 0 - off;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableTreeLines(mode)<br /><strong style="color:#6c6c6c;font-size:12px">enable/disable tree lines (parent-child threads)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - enable/disable tree lines</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">findItem(searchStr,direction,top)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">find tree item by text, select and focus it</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">searchStr - search text</li><li type="circle">direction - 0: top -&gt; bottom; 1: bottom -&gt; top</li><li type="circle">top - 1: start searching from top</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">findItemIdByLabel(searchStr,direction,top)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">find tree item by text</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">searchStr - search text</li><li type="circle">direction - 0: top -&gt; bottom; 1: bottom -&gt; top</li><li type="circle">top - 1: start searching from top</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">focusItem(itemId)
[<span style="color:red;">Commercial</span>]
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">focus item in tree</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - item Id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllChecked()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with checked checkboxes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllCheckedBranches()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with checked checkboxes, and parent of that checkboxes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - item Id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllChecked()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with checked checkboxes, separated by comma</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllCheckedBranches()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with checked and third state checkboxes, separated by comma</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllFatItems()<br /><strong style="color:#6c6c6c;font-size:12px">Returns the list of all items which has child nodes, separated by commas.</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllLeafs()<br /><strong style="color:#6c6c6c;font-size:12px">Returns the list of all items which doesn't have child nodes.</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllPartiallyChecked()<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with third state checkboxes, separated by comma</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllSubItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">Returns the list of all children items from all next levels of tree, separated by commas.</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getChildItemIdByIndex(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">retun child node identificator by index</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - parent node identificator</li><li type="circle">index - index of child node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemColor(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">get node color</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemIdByIndex(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">retun node identificator by index</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node identificator</li><li type="circle">index - index of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemText(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return node text</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getLevel(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return node level</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getParentId(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return parent node identificator</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSelectedItemId()<br /><strong style="color:#6c6c6c;font-size:12px">retun selected node identificator</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getAllUnchecked(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return list of identificators of nodes with unchecked checkboxes, separated by comma</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getChildItemIdByIndex(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">retun child node id by index</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - parent node id</li><li type="circle">index - index of child node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemColor(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">get node color</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemIdByIndex(itemId,index)<br /><strong style="color:#6c6c6c;font-size:12px">retun node id by index</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><li type="circle">index - index of node, 0 based</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItemText(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return item text</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getLevel(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return node level (position in hierarchy)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getOpenState(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return open/close state</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getParentId(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return parent item id</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSelectedItemId()<br /><strong style="color:#6c6c6c;font-size:12px">retun selected item id</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSelectedItemText()<br /><strong style="color:#6c6c6c;font-size:12px">retun selected node text</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getSubItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">Returns the list of all children items from the next level of tree, separated by commas.</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getUserData(itemId,name)<br /><strong style="color:#6c6c6c;font-size:12px">return user data from target node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node identificator</li><li type="circle">name - key for user data</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">hasChildren(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return count of childrens</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewItem(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new child node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">parentId - parent node id</li><li type="circle">itemId - new node id</li><li type="circle">itemText - new node text</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node childs flag (for dynamical trees) (optional)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewNext(parentItemId,itemId,itemName,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new node next to specified</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">parentItemId - node id</li><li type="circle">itemId - new node id</li><li type="circle">itemName - new node text</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node childs flag (for dynamical trees) (optional)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">isItemChecked(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return state of nodes's checkbox</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node identificator</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadOpenStates(name)
[<span style="color:red;">Commercial</span>]
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getUserData(itemId,name)<br /><strong style="color:#6c6c6c;font-size:12px">return user data from target node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node id</li><li type="circle">name - key for user data</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getXMLState()
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">return current state of XML loading</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">hasChildren(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return number of childrens</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewChild(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new node as a child to specified with parentId</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">parentId - parent node id</li><li type="circle">itemId - new node id</li><li type="circle">itemText - new node label</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node children flag (for dynamical trees) (optional)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewItem(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new node as a child to specified with parentId</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">parentId - parent node id</li><li type="circle">itemId - new node id</li><li type="circle">itemText - new node text</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node childs flag (for dynamical trees) (optional)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">insertNewNext(itemId,newItemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)<br /><strong style="color:#6c6c6c;font-size:12px">create new node next to specified</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><li type="circle">newItemId - new node id</li><li type="circle">itemText - new node text</li><li type="circle">itemActionHandler - function fired on node select event (optional)</li><li type="circle">image1 - image for node without childrens; (optional)</li><li type="circle">image2 - image for closed node; (optional)</li><li type="circle">image3 - image for opened node (optional)</li><li type="circle">optionStr - options string (optional)</li><li type="circle">childs - node childs flag (for dynamical trees) (optional)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">isItemChecked(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return state of nodes's checkbox</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadOpenStates(name)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">restore open nodes from cookie</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional,cookie name</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadState(name)
[<span style="color:red;">Commercial</span>]
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">load tree from cookie</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional,cookie name</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXML(file)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml file</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">file - link too XML file</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXMLString(xmlString)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml string</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">xmlString - XML string</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openAllItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand target node and all child nodes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">refreshItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">refresh tree branch from xml</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node, if not defined tree super root used.</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">restoreSelectedItem(name)
[<span style="color:red;">Commercial</span>]
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional,cookie name</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXML(file,afterCall)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml file</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">file - link too XML file</li><li type="circle">afterCall - function which will be called after xml loading</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXMLString(xmlString,afterCall)<br /><strong style="color:#6c6c6c;font-size:12px">load tree from xml string</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">xmlString - XML string</li><li type="circle">afterCall - function which will be called after xml loading</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">moveItem(itemId,mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">move item (inside of tree)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - item Id</li><li type="circle">mode - moving mode (left,up,down)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openAllItems(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand target node and all child nodes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openAllItemsDynamic(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand target node and all child nodes (same as openAllItems, but works in dynamic trees)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">itemId - node id, optional</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">openItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">expand node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">refreshItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">refresh tree branch from xml (XML with description of child nodes rerequested from server)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node, if not defined tree super root used.</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">refreshItems(itemIdList,source)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">refresh specified tree nodes (get XML from server and updat only nodes included in itemIdList)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemIdList - list of node identificators</li><li type="circle">source - server side script</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">restoreSelectedItem(name)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">restore selected item from cookie</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional, cookie name</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">saveOpenStates(name)
[<span style="color:red;">Commercial</span>]
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">save open nodes to cookie</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional,cookie name</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">saveSelectedItem(name)
[<span style="color:red;">Commercial</span>]
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">save selected item to cookie</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional, cookie name</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">saveState(name)
[<span style="color:red;">Commercial</span>]
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">save tree to cookie</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">name - optional, cookie name</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">selectItem(itemId,mode)<br /><strong style="color:#6c6c6c;font-size:12px">select node ( and optionaly fire onselect event)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node identificator</li><li type="circle">mode - If true, script function for selected node will be called.</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">serializeTree()
[<span style="color:red;">Commercial</span>]
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><li type="circle">mode - If true, script function for selected node will be called.</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">serializeTree()
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">return xml description of tree</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setCheck(itemId,state)<br /><strong style="color:#6c6c6c;font-size:12px">change state of node's checkbox</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node identificator</li><li type="circle">state - checkbox state</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setDragBehavior(mode)
[<span style="color:red;">Commercial</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set Drag-And-Drop behavior</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - behavior name (child or sibling)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setDragHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when drag-and-drop event occured</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node id</li><li type="circle">state - checkbox state (0/1/unsure)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setChildCalcHTML( htmlA,htmlB )
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set child calculation prefix and postfix</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">htmlA - postfix ([ - by default)</li><li type="circle">htmlB - postfix (] - by default)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setChildCalcMode( mode )
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set child calculation mode</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - mode name as string . Possible values: child - child, no recursive; leafs - child without subchilds, no recursive; ,childrec - child, recursive; leafsrec - child without subchilds, recursive; disabled (disabled by default)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setDragBehavior(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set Drag-And-Drop behavior (child - drop as chils, sibling - drop as sibling, complex - complex drop behaviour )</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - behavior name (child,sibling,complex)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setDragHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when drag-and-drop event occured</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onDrag<br />Event occured after item was dragged and droped on another item, but before item moving processed.<li type="square">ID of source item</li><li type="square">ID of target item</li><li type="square">if node droped as sibling then contain id of item before whitch source node will be inserted</li><li type="square">source Tree object</li><li type="square">target Tree object</li><br /><em style="color:blue;">Event returns:</em>true - confirm drag-and-drop; false - deny drag-and-drop;</fieldset><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">aFunc - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setDropHandler(func)
[<span style="color:red;">Commercial</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set function called after drag-and-drap event occured</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setImageArrays(arrayName,image1,image2,image3,image4,image5)<br /><strong style="color:#6c6c6c;font-size:12px">enableTreeLines(mode);</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set function called after drag-and-drap event occured</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onDrop<br />Event raised after drag-and-drop processed. Event also raised while programmatic moving nodes.<li type="square">ID of source item</li><li type="square">ID of target item</li></fieldset><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setEscapingMode(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set escaping mode (used for escaping ID in server requests)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - escaping mode ("utf8" for UTF escaping)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setIconSize(newWidth,newHeight,itemId)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set size of gfx icons</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">newWidth - new icon width</li><li type="circle">newHeight - new icon height</li><li type="circle">itemId - item Id, if skipped set default value for all new icons, optional</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setImageArrays(arrayName,image1,image2,image3,image4,image5)<br /><strong style="color:#6c6c6c;font-size:12px">set images used for parent-child threads drawing</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">arrayName - name of array: plus, minus</li><li type="circle">image1 - line crossed image</li><li type="circle">image2 - image with top line</li><li type="circle">image3 - image with bottom line</li><li type="circle">image4 - image without line</li><li type="circle">image5 - single root image</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setImagePath( newPath )<br /><strong style="color:#6c6c6c;font-size:12px">set path to image directory</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">newPath - path to image directory</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemCloseable(itemId,flag)<br /><strong style="color:#6c6c6c;font-size:12px">prevent node from closing</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Node/level control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><li type="circle">flag - if 0 - node can't be closed, else node can be closed</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemColor(itemId,defaultColor,selectedColor)<br /><strong style="color:#6c6c6c;font-size:12px">set node color</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><li type="circle">defaultColor - node color</li><li type="circle">selectedColor - selected node color</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemImage(itemId,image1,image2)<br /><strong style="color:#6c6c6c;font-size:12px">set node images</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><li type="circle">image1 - node without childrens image or closed node image (if image2 specified)</li><li type="circle">image2 - open node image (optional)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemImage2(itemId, image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">set node images</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><li type="circle">image1 - node without childrens image</li><li type="circle">image2 - closed node image</li><li type="circle">image3 - open node image</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemText(itemId,newLabel)<br /><strong style="color:#6c6c6c;font-size:12px">set new node text (HTML allowed)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - identificator of node</li><li type="circle">newLabel - node text</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnCheckHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called before checkbox checked/unchecked</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node selected</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnDblClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node double clicked</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnOpenHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called before tree node opened/closed</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setStdImages(image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">set default images for nodes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><li type="circle">flag - if 0 - node can't be closed, else node can be closed</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemColor(itemId,defaultColor,selectedColor)<br /><strong style="color:#6c6c6c;font-size:12px">set node color</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><li type="circle">defaultColor - node color</li><li type="circle">selectedColor - selected node color</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemContextMenu(itemId,cMenu)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set context menu to individual nodes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><li type="circle">cMenu - context menu object</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemImage(itemId,image1,image2)<br /><strong style="color:#6c6c6c;font-size:12px">set item images</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><li type="circle">image1 - node without childrens image or closed node image (if image2 specified)</li><li type="circle">image2 - open node image (optional)</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemImage2(itemId, image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">set item images</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><li type="circle">image1 - node without childrens image</li><li type="circle">image2 - closed node image</li><li type="circle">image3 - open node image</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemStyle(itemId,style_string)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set individual item style</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - node id</li><li type="circle">style_string - valid CSS string</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemText(itemId,newLabel,newTooltip)<br /><strong style="color:#6c6c6c;font-size:12px">set new node text (HTML allowed)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of node</li><li type="circle">newLabel - node text</li><li type="circle">newTooltip - (optional)tooltip for the node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setListDelimeter(separator)<br /><strong style="color:#6c6c6c;font-size:12px">set list separator (comma by default)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">separator - char or string using for separating items in lists</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnCheckHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called before checkbox checked/unchecked</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onCheck<br />Event raised immideatly after item in tree was checked/unchecked.<li type="square">ID of item which will be checked/unchecked</li><li type="square">Current checkbox state. 1 - item checked, 0 - item unchecked.</li></fieldset><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node selected</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onClick<br />Event raised immideatly after text part of item in tree was clicked, but after default onClick functionality was processed.<li type="square">ID of clicked item</li></fieldset><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnDblClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node double clicked</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onDblClick<br />Event raised immideatly after item in tree was doubleclicked, before default onDblClick functionality was processed.<li type="square">ID of item which was doubleclicked</li><br /><em style="color:blue;">Event returns:</em>true - confirm opening/closing; false - deny opening/closing;</fieldset><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnLoadingEnd(func)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set function called after xml loading/parsing ended</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onXMLLoadingEnd<br />event fired simultaneously with ending XML parsing, new items already available in tree<li type="square">tree object</li></fieldset><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnLoadingStart(func)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">set function called before xml loading/parsing started</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onXMLLoadingStart<br />event fired simultaneously with starting XML parsing<li type="square">tree object</li></fieldset><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnOpenHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called before tree node opened/closed</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onOpen<br />Event raised immideatly after item in tree got command to open/close , and before item was opened//closed. Event also raised for unclosable nodes and nodes without open/close functionality - in that case result of function will be ignored.<li type="square">ID of node which will be opened/closed</li><li type="square">Current open state of tree item. 0 - item has not childs, -1 - item closed, 1 - item opened.</li><br /><em style="color:blue;">Event returns:</em>true - confirm opening/closing; false - deny opening/closing;</fieldset><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnRightClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set function called when tree node selected</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><br /><fieldset><legend>Event</legend><em style="color:blue;">Name:</em>onRightClick<br />Event occured after right mouse button was clicked.<li type="square">ID of clicked item</li></fieldset><em style="color:blue;">Topic(s): </em>Initialization;
Event Handlers;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">func - event handling function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setSerializationLevel(userData,fullXML)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">configure XML serialization</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_xw.js<li type="circle">userData - enable/disable user data serialization</li><li type="circle">fullXML - enable/disable full XML serialization</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setStdImages(image1,image2,image3)<br /><strong style="color:#6c6c6c;font-size:12px">set default images for nodes (must be called before XML loading)</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">a0 - image for node without childrens;</li><li type="circle">a1 - image for closed node;</li><li type="circle">a2 - image for opened node</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setSubChecked(itemId,state)<br /><strong style="color:#6c6c6c;font-size:12px">change state of node's checkbox and all childnodes checkboxes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node identificator</li><li type="circle">state - checkbox state</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setUserData(itemId,name,value)<br /><strong style="color:#6c6c6c;font-size:12px">set user data for target node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node identificator</li><li type="circle">name - key for user data</li><li type="circle">value - user data</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setXMLAutoLoading(filePath)<br /><strong style="color:#6c6c6c;font-size:12px">enables dinamic loading from XML mode</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">filePath - name of script returning XML;</li><span /></div><span /></div>
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node id</li><li type="circle">state - checkbox state</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setUserData(itemId,name,value)<br /><strong style="color:#6c6c6c;font-size:12px">set user data for target node</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - target node id</li><li type="circle">name - key for user data</li><li type="circle">value - user data</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setXMLAutoLoading(filePath)<br /><strong style="color:#6c6c6c;font-size:12px">enables dynamic loading from XML</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">filePath - name of script returning XML;</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setXMLAutoLoadingBehaviour(mode)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">define which script be called on dynamic loading</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Selection control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">mode - id for some_script?id=item_id ; name for some_scriptitem_id, xmlname for some_scriptitem_id.xml</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">showItemCheckbox(itemId,state)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">show/hide checkbox for tree item (work only for individual items, not for all tree )</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Checkboxes/user data manipulation;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of selected item</li><li type="circle">state - checkbox show state : 0/1</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">showItemSign(itemId,state)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">show/hide (+/-) icon (work only for individual items, not for all tree )</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - id of selected item</li><li type="circle">state - show state : 0/1</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">sortTree(nodeId,order,all_levels)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">reorder items in tree</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXTree_sb.js<li type="circle">nodeId - id of top node</li><li type="circle">all_levels - sorting all levels or only current level</li><li type="circle">order - sorting order - ASC or DES</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">updateItem(itemId,name,im0,im1,im2,achecked)
[<span style="color:red;">Professional</span>]
<br /><strong style="color:#6c6c6c;font-size:12px">update item properties</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Appearence control;
<br /><em style="color:blue;">File required:</em>dhtmlXTree.js<li type="circle">itemId - list of node identificators</li><li type="circle">name - list of node identificators, optional</li><li type="circle">im0 - list of node identificators, optional</li><li type="circle">im1 - list of node identificators, optional</li><li type="circle">im2 - list of node identificators, optional</li><li type="circle">achecked - list of node identificators, optional</li><span /></div><span /></div>

View File

@ -0,0 +1,88 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DHTML Tree Special Technics</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:blue;text-decoration:underline;line-height:10px}
h4 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
.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 >DHTML Tree Special Technics</h2>
<div class="block">
<!--- Link functionality --->
<a name="spec_link"><h3 >Links in tree</h3
></a><div style="display:show" class="block">
Xml for the tree:<br>
<xmp>
<tree..>
<item ...>
<userdata name=“myurl“>http://www.google.com</userdata>
<item ...>
<userdata name=“myurl“>http://groups.google.com</userdata>
</item>
</item>
</xmp>
<br>
there is an event handler for click processing:
<xmp>
tree.setOnClickHandler(doOnClick);
function doOnClick(nodeId){
var myUrl = tree.getUserData(nodeId,“myurl“);
window.open(myUrl);// or frames[“someframe“].location.href = myUrl
}
</xmp>
</div>
<!-- -->
<a name="spec_dnd_out"><h3 >Drag-n-drop outside tree</h3
></a><div style="display:show" class="block">
Any page control can be set as “landing zone”. Here is an example:
<xmp>
<div id="treeboxbox_tree" style="width:200;height:200"></div>
<input type="text" width="120px" id="sInput">
<script>
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setImagePath("../imgs/");
//user defined drag and drop control with event handlers inside
function s_control(){
//action occures on drag
this._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
targetHtmlObject.style.backgroundColor="";
targetHtmlObject.value=sourceHtmlObject.parentObject.label;
}
//action occures on drag moved in landing zone
this._dragIn=function(htmlObject,shtmlObject){
htmlObject.style.backgroundColor="#fffacd";
return htmlObject;
}
//action occures on drag moved out landing zone
this._dragOut=function(htmlObject){
htmlObject.style.backgroundColor="";
return this;
}
}
//set input control as “landing zone”
tree.dragger.addDragLanding(document.getElementById('sInput'), new s_control);
</script>
</xmp>
</div>
</div>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,69 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dhtmlxTree v.1.2 SDK TOC</title>
<link rel="STYLESHEET" type="text/css" href="dhtmlXTree.css">
<script src="dhtmlXCommon.js"></script>
<script src="dhtmlXTree.js"></script>
<style>
td.menu, td.menu a{
font-family:arial;
font-size:12px;
margin-left:10px;
text-decoration:none;
color:white;
}
.{font-family:arial;}
h2 {cursor:pointer;font-size:16px;margin-left:10px;line-height:10px}
h3 {cursor:pointer;font-weight:normal;color:gray;text-decoration:underline;line-height:10px}
div.block {margin-left:30px;}
#contentdiv {padding:10px;}
</style>
<script>
var tree;
function loadTree(){
tree=new dhtmlXTreeObject(document.getElementById('toc_tree'),"100%","100%",0);
tree.setImagePath("imgs/");
tree.setOnClickHandler(doOnClick);
tree.enableTreeLines(false);
tree.loadXML("toc.xml")
}
function doOnClick(id){
var fileNm = getFile(id)||"";
if(fileNm!=""){
if(!tree.getUserData(id,"type"))
parent.frames["content"].document.location = fileNm+"#"+id
else
window.open(fileNm+"#"+id)
}
}
function getFile(id){
while(!tree.getUserData(id,"file") && tree.getLevel(id)>0){
id = tree.getParentId(id)
}
return tree.getUserData(id,"file");
}
</script>
</head>
<body onload="loadTree()" bgcolor="#2795d3" style="height:100%;">
<table width="100%" height="100%" cellspacing="0">
<tr>
<td height="20" style="font-size:20px;font-family:arial;font-weight:bold;color:#9ad8fa;">
dhtmlXTree v.1.2 SDK
</td>
</tr>
<tr>
<td>
<div id="toc_tree" style="background-color:white;height:100%;"></div>
</td>
</tr>
<tr>
<td height="20"><a href="http://www.scbr.com/docs/products/dhtmlxTree/index.shtml" style="font-size:10px;color:white;" target="_top">Visit dhtmlxTree home page</a></td>
</tr>
</table>
</body>
</html>

View File

@ -0,0 +1,73 @@
<?xml version='1.0' encoding='iso-8859-1'?>
<tree id="0">
<item text="dhtmlxTree v1.2" open="1" id="root">
<item text="Main Features" id="mf">
<userdata name="file">guide.html</userdata>
</item>
<item text="Supported Browsers" id="browsers">
<userdata name="file">guide.html</userdata>
</item>
<item text="Guide" id="guide" select="1">
<userdata name="file">guide.html</userdata>
<item text="Initialize object on page" id="init"/>
<item text="Loading data with XML" id="xmlload"/>
<item text="Adding nodes with Script" id="scriptadd"/>
<item text="Icons in Tree" id="g_icons"/>
<item text="Setting custom icons to nodes" id="iconscust"/>
<item text="Checkboxes in tree" id="checkbox"/>
<item text="Tooltips" id="tooltip"/>
<item text="Moving nodes" id="move"/>
<item text="Sorting nodes" id="sort"/>
<item text="Dynamical Loading" id="dyntree"/>
<item text="Smart XML Parsing" id="smartxml"/>
<item text="Set Event Handlers" id="handlers"/>
<item text="Drag-and-drop technics" id="dnd"/>
<item text="Drag-and-drop between iframes" id="dndifr"/>
<item text="Increasing Performance" id="guide_perf"/>
<item text="Manipulating nodes" id="nodesman"/>
<item text="Refreshing nodes" id="refresh"/>
<item text="Serialization" id="serialize"/>
<item text="Search functionlity" id="search"/>
<item text="Multiline tree items" id="multiline"/>
<item text="Add Items Counter" id="counter"/>
<item text="Context Menu" id="context_menu"/>
<item text="Cold Fusion Tag for dhtmlXTree" id="cftag"/>
<item text="Error handling in dhtmlXTree" id="error"/>
<!--item text="*.Net Implementation" id="dotnet"/-->
</item>
<item text="API Functions" id="api" open="1">
<item text="Alphabeticaly sorted" id="api_a">
<userdata name="file">alpha.html</userdata>
</item>
<item text="Grouped by Type" id="api_t">
<userdata name="file">tgroup.html</userdata>
</item>
<item text="Grouped by Object" id="api_o">
<userdata name="file">ogroup.html</userdata>
</item>
<!--item text="*Event handlers arguments" id="events_args">
<userdata name="file">events.html</userdata>
</item-->
</item>
<item text="Special Technique" id="spec">
<userdata name="file">special.html</userdata>
<item text="Links in tree" id="spec_link"/>
<item text="Drag-n-drop outside tree" id="spec_dnd_out"/>
<!--item text="*Context Menu" id="spec_cm"/-->
</item>
<item text="Frequently asked questions" id="kb_faq">
<userdata name="file">kb/faq.html</userdata>
<item text="Licenses" id="kb_faq_lic"/>
<item text="Performance. Dynamical Loading" id="kb_faq_perf"/>
<item text="Drag-n-drop, Nodes ordering" id="kb_faq_dnd"/>
<item text="API, Initialization" id="kb_faq_api"/>
<item text="Other Questions" id="kb_faq_else"/>
</item>
<item text="Knowledge Base" id="kb_">
<item text="Dynamical loading" id="kb_dn">
<userdata name="file">kb/dyn_loading.html</userdata>
</item>
</item>
</item>
</tree>

View File

@ -0,0 +1,74 @@
<?xml version="1.0"?>
<data>
<event name="onClick" register="setOnClickHandler">
<param name="id" order="1">ID of clicked node</param>
<description>Event raised immideatly after text part of item in tree was clicked, but after default onClick functionality was processed.
Richh mouse button click can be catched by onRightClick handler.</description>
</event>
<event name="onDblClick" register="setOnDblClickHandler">
<param name="id" order="1">ID of clicked node</param>
<description>Event raised immideatly after item in tree was doubleclicked, before default onDblClick functionality was processed.
Beware using both onClick and onDblClick events, because component can generate onClick event before onDblClick event while doubleclicking item in tree.
( that behavior depend on used brouser )
</description>
<return>
true - confirm opening/closing; false - deny opening/closing;
</return>
</event>
<event name="onOpen" register="setOnOpenHandler">
<param name="id" order="1">ID of node which will be closed</param>
<param name="state" order="2">Current open state of tree item. 0 - item has not childs, -1 - item closed, 1 - item opened.</param>
<description>Event raised immideatly after item in tree was opened/closed , and before item opened//closed. Event also raised for unclosable nodes and nodes without open/close functionality - in that case result of function will be ignored.
Event not raised if node opened by dhtmlXtree API.
</description>
<return>
true - confirm opening/closing; false - deny opening/closing;
</return>
</event>
<event name="onOpen" register="setOnCheckHandler">
<param name="id" order="1">ID of node which will be closed</param>
<param name="state" order="2">Current checkbox state. 1 - item checked, 0 - item unchecked.</param>
<description>Event raised immideatly after item in tree was opened/closed, but after item checked/unchecked.</description>
</event>
<event name="onDrag" register="setDragHandler">
<param name="sourceId" order="1">ID of source item</param>
<param name="targetId" order="2">ID of target item</param>
<description>Event occured after item was dragged and droped on another item, but before item moving processed.
Event also raised while programmatic moving nodes.</description>
<return>
true - confirm drag-and-drop; false - deny drag-and-drop;
</return>
</event>
<event name="onDrop" register="setDropHandler">
<edition>Commercial</edition>
<param name="sourceId" order="1">ID of source item</param>
<param name="targetId" order="2">ID of target item</param>
<param name="id" order="1">ID of clicked node</param>
<description>Event raised after drag-and-drop processed. Event also raised while programmatic moving nodes.
</description>
</event>
<event name="onRightClick" register="setOnRightClickHandler">
<edition>Commercial (not released yet)</edition>
<param name="Id" order="1">ID of tree item</param>
<param name="targetId" order="2">ID of target item</param>
<param name="id" order="1">ID of clicked node</param>
<description>
Event occured after right mouse button was clicked.
Assigning this handler can disable default context menu, and noncompattible with dhtmlXMenu integration.
</description>
</event>
<event name="onXMLLoad" register="loadXML or loadXMLString">
<edition>Commercial (not released yet)</edition>
<param name="Id" order="1">ID of tree item</param>
<param name="targetId" order="2">ID of target item</param>
<param name="id" order="1">ID of clicked node</param>
<description>
Event occured after right mouse button was clicked.
Assigning this handler can disable default context menu, and noncompattible with dhtmlXMenu integration.
</description>
</event>
</data>

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 184 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 228 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 228 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 947 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 B

View File

@ -1,10 +1,14 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dhtmlxTree v.1.1 Standard Edition</title>
<!--#include virtual="/include/meta.inc" -->
<META NAME="KEYWORDS" CONTENT="dhtmlxtree, dhtml tree, javascript tree, java, dynamical loading, xml, API, cross-browser, javascript, dhtml, scand, treeview, navigation, menu, bar, script, javascript navigation, web-site, dynamic, dynamic menu, folder, folder tree, internet explorer, firefox, mozilla, opera, safari, tooltip, item, node, asp, .net, jsp, cold fusion, image, custom tag, loading, control, widget, web site, checkbox, drag, drop, drag and drop, component, html, offshore, software, outsourcing, development, company, advanced, efficient">
<META NAME="DESCRIPTION" CONTENT="Javascript DHTML Tree with XML support, cross-browser compatibility and rich JavaScript API. It allows to create attractive customizable DHTML JavaScript Tree Menu. Has checkboxes and drag-n-drop">
<!--#set var="title" value="dhtmlxTree - an advanced DHTML tree component with rich JavaScript API" -->
<!--#set var="picture" value="../../img/download/th_dhtmlxtree.gif" -->
<!--#set var="section" value="dhtmlxTree" -->
<link rel="STYLESHEET" type="text/css" href="css/dhtmlXTree.css">
<script src="js/dhtmlXCommon.js"></script>
@ -31,7 +35,7 @@
tree2.loadXML("tree2.xml")
}
function preLoadImages(){
var imSrcAr = new Array("line1.gif","line2.gif","line3.gif","line4.gif","minus2.gif","minus3.gif","minus4.gif","plus2.gif","plus3.gif","plus4.gif","book.gif","books_open.gif","books_close.gif","magazine_open.gif","magazine_close.gif","tombs.gif","tombs_mag.gif","book_titel.gif")
var imSrcAr = new Array("line1.gif","line2.gif","line3.gif","line4.gif","minus2.gif","minus3.gif","minus4.gif","plus2.gif","plus3.gif","plus4.gif","book.gif","books_open.gif","books_close.gif","magazines_open.gif","magazines_close.gif","tombs.gif","tombs_mag.gif","book_titel.gif","iconCheckAll.gif")
var imAr = new Array(0);
for(var i=0;i<imSrcAr.length;i++){
imAr[imAr.length] = new Image();
@ -40,6 +44,7 @@
}
</script>
<!--#include virtual="/include/top.shtml" -->
<body onload="doOnLoad()">
<select onchange="document.location.href = this.value">
@ -81,24 +86,24 @@ dhtmlxTree has built-in <b>checkboxes</b> providing a handy tool for any kind of
<table width="600">
<tr>
<td colspan="2">
<h3>What's new in version 1.1 (June 22, 2005):</h3>
<li>possibility to use tree without icons - <em>EnableTreeImages</em> method</li>
<li>autoscrolling while drag-and-drop</li>
<li>fixed bug in drag-and-drop on pages with scrollbars</li>
<li>added another drag-n-drop behavior &ndash; drop-as-sibling *</li>
<li><strong>drag-n-drop between frames/iframes</strong> *</li>
<li>OnDrop event handler *</li>
<li>fixed some visual glitches</li>
<li>focus item with script - <em>focusItem</em> method *</li>
<li>advanced xml processing for loading big trees - <strong>tested with 50000 items</strong> *</li>
<li>saving/Restoring tree <strong>state in cookie</strong> *</li>
<li>possibility to <strong>create XML</strong> based on updated tree structure *</li>
<li><strong>search functionality</strong> *</li>
<li>possibility to change <strong>nodes order</strong> *</li>
<li><strong>multi-line</strong> tree items *</li>
<li><strong>context menu</strong> - integration with dhtmlXMenu *</li>
<br>
<small>* - <a href="#editions">professional edition</a></small>
<h3>What's new in version 1.2* (October 20, 2005):</h3>
<li>XHTML compartibility</li>
<li>Complex drag-n-drop (inside/between)</li>
<li>Extended Serialization (userdata, more other parameters)</li>
<li>Sorting (a-z,z-a)</li>
<li>.Net support</li>
<li>JSP support</li>
<li>Event handlers for loading process</li>
<li>Extended event handlers for drag-n-drop</li>
<li>drag-n-Drop outside the tree</li>
<li>Icon sizes now changable</li>
<li>Possibility to turn +/- off</li>
<li>Increased overal performance</li>
<li>Disabling/hiding checkboxes</li>
<li>New Samples</li>
<li>More Detailed documentation</li>
<li>PHP/MySQL, ASP.Net, JSP sample applications</li>
<br><small>* - some functionlity available in <a href="#editions">professional edition</a> only</small>
<br><br>
</td>
</tr>
@ -111,35 +116,36 @@ dhtmlxTree has built-in <b>checkboxes</b> providing a handy tool for any kind of
<li>FireFox 0.9 and above</li>
<li>Opera (Xml support depends on browser version)</li>
<h3>Features:</h3>
<h3>Features:*</h3>
<li>Multibrowser/Multiplatform support </li>
<li>XHTML compartible</li>
<li>Full controll with JavaScript API</li>
<li>Dynamic loading <font color=gray>(can load data on demand)</font></li>
<li>Dynamic rendering *</li>
<li>XML support <font color=gray>(initializes from XML stream)</font></li>
<li>drag-&-drop <font color=gray>(within one tree, between trees, between frames *)</font></li>
<li>checkboxes <font color=gray>(two/three states)</font></li>
<li>context menu * <font color=gray>(integration with <a href="http://www.scbr.com/docs/products/dhtmlxMenu/index.shtml" target="_blank">dhtmlxMenu</a>)</font></li>
<li>tooltips</li>
<li>multi-line tree items *</li>
<li>customizable icons <font color=gray>(with javascript or xml)</font></li>
<li>Dynamic loading</li>
<li>XML support</li>
<li>Extended XML serialization</li>
<li>drag-&-drop (within one tree, between trees) </li>
<li>copy with drag-n-drop</li>
<li>drop-between/drop-inside</li>
<li>checkboxes (two/three states), disabled/hidden</li>
<li>customizable icons (with javascript or xml), icon size</li>
<li>user data for nodes</li>
<li>high stability</li>
<li>Async mode loading support </li>
<li>.NET custom server control</li>
<li>JSP custom tag for Java - <font color=gray><i>pending</i></font></li>
<li>JSP custom tag</li>
<li>Macromedia Cold Fusion support</li>
<li>More detailed documentation</li>
<br>
<small>* - <a href="#editions">professional edition</a></small>
<small>* - some functionlity available in <a href="#editions">professional edition</a> only</small>
<h3>Editions</h3>
<li>Standard - available for free download (for non-commercial use).</li>
<li><a name="editions">Professional</a> - contains <a href="pro_features.html" target="_blank">additional features</a> (with examples) which are not present at standard edition. Avalable for users of Commercial and Enterprice licenses.</li>
<li><a name="editions">Professional</a> - contains <a href="pro_features.html" target="_blank">additional features</a> (with examples) which are not present at standard edition. Included with Commercial and Enterprise licenses. <a href="mailto:info@scand.com">Contact us</a> to buy.<!--Click <a href=buy.shtml>here</a> to buy.--></li>
<h3>Licensing</h3>
<li><a target="_blank" href="License_GPL.txt">Open Source - GPL</a> (standard edition only)</li>
<li><a target="_blank" name="license" href="License_Commercial.html">Commercial License</a> (standard and professional editions): in order to use any edition of dhtmlxTree in a commercial non-OpenSource project, get all features available in <a href="#editions">professional edition</a> or to have support you can purchase a Commercial License ($99) - please <a href="mailto:info@scand.com">contact us</a></li>
<li><a target="_blank" name="license" href="License_Commercial.html">Commercial License</a> (standard and professional editions): in order to use any edition of dhtmlxTree in a commercial project, get all features available in <a href="#editions">professional edition</a> or to have support you can purchase a Commercial License ($99). <a href="mailto:info@scand.com">Contact us</a> to buy.<!--<a href=buy.shtml>here</a>. - please <a href="mailto:info@scand.com">contact us</a --></li>
</td>
<td valign="top" style="padding-left:20px">
<h3>Download:</h3>
<a href="download/dhtmlxTree.zip"><li title="Scripts, Samples, Documentation, ColdFusion Tag">Full package (v.1.1 standard)</li></a>
<a href="download/dhtmlxTree.zip"><li title="Scripts, Samples, Documentation, ColdFusion Tag">Full package (v.1.2 standard)</li></a>
<a href="download/dhtmlxTreeDoc.zip"><li>Documentation only</li></a>
<h3>Examples:</h3>
<a target="_blank" href="samples/treeEx11.html"><li>Initialize object</li></a>
@ -151,13 +157,14 @@ dhtmlxTree has built-in <b>checkboxes</b> providing a handy tool for any kind of
<a target="_blank" href="samples/treeEx24.html"><li>Change design</li></a>
<a target="_blank" href="samples/treeEx31.html"><li>Autoloading from xml</li></a>
<a target="_blank" href="samples/treeEx32.html"><li>Drag and Drop</li></a>
<a href="samples/dhtmlxTree_db_sample.zip"><li>Working with database (PHP/MySQL)</li></a>
<h3>Documentation:</h3>
<a target="_blank" href="doc/index.html"><li>API Functions and Documentation<br>(including CF custom tag doc)</li></a>
<a target="_blank" href="doc/index.html"><li>API Functions and Documentation</li></a>
</td>
</tr>
</table>
<br>
<div align="center" style="width:600"><h3><a href="download/dhtmlxTree.zip">Download latest version source code</a></h3></div>
<div align="center" style="width:600"><h3><a href="download/dhtmlxTree.zip">Download latest version of javascript tree source code</a></h3></div>
<h3>Code Sample</h3>
<XMP style="color:green">

View File

@ -1,6 +1,10 @@
function dtmlXMLLoaderObject(funcObject,dhtmlObject){
function dtmlXMLLoaderObject(funcObject,dhtmlObject,async){
this.xmlDoc="";
if(arguments.length==2)
this.async=true;
else
this.async=async;
this.onloadAction=funcObject||null;
this.mainObject=dhtmlObject||null;
return this;
@ -8,10 +12,12 @@ function dtmlXMLLoaderObject(funcObject,dhtmlObject){
dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
this.check=function(){
if(dhtmlObject.onloadAction!=null){
if(!dhtmlObject.xmlDoc.readyState)dhtmlObject.onloadAction(dhtmlObject.mainObject);
else{
if(dhtmlObject.xmlDoc.readyState != 4)return false;
else dhtmlObject.onloadAction(dhtmlObject.mainObject);}
}
};
return this.check;
};
@ -34,6 +40,7 @@ function dtmlXMLLoaderObject(funcObject,dhtmlObject){
}
catch(e){
this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
this.xmlDoc.async=this.async
this.xmlDoc.loadXML(xmlString);
}
this.onloadAction(this.mainObject);
@ -42,7 +49,7 @@ function dtmlXMLLoaderObject(funcObject,dhtmlObject){
try
{
this.xmlDoc = new XMLHttpRequest();
this.xmlDoc.open("GET",filePath,true);
this.xmlDoc.open("GET",filePath,this.async);
this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
this.xmlDoc.send(null);
}
@ -56,7 +63,7 @@ function dtmlXMLLoaderObject(funcObject,dhtmlObject){
else
{
this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
this.xmlDoc.async="true";
this.xmlDoc.async=this.async
this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
}
this.xmlDoc.load(filePath);
@ -129,6 +136,7 @@ function dhtmlDragAndDropObject(){
this.waitDrag=0;
if(window.dhtmlDragAndDrop)return window.dhtmlDragAndDrop;
window.dhtmlDragAndDrop=this;
return this;
};
@ -151,9 +159,9 @@ function dhtmlDragAndDropObject(){
window.dhtmlDragAndDrop.waitDrag=0;
document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
return;
return false;
}
window.dhtmlDragAndDrop.waitDrag=1;
window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
@ -161,36 +169,87 @@ function dhtmlDragAndDropObject(){
window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
if((e)&&(e.preventDefault)){e.preventDefault();return false;}
return false;
};
dhtmlDragAndDropObject.prototype.callDrag=function(e){
if(!e)e=window.event;
dragger=window.dhtmlDragAndDrop;
if((e.button==0)&&(isIE()))return dragger.stopDrag();
if(!dragger.dragNode){
dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
if(!dragger.dragNode)return dragger.stopDrag();
dragger.gldragNode=dragger.dragNode;
document.body.appendChild(dragger.dragNode);
document.body.onmouseup=dragger.stopDrag;
dragger.waitDrag=0;
dragger.dragNode.pWindow=window;
dragger.initFrameRoute();
}
dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft;dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop;
if(dragger.dragNode.parentNode!=window.document.body){
var grd=dragger.gldragNode;
if(dragger.gldragNode.old)grd=dragger.gldragNode.old;
grd.parentNode.removeChild(grd);
var oldBody=dragger.dragNode.pWindow;
if(isIE()){
var div=document.createElement("Div");
div.innerHTML=dragger.dragNode.outerHTML;
dragger.dragNode=div.childNodes[0];}
else dragger.dragNode=dragger.dragNode.cloneNode(true);
dragger.dragNode.pWindow=window;
dragger.gldragNode.old=dragger.dragNode;
document.body.appendChild(dragger.dragNode);
oldBody.dhtmlDragAndDrop.dragNode=dragger.dragNode;
}
dragger.dragNode.style.left=e.clientX+15+(dragger.fx?dragger.fx*(-1):0)+document.body.scrollLeft+"px";
dragger.dragNode.style.top=e.clientY+3+(dragger.fy?(-1)*dragger.fy:0)+document.body.scrollTop+"px";
if(!e.srcElement)var z=e.target;else z=e.srcElement;
dragger.checkLanding(z);
dragger.checkLanding(z,e.clientX,e.clientY);
}
dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){
if(htmlObject.dragLanding){if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);
this.lastLanding=htmlObject;this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode);}
dhtmlDragAndDropObject.prototype.calculateFramePosition=function(n){
if(window.name){
var el =parent.frames[window.name].frameElement.offsetParent;
var fx=0;
var fy=0;
while(el){fx+= el.offsetLeft;fy+= el.offsetTop;el = el.offsetParent;}
if((parent.dhtmlDragAndDrop)){var ls=parent.dhtmlDragAndDrop.calculateFramePosition(1);fx+=ls.split('_')[0]*1;fy+=ls.split('_')[1]*1;}
if(n)return fx+"_"+fy;
else this.fx=fx;this.fy=fy;
}
return "0_0";
}
dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject,x,y){
if((htmlObject)&&(htmlObject.dragLanding)){if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);
this.lastLanding=htmlObject;this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode,x,y);}
else{
if(htmlObject.tagName!="BODY")this.checkLanding(htmlObject.parentNode);
else{if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding);this.lastLanding=0;}
if((htmlObject)&&(htmlObject.tagName!="BODY"))this.checkLanding(htmlObject.parentNode,x,y);
else{if(this.lastLanding)this.lastLanding.dragLanding._dragOut(this.lastLanding,x,y);this.lastLanding=0;}
}
}
dhtmlDragAndDropObject.prototype.stopDrag=function(e){
dhtmlDragAndDropObject.prototype.stopDrag=function(e,mode){
dragger=window.dhtmlDragAndDrop;
if(dragger.lastLanding)dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding);
dragger.lastLanding=0;
dragger.dragNode.parentNode.removeChild(dragger.dragNode);
if(!mode)
{
dragger.stopFrameRoute();
var temp=dragger.lastLanding;
dragger.lastLanding=null;
if(temp)temp.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,temp);
}
dragger.lastLanding=null;
if((dragger.dragNode)&&(dragger.dragNode.parentNode==document.body))dragger.dragNode.parentNode.removeChild(dragger.dragNode);
dragger.dragNode=0;
dragger.gldragNode=0;
dragger.fx=0;
dragger.fy=0;
dragger.dragStartNode=0;
dragger.dragStartObject=0;
document.body.onmouseup=dragger.tempDOMU;
@ -199,3 +258,96 @@ function dhtmlDragAndDropObject(){
dragger.tempDOMM=null;
dragger.waitDrag=0;
}
dhtmlDragAndDropObject.prototype.stopFrameRoute=function(win){
if(win)
window.dhtmlDragAndDrop.stopDrag(1,1);
for(var i=0;i<window.frames.length;i++)
if((window.frames[i]!=win)&&(window.frames[i].dhtmlDragAndDrop))
window.frames[i].dhtmlDragAndDrop.stopFrameRoute(window);
if((parent.dhtmlDragAndDrop)&&(parent!=window)&&(parent!=win))
parent.dhtmlDragAndDrop.stopFrameRoute(window);
}
dhtmlDragAndDropObject.prototype.initFrameRoute=function(win,mode){
if(win){
window.dhtmlDragAndDrop.preCreateDragCopy();
window.dhtmlDragAndDrop.dragStartNode=win.dhtmlDragAndDrop.dragStartNode;
window.dhtmlDragAndDrop.dragStartObject=win.dhtmlDragAndDrop.dragStartObject;
window.dhtmlDragAndDrop.dragNode=win.dhtmlDragAndDrop.dragNode;
window.dhtmlDragAndDrop.gldragNode=win.dhtmlDragAndDrop.dragNode;
window.document.body.onmouseup=window.dhtmlDragAndDrop.stopDrag;
window.waitDrag=0;
if((!isIE())&&(mode))window.dhtmlDragAndDrop.calculateFramePosition();
}
if((parent.dhtmlDragAndDrop)&&(parent!=window)&&(parent!=win))
parent.dhtmlDragAndDrop.initFrameRoute(window);
for(var i=0;i<window.frames.length;i++)
if((window.frames[i]!=win)&&(window.frames[i].dhtmlDragAndDrop))
window.frames[i].dhtmlDragAndDrop.initFrameRoute(window,((!win||mode)?1:0));
}
function isIE(){
if(navigator.appName.indexOf("Microsoft")!=-1)
if(navigator.userAgent.indexOf('Opera')== -1)
return true;
return false;
}
dtmlXMLLoaderObject.prototype.doXPath = function(xpathExp,docObj){
if(isIE()){
if(arguments.length==1){
docObj = this.xmlDoc
}
return docObj.selectNodes(xpathExp);
}else{
var nodeObj = docObj;
if(!docObj){
if(!this.xmlDoc.nodeName){
docObj = this.xmlDoc.responseXML
}else{
docObj = this.xmlDoc;
}
}
if(docObj.nodeName.indexOf("document")!=-1){
nodeObj = docObj;
}else{
nodeObj = docObj;
docObj = docObj.ownerDocument;
}
var rowsCol = new Array();
var col = docObj.evaluate(xpathExp,nodeObj,null,XPathResult.ANY_TYPE,null);
var thisColMemb = col.iterateNext();
while(thisColMemb){
rowsCol[rowsCol.length] = thisColMemb;
thisColMemb = col.iterateNext();
}
return rowsCol;
}
}
if(window.Node)
Node.prototype.removeNode = function(removeChildren)
{
var self = this;
if(Boolean(removeChildren))
{
return this.parentNode.removeChild(self);
}
else
{
var range = document.createRange();
range.selectNodeContents(self);
return this.parentNode.replaceChild(range.extractContents(),self);
}
}

File diff suppressed because it is too large Load Diff

View File

@ -15,8 +15,9 @@
<h1>dhtmlxTree Professional Edition Features:</h1>
<hr>
<li>Context Menu</li>
<li>OnDrop event handler</li>
<li>Additional Drag-n-drop behavior &ndash; drop-as-sibling</li>
<li>Sorting</li>
<li>OnDrag/OnDrop event handler</li>
<li>Additional Drag-n-drop behavior &ndash; drop-as-sibling, complex drag-n-drop</li>
<li>Drag-n-drop between frames</li>
<li>Focus item with script method</li>
<li>Dynamic rendering &ndash; advanced xml processing for loading big trees when dynamical loading can't be used</li>
@ -24,7 +25,7 @@
<li>Search</li>
<li>Multi-line tree items</li>
<li>Saving/Restoring tree state in/from cookies</li>
<li>Change icon size</li>
</body>
</html>

View File

@ -1,5 +1,5 @@
Current version: 1.1 from June 22, 2005 build 714
Current version: 1.2 from October 20, 2005
============================================================================================
@ -10,14 +10,13 @@ Some comments on commercial usage:
1.Commercial License allows you to use dhtmlXTree on unlimited number of Websites or sites
but only in one commercial project(application). According to this license we provide you
with support (consultations) and free-of-charge bug fixing during 3 month.
with support (consultations) and free-of-charge bug fixing during 1 month.
This license costs $99.
2.Enterprise License allows you to use dhtmlXTree in unlimited number of projects on condition
that all of them are projects of one company. Support period is 2 years.
that all of them are projects of one company. Support period is 1 year.
This license costs $399.
One year support additionally to period specified in license will cost $79 plus.
According to both licenses you are allowed to make changes to the code of Software but Scand LLC
still owns the code and you are not allowed to distribute changed code.

View File

@ -0,0 +1,14 @@
<?php
/*
To run sample application you need to have:
- PHP
- MySQL
To install application, just make sure that your MySQL running and load index.php
after entering suitable (for you) information below
*/
$mysql_host = "localhost";
$mysql_user = "root";
$mysql_pasw = "";
$mysql_db = "sampleDB";
?>

View File

@ -0,0 +1,10 @@
Create database sampledb;
use sampledb;
CREATE TABLE Tree (
item_id INT UNSIGNED not null AUTO_INCREMENT,
item_nm VARCHAR (200) DEFAULT '0',
item_order INT UNSIGNED DEFAULT '0',
item_desc TEXT ,
item_parent_id INT UNSIGNED DEFAULT '0',
PRIMARY KEY ( item_id )
)

View File

@ -0,0 +1,30 @@
<?php
require_once('config.php');
$link = mysql_pconnect($mysql_host, $mysql_user, $mysql_pasw);
mysql_select_db ($mysql_db);
deleteNode($_POST["item_id"]);
mysql_close($link);
//insert item
function deleteNode($id){
deleteBranch($id);
deleteSingleNode($id);
print("<script>top.doDeleteTreeItem('$id');</script>");
}
function deleteSingleNode($id){
$d_sql = "Delete from tree where item_id=".$id;
$resDel = mysql_query($d_sql);
}
function deleteBranch($pid){
$s_sql = "Select item_id from tree where item_parent_id=$pid";
$res = mysql_query($s_sql);
if($res){
while($row=mysql_fetch_array($res)){
deleteBranch($row['item_id']);
deleteSingleNode($row['item_id']);
}
}
}
?>

View File

@ -0,0 +1,27 @@
<?php
header("Content-type:text/xml");
require_once('config.php');
print("<?xml version=\"1.0\"?>");
$id = $_GET["id"];
$pid = $_GET["parent_id"];
$link = mysql_pconnect($mysql_host, $mysql_user, $mysql_pasw);
mysql_select_db ($mysql_db);
saveNewParent($id,$pid);
mysql_close($link);
//creates xml show item details
function saveNewParent($id,$pid){
global $id_out;
$sql = "Update Tree set item_parent_id=$pid where item_id=$id";
$res = mysql_query($sql);
if($res){
$id_out = $id;
}else{
$id_out = "-1";
}
}
?>
<succeedded id="<?=$id_out?>"/>

View File

@ -0,0 +1,258 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>dhtmlxTree sample</title>
<style>
#details span{
font-size:10px;
font-family:arial;
display:block;
}
#details input,#details textarea{
border: 1px solid gray;
}
#actions a{
font-size:12px;
font-family:arial;
margin:5px;
text-decoration:none;
}
#actions {
border-bottom:1px solid blue;
padding:2px;
margin-bottom:10px;
margin-top:10px;
}
#showproc{
border:1px solid;
border-color: lightblue blue blue lightblue;
background-color: #87ceeb;
font-family:arial;
font-size: 14px;
padding: 5px;
position: absolute;
top:100px;
left:600px;
}
</style>
<link rel="STYLESHEET" type="text/css" href="../../css/dhtmlXTree.css">
<script src="../../js/dhtmlXCommon.js"></script>
<script src="../../js/dhtmlXTree.js"></script>
<script>
//tree object
var tree;
//xml loader to load details from database
var xmlLoader = new dtmlXMLLoaderObject(doLoadDetails,window);
//default label for new item
var newItemLabel = "New Item";
//id for new (unsaved) item
var newItemId = "-1";
//load tree on page
function loadTree(){
tree = new dhtmlXTreeObject("treebox","100%","100%",0);
tree.setImagePath("../../imgs/");
tree.enableDragAndDrop(true);
tree.setDragHandler(doOnBeforeDrop);
tree.setOnClickHandler(doOnSelect);
tree.loadXML("treefromdb.php");
status();
}
//add new node next to currently selected (or the first in tree)
function addNewPeer(){
if(tree.getLevel(newItemId)!=0){//check if unsaved item already exists
alert("New Item (unsaved) already exists")
return false;
}
var selectedId = tree.getSelectedItemId();
if(selectedId!=""){
tree.insertNewNext(selectedId,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
}else{
tree.insertNewItem(0,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
}
}
//add new child node to selected item (or the first item in tree)
function addNewChild(){
if(tree.getLevel(newItemId)!=0){//check if unsaved item already exists
alert("New Item (unsaved) already exists")
return false;
}
var selectedId = tree.getSelectedItemId();
if(selectedId!=""){
tree.insertNewItem(selectedId,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
}else{
tree.insertNewItem(0,newItemId,newItemLabel,"","","","","SELECT,CALL",0)
}
}
//delete item (from database)
function deleteNode(){
status(true);
var f = document.forms["detailsForm"];
if(tree.getSelectedItemId()!=newItemId){//delete node from db
if(!confirm("Are you sure you want to delete selected node?"))
return false;
f.action = "deletenode.php"
f.submit()
}else{//delete unsaved node
doDeleteTreeItem(newItemId);
}
}
//remove item from tree
function doDeleteTreeItem(id){
document.getElementById("details").style.visibility = "hidden";
var pId = tree.getParentId(id);
tree.deleteItem(id);
if(pId!="0")
tree.selectItem(pId,true);
status();
}
//save item
function saveItem(){
status(true);
var f = document.forms["detailsForm"];
f.action = "savenode.php";
f.submit();
}
//save moved (droped) item to db. Cancel drop if save failed or item is new
function doOnBeforeDrop(id,parentId){
if(id==newItemId)
return false;
else{
status(true);
var dropSaver = new dtmlXMLLoaderObject(null,null,false);//sync mode
dropSaver.loadXML("dropprocessor.php?id="+id+"&parent_id="+parentId);
var root = dropSaver.getXMLTopNode("succeedded");
var id = root.getAttribute("id");
if(id==-1){
alert("Save failed");
status();
return false;
}else{
if(tree.getSelectedItemId()==id){//update details (really need only parent id)
loadDetails(id);
}
}
status();
return true;
}
}
//update item
function doUpdateItem(id, label){
var f = document.forms["detailsForm"];
f.item_id.value = id;
tree.changeItemId(tree.getSelectedItemId(),id);
tree.setItemText(id,label);
tree.setItemColor(id,"black","white");
status();
}
//what to do when item selected
function doOnSelect(itemId){
if(itemId!=newItemId){
if(tree.getLevel(newItemId)!=0){
if(confirm("Do you want to save changes?")){//save changes to new item
tree.selectItem(newItemId,false)
saveItem();
return;
}
tree.deleteItem(newItemId);
}
}else{//set color to new item label
tree.setItemColor(itemId,"red","pink")
}
loadDetails(itemId);//load details for selected item
}
//send request to the server to load details
function loadDetails(id){
status(true);
xmlLoader.loadXML("loaddetails.php?id="+id);
}
//populate form of details
function doLoadDetails(obj){
var f = document.forms["detailsForm"];
var root = xmlLoader.getXMLTopNode("details")
var id = root.getAttribute("id");
document.getElementById("details").style.visibility = "visible";
if(id==newItemId){
f.item_nm.value = tree.getItemText(id);
f.item_desc.value = "";
}else{
f.item_nm.value = root.getElementsByTagName("name")[0].firstChild.nodeValue;
if(root.getElementsByTagName("desc")[0].firstChild!=null)
f.item_desc.value = root.getElementsByTagName("desc")[0].firstChild.nodeValue;
else
f.item_desc.value = "";
}
f.item_id.value = id
f.item_parent_id.value = tree.getParentId(id);
status();
}
//show status of request on page
function status(fl){
var d = document.getElementById("showproc");
if(fl)
d.style.display = "";
else
d.style.display = "none";
}
</script>
</head>
<body onload="loadTree()" style="height:100%">
<!--- block for displaying status of request on page --->
<div id="showproc" style="display:block;">Processing...</div>
<h1>dhtmlxTree<br>Relationships with database sample (PHP/MySQL)</h1>
<a href="../dhtmlxTree_db_sample.zip">Get zipped code</a>
<br><br>
<li>Create/Update/Delete nodes in tree with simultaneous database update</li>
<li>Drag-n-drop with simultaneous database update</li>
<div id="actions">
<a href="javascript:void(0)" onclick="addNewPeer()">New Peer</a>|<a href="javascript:void(0)" onclick="addNewChild()">New Child</a>|<a href="javascript:void(0)" onclick="deleteNode()">Delete Node</a>
</div>
<table width="100%">
<tr>
<!--- tree area --->
<td width="250px">
<div id="treebox"
style=" width:250px;
height:250px;
background-color:#f5f5f5;
border :1px solid Silver;"/>
</td>
<!--- details area. visible if any node selected --->
<td id="details"
style="padding:5px;visibility:hidden;" valign="top">
<form name="detailsForm" action="" target="actionframe" method="post">
<span>Node ID:</span>
<input name="item_id" type="Text" style="background-color:lightgrey;width:50px;text-align:right;" name="label" readonly="true"><br>
<span>Parent ID:</span>
<input name="item_parent_id" type="Text" style="background-color:lightgrey;width:50px;text-align:right;" name="label" readonly="true"><br>
<span>Label:</span>
<input name="item_nm" type="Text" maxlength="50" name="label" style="width:200px;"><br>
<span>Descripton:</span>
<textarea name="item_desc" id="textarea" style="height:100px;width:200px;"></textarea><br>
<button type="button" onclick="saveItem()" style="width:200px;">Save</button>
</form>
</td>
</tr>
</table>
<!--- iframe for submiting details form to --->
<iframe name="actionframe" id="actionframe" frameborder="0" width="100%" height="0"></iframe>
<h4>&copy; Scand LLC 2005</h4>
</body>
</html>

View File

@ -0,0 +1,32 @@
<?php
header("Content-type:text/xml");
require_once('config.php');
print("<?xml version=\"1.0\"?>");
$id = $_GET["id"];
?>
<details id="<?=$id?>">
<?php
$link = mysql_pconnect($mysql_host, $mysql_user, $mysql_pasw);
mysql_select_db ($mysql_db);
loadDetails($id);
mysql_close($link);
//creates xml show item details
function loadDetails($id){
$sql = "Select item_nm,item_parent_id,item_desc from Tree where item_id=$id";
$res = mysql_query($sql);
if($res){
while($row=mysql_fetch_array($res)){
print("<name>".$row['item_nm']."</name>");
print("<parent_id>".$row['item_parent_id']."</parent_id>");
print("<desc>".$row['item_desc']."</desc>");
}
}else{
echo mysql_errno().": ".mysql_error()." at ".__LINE__." line in ".__FILE__." file<br>";
}
}
?>
</details>

View File

@ -0,0 +1,9 @@
INSTALLATION INSTRUCTIONS ===========================================================
To run sample application you need to have:
- PHP
- MySQL
To install application, just make sure that your MySQL running and load index.php
after entering suitable (for you) information in config.php
=====================================================================================

View File

@ -0,0 +1,32 @@
<?php
require_once('config.php');
$link = mysql_pconnect($mysql_host, $mysql_user, $mysql_pasw);
mysql_select_db ($mysql_db);
if($_POST["item_id"]==-1){
saveInsert($_POST["item_nm"],$_POST["item_parent_id"],$_POST["item_desc"],0);
}else{
saveUpdate($_POST["item_id"],$_POST["item_nm"],$_POST["item_parent_id"],$_POST["item_desc"],0);
}
mysql_close($link);
//insert item
function saveInsert($name,$parent_id,$desc,$order){
$sql = "Insert into tree(item_nm,item_parent_id,item_desc,item_order) ";
$sql.= "Values('".addslashes($name)."',$parent_id,'".addslashes($desc)."',$order)";
print($sql);
$res = mysql_query($sql);
$newId = mysql_insert_id();
print("<script>top.doUpdateItem('$newId','$name');</script>");
}
//insert item
function saveUpdate($id,$name,$parent_id,$desc,$order){
$sql = "Update tree set item_nm = '".addslashes($name)."',item_parent_id = $parent_id,item_desc = '".addslashes($desc)."',item_order = $order where item_id=$id";
print($sql);
$res = mysql_query($sql);
print("<script>top.doUpdateItem('$id','".addslashes($name)."');</script>");
}
?>

View File

@ -0,0 +1,41 @@
<?php
header("Content-type:text/xml");
require_once('config.php');
print("<?xml version=\"1.0\"?>");
?>
<tree id="0">
<?php
$link = mysql_pconnect($mysql_host, $mysql_user, $mysql_pasw);
$db = mysql_select_db ($mysql_db);
//Create database and table if doesn't exists
if(!$db){
//mysql_create_db($mysql_db,$link);
$sql = "Create database ".$mysql_db;
$res = mysql_query ($sql);
$sql = "use ".$mysql_db;
$res = mysql_query ($sql);
$sql = "CREATE TABLE Tree (item_id INT UNSIGNED not null AUTO_INCREMENT,item_nm VARCHAR (200) DEFAULT '0',item_order INT UNSIGNED DEFAULT '0',item_desc TEXT ,item_parent_id INT UNSIGNED DEFAULT '0',PRIMARY KEY ( item_id ))";
$res = mysql_query ($sql);
if(!$res){
echo mysql_errno().": ".mysql_error()." at ".__LINE__." line in ".__FILE__." file<br>";
}
}
getLevelFromDB(0);
mysql_close($link);
//print one level of the tree, based on parent_id
function getLevelFromDB($parent_id){
$sql = "Select item_id, item_nm from Tree where item_parent_id=$parent_id";
$res = mysql_query ($sql);
if($res){
while($row=mysql_fetch_array($res)){
print("<item id='".$row['item_id']."' text=\"". str_replace('"',"&quot;",$row['item_nm'])."\">");
getLevelFromDB($row['item_id']);
print("</item>");
}
}else{
echo mysql_errno().": ".mysql_error()." at ".__LINE__." line in ".__FILE__." file<br>";
}
}
?>
</tree>

View File

@ -1,33 +1,44 @@
/**
/*
Copyright Scand LLC http://www.scbr.com
This version of Software is free for using in non-commercial applications.
For commercial use please contact info@scbr.com to obtain license
*/
/**
* @desc: xmlLoader object
* @type: private
* @param: funcObject - xml parser function
* @param: object - jsControl object
* @topic: 0
*/
function dtmlXMLLoaderObject(funcObject, dhtmlObject){
function dtmlXMLLoaderObject(funcObject, dhtmlObject,async){
this.xmlDoc="";
if(arguments.length==2)
this.async=true;
else
this.async=async;
this.onloadAction=funcObject||null;
this.mainObject=dhtmlObject||null;
return this;
return this;
};
/**
* @desc: xml loading handler
* @type: private
* @param: dtmlObject - xmlLoader object
* @topic: 0
* @topic: 0
*/
dtmlXMLLoaderObject.prototype.waitLoadFunction=function(dhtmlObject){
this.check=function (){
if (!dhtmlObject.xmlDoc.readyState) dhtmlObject.onloadAction(dhtmlObject.mainObject);
else {
if (dhtmlObject.xmlDoc.readyState != 4) return false;
else dhtmlObject.onloadAction(dhtmlObject.mainObject); }
if(dhtmlObject.onloadAction!=null){
if (!dhtmlObject.xmlDoc.readyState) dhtmlObject.onloadAction(dhtmlObject.mainObject);
else {
if (dhtmlObject.xmlDoc.readyState != 4) return false;
else dhtmlObject.onloadAction(dhtmlObject.mainObject); }
}
};
return this.check;
};
/**
/**
* @desc: return XML top node
* @param: tagName - top XML node tag name (not used in IE, required for Safari and Mozilla)
* @type: private
@ -35,7 +46,7 @@ function dtmlXMLLoaderObject(funcObject, dhtmlObject){
* @topic: 0
*/
dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
if (this.xmlDoc.responseXML) { var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName); var z=temp[0]; }
if (this.xmlDoc.responseXML) { var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName); var z=temp[0]; }
else var z=this.xmlDoc.documentElement;
if (z) return z;
alert("Incorrect XML");
@ -56,6 +67,7 @@ function dtmlXMLLoaderObject(funcObject, dhtmlObject){
}
catch(e){
this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
this.xmlDoc.async=this.async
this.xmlDoc.loadXML(xmlString);
}
this.onloadAction(this.mainObject);
@ -64,7 +76,7 @@ function dtmlXMLLoaderObject(funcObject, dhtmlObject){
try
{
this.xmlDoc = new XMLHttpRequest();
this.xmlDoc.open("GET",filePath,true);
this.xmlDoc.open("GET",filePath,this.async);
this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
this.xmlDoc.send(null);
}
@ -78,7 +90,7 @@ function dtmlXMLLoaderObject(funcObject, dhtmlObject){
else
{
this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
this.xmlDoc.async="true";
this.xmlDoc.async=this.async
this.xmlDoc.onreadystatechange=new this.waitLoadFunction(this);
}
this.xmlDoc.load(filePath);
@ -117,7 +129,7 @@ function getAbsoluteLeft(htmlObject){
}
return xPos;
}
/**
/**
* @desc: Calculate absolute position of html object
* @type: private
* @param: htmlObject - html object
@ -159,7 +171,7 @@ function convertStringToBoolean(inputString){ if (typeof(inputString)=="string")
* @type: private
* @param: str - current url string
* @topic: 0
*/
*/
function getUrlSymbol(str){
if(str.indexOf("?")!=-1)
return "&"
@ -178,6 +190,7 @@ function dhtmlDragAndDropObject(){
this.waitDrag=0;
if (window.dhtmlDragAndDrop) return window.dhtmlDragAndDrop;
window.dhtmlDragAndDrop=this;
return this;
};
@ -197,49 +210,100 @@ function dhtmlDragAndDropObject(){
dhtmlDragAndDropObject.prototype.preCreateDragCopy=function(e)
{
if (window.dhtmlDragAndDrop.waitDrag) {
window.dhtmlDragAndDrop.waitDrag=0;
window.dhtmlDragAndDrop.waitDrag=0;
document.body.onmouseup=window.dhtmlDragAndDrop.tempDOMU;
document.body.onmousemove=window.dhtmlDragAndDrop.tempDOMM;
return;
return false;
}
window.dhtmlDragAndDrop.waitDrag=1;
window.dhtmlDragAndDrop.tempDOMU=document.body.onmouseup;
window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
window.dhtmlDragAndDrop.tempDOMM=document.body.onmousemove;
window.dhtmlDragAndDrop.dragStartNode=this;
window.dhtmlDragAndDrop.dragStartObject=this.dragStarter;
document.body.onmouseup=window.dhtmlDragAndDrop.preCreateDragCopy;
document.body.onmousemove=window.dhtmlDragAndDrop.callDrag;
if ((e)&&(e.preventDefault)) { e.preventDefault(); return false; }
return false;
};
dhtmlDragAndDropObject.prototype.callDrag=function(e){
if (!e) e=window.event;
dragger=window.dhtmlDragAndDrop;
if ((e.button==0)&&(isIE())) return dragger.stopDrag();
if (!dragger.dragNode) {
dragger.dragNode=dragger.dragStartObject._createDragNode(dragger.dragStartNode);
if (!dragger.dragNode) return dragger.stopDrag();
dragger.gldragNode=dragger.dragNode;
document.body.appendChild(dragger.dragNode);
document.body.onmouseup=dragger.stopDrag;
dragger.waitDrag=0;
dragger.dragNode.pWindow=window;
dragger.initFrameRoute();
}
dragger.dragNode.style.left=e.clientX+15+document.body.scrollLeft; dragger.dragNode.style.top=e.clientY+3+document.body.scrollTop;
if (dragger.dragNode.parentNode!=window.document.body){
var grd=dragger.gldragNode;
if (dragger.gldragNode.old) grd=dragger.gldragNode.old;
//if (!document.all) dragger.calculateFramePosition();
grd.parentNode.removeChild(grd);
var oldBody=dragger.dragNode.pWindow;
if (isIE()){
var div=document.createElement("Div");
div.innerHTML=dragger.dragNode.outerHTML;
dragger.dragNode=div.childNodes[0]; }
else dragger.dragNode=dragger.dragNode.cloneNode(true);
dragger.dragNode.pWindow=window;
dragger.gldragNode.old=dragger.dragNode;
document.body.appendChild(dragger.dragNode);
oldBody.dhtmlDragAndDrop.dragNode=dragger.dragNode;
}
dragger.dragNode.style.left=e.clientX+15+(dragger.fx?dragger.fx*(-1):0)+document.body.scrollLeft+"px";
dragger.dragNode.style.top=e.clientY+3+(dragger.fy?(-1)*dragger.fy:0)+document.body.scrollTop+"px";
if (!e.srcElement) var z=e.target; else z=e.srcElement;
dragger.checkLanding(z);
dragger.checkLanding(z,e.clientX, e.clientY );
}
dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject){
if (htmlObject.dragLanding) { if (this.lastLanding) this.lastLanding.dragLanding._dragOut(this.lastLanding);
this.lastLanding=htmlObject; this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode); }
dhtmlDragAndDropObject.prototype.calculateFramePosition=function(n){
//this.fx = 0, this.fy = 0;
if (window.name) {
var el =parent.frames[window.name].frameElement.offsetParent;
var fx=0;
var fy=0;
while (el) { fx += el.offsetLeft; fy += el.offsetTop; el = el.offsetParent; }
if ((parent.dhtmlDragAndDrop)) { var ls=parent.dhtmlDragAndDrop.calculateFramePosition(1); fx+=ls.split('_')[0]*1; fy+=ls.split('_')[1]*1; }
if (n) return fx+"_"+fy;
else this.fx=fx; this.fy=fy;
}
return "0_0";
}
dhtmlDragAndDropObject.prototype.checkLanding=function(htmlObject,x,y){
if ((htmlObject)&&(htmlObject.dragLanding)) { if (this.lastLanding) this.lastLanding.dragLanding._dragOut(this.lastLanding);
this.lastLanding=htmlObject; this.lastLanding=this.lastLanding.dragLanding._dragIn(this.lastLanding,this.dragStartNode,x,y); }
else {
if (htmlObject.tagName!="BODY") this.checkLanding(htmlObject.parentNode);
else { if (this.lastLanding) this.lastLanding.dragLanding._dragOut(this.lastLanding); this.lastLanding=0; }
if ((htmlObject)&&(htmlObject.tagName!="BODY")) this.checkLanding(htmlObject.parentNode,x,y);
else { if (this.lastLanding) this.lastLanding.dragLanding._dragOut(this.lastLanding,x,y); this.lastLanding=0; }
}
}
dhtmlDragAndDropObject.prototype.stopDrag=function(e){
dhtmlDragAndDropObject.prototype.stopDrag=function(e,mode){
dragger=window.dhtmlDragAndDrop;
if (dragger.lastLanding) dragger.lastLanding.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,dragger.lastLanding);
dragger.lastLanding=0;
dragger.dragNode.parentNode.removeChild(dragger.dragNode);
if (!mode)
{
dragger.stopFrameRoute();
var temp=dragger.lastLanding;
dragger.lastLanding=null;
if (temp) temp.dragLanding._drag(dragger.dragStartNode,dragger.dragStartObject,temp);
}
dragger.lastLanding=null;
if ((dragger.dragNode)&&(dragger.dragNode.parentNode==document.body)) dragger.dragNode.parentNode.removeChild(dragger.dragNode);
dragger.dragNode=0;
dragger.gldragNode=0;
dragger.fx=0;
dragger.fy=0;
dragger.dragStartNode=0;
dragger.dragStartObject=0;
document.body.onmouseup=dragger.tempDOMU;
@ -247,4 +311,96 @@ function dhtmlDragAndDropObject(){
dragger.tempDOMU=null;
dragger.tempDOMM=null;
dragger.waitDrag=0;
}
}
dhtmlDragAndDropObject.prototype.stopFrameRoute=function(win){
if (win)
window.dhtmlDragAndDrop.stopDrag(1,1);
for (var i=0; i<window.frames.length; i++)
if ((window.frames[i]!=win)&&(window.frames[i].dhtmlDragAndDrop))
window.frames[i].dhtmlDragAndDrop.stopFrameRoute(window);
if ((parent.dhtmlDragAndDrop)&&(parent!=window)&&(parent!=win))
parent.dhtmlDragAndDrop.stopFrameRoute(window);
}
dhtmlDragAndDropObject.prototype.initFrameRoute=function(win,mode){
if (win) {
window.dhtmlDragAndDrop.preCreateDragCopy();
window.dhtmlDragAndDrop.dragStartNode=win.dhtmlDragAndDrop.dragStartNode;
window.dhtmlDragAndDrop.dragStartObject=win.dhtmlDragAndDrop.dragStartObject;
window.dhtmlDragAndDrop.dragNode=win.dhtmlDragAndDrop.dragNode;
window.dhtmlDragAndDrop.gldragNode=win.dhtmlDragAndDrop.dragNode;
window.document.body.onmouseup=window.dhtmlDragAndDrop.stopDrag;
window.waitDrag=0;
if ((!isIE())&&(mode)) window.dhtmlDragAndDrop.calculateFramePosition();
}
if ((parent.dhtmlDragAndDrop)&&(parent!=window)&&(parent!=win))
parent.dhtmlDragAndDrop.initFrameRoute(window);
for (var i=0; i<window.frames.length; i++)
if ((window.frames[i]!=win)&&(window.frames[i].dhtmlDragAndDrop))
window.frames[i].dhtmlDragAndDrop.initFrameRoute(window,((!win||mode)?1:0));
}
//determines if current browser is IE
function isIE(){
if(navigator.appName.indexOf("Microsoft")!=-1)
if (navigator.userAgent.indexOf('Opera') == -1)
return true;
return false;
}
//multibrowser Xpath processor
dtmlXMLLoaderObject.prototype.doXPath = function(xpathExp,docObj){
if(isIE()){//IE
if(arguments.length==1){
docObj = this.xmlDoc
}
return docObj.selectNodes(xpathExp);
}else{//Mozilla
var nodeObj = docObj;
if(!docObj){
if(!this.xmlDoc.nodeName){
docObj = this.xmlDoc.responseXML
}else{
docObj = this.xmlDoc;
}
}
if(docObj.nodeName.indexOf("document")!=-1){
nodeObj = docObj;
}else{
nodeObj = docObj;
docObj = docObj.ownerDocument;
}
var rowsCol = new Array();
var col = docObj.evaluate(xpathExp, nodeObj, null, XPathResult.ANY_TYPE,null);
var thisColMemb = col.iterateNext();
while (thisColMemb) {
rowsCol[rowsCol.length] = thisColMemb;
thisColMemb = col.iterateNext();
}
return rowsCol;
}
}
if ( window.Node )
Node.prototype.removeNode = function( removeChildren )
{
var self = this;
if ( Boolean( removeChildren ) )
{
return this.parentNode.removeChild( self );
}
else
{
var range = document.createRange();
range.selectNodeContents( self );
return this.parentNode.replaceChild( range.extractContents(), self );
}
}

File diff suppressed because it is too large Load Diff