guide.html

用js做的树 用js做的树 用js做的树

	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)
<br>
Since v.1.4 showItemCheckbox can be aplied to whole tree (use 0 or null as first argument)

</div>		

<a name="radiobut"><h4 >Radiobuttons in tree</h4></a><div class="block">
dhtmlxTree support radiobuttons. To turn them on for the whole tree 	 	
<XMP>
<script>
	tree.enableRadiobuttons(true);
</script>
</XMP>	
<br>
To turn on radiobuttons for some particular node (instead of checkboxes):
<XMP>
<script>
	tree.enableCheckboxes(true);
	tree.enableRadiobuttons(nodeId,true);
</script>
</XMP>	
<br>
By default radibuttons grouped by level, but since v.1.4 it can be set to whole tree:

<XMP>
	tree.enableRadiobuttons(true)
</XMP>

<br>
Checkboxes related API methods and XML attributes are actual for radiobuttons also (taking into account specificity of radiobuttons functionlity). 

</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>
3. <a href="#distparse">Distributed 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, although <a href="#distparse">Distributed Parsing</a> can help here. 
</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>	<br>
<strong>HTTPS compatibility</strong>
<br><br>
For HTTPS compatibility we added two more parameters to context menu constructor:<br>
<li>Images URL</li>
<li>Dummy page URL (url of the page to use for iframes src /now they are empty as iframes are used to make menu be positioned under selectboxes in IE/ in menu to make it compatible with https)		
<XMP>
<script>
//init menu compatible with sHTML
	aMenu=new dhtmlXContextMenuObject('120',0,"Demo menu","imgs/","empty.html");
	...
</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