faq.html

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

</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>