An example of the source code is as following. In the example, I have four nodes (except the root node). The "average" node has a child "divide". The "divide" node has two children "sum" and "FFT". The purpose of using JSript to move the nodes around is for the user to to change the structure of the tree so that the tree can better represent the user's understanding for a biomedical problem.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>
<script type="text/javascript" src="../../../../Program%20Files/MUnit/MUnit/js/ajax.js"></script>
<script type="text/javascript" src="../../../../Program%20Files/MUnit/MUnit/js/context-menu.js"></script><!-- IMPORTANT! INCLUDE THE context-menu.js FILE BEFORE drag-drop-folder-tree.js -->
<script type="text/javascript" src="../../../../Program%20Files/MUnit/MUnit/js/drag-drop-folder-tree.js">
</script>
<link rel="stylesheet" href="../../../../Program%20Files/MUnit/MUnit/munit.css" type="text/css"/>
<title>MUnit Control Panel</title>
</head>
<body>
<div id=banner>
<!-- It is part of the license agreement that this banner
remains intact and displayed in reports -->
MUnit from <a href="http://xtargets.com">XTargets</a><br/>
Copyright Brad Phelan 2005, under the GPL license.
</div>
<div id=contents>
<h1>MUnit Control Panel </h1>
<h2>Add Test Suites</h2>
<div id="add">
Enter the name of a test case file eg: <i>my_testcase</i>. If the
file exists it will be added to the control panel. If it doesn't
exist you will be asked to choose a directory and a new template
test will be created.
<form method="post" action="matlab:munit_cgi">
<input name="test" value="">
<input type="hidden" name="dispatch" value="add"/>
<input type="submit" name="add" value="add"/>
</form>
</div>
<h2>Test Suites</h2>
<div id="tests">
<ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree">
<p id="node0" noDrag="true" noSiblings="true" noDelete="true" noRename="true">
<a href="#">Root node</a> </p>
<ul>
<li id="node1"><a href="#">average
<a href="matlab:edit('test_average');">edit</a>
<a href="matlab:munit_control_panel('suite','test_ave rage');">run</a>
<a href="matlab:munit_control_panel('del','test_avera ge');">remove</a>
<br/>
<ul>
<li id="node2"><a href="#">divide
<a href="matlab:edit('test_divide');">edit</a>
<a href="matlab:munit_control_panel('suite','test_div ide');">run</a>
<a href="matlab:munit_control_panel('del','test_divid e');">remove</a>
<br/>
<ul>
<li id="node3"><a href="#">sum
<a href="matlab:edit('test_sum');">edit</a>
<a href="matlab:munit_control_panel('suite','test_sum ');">run</a>
<a href="matlab:munit_control_panel('del','test_sum') ;">remove</a>
<br/>
<li id="node4"><a href="#">FFT
<a href="matlab:edit('test_FFT');">edit</a>
<a href="matlab:munit_control_panel('suite','test_FFT ');">run</a>
<a href="matlab:munit_control_panel('del','test_FFT') ;">remove</a>
<br/>
</ul>
</a>
</li>
</ul>
</a>
</li>
</ul>
</ul>
</div>
</div>
<script type="text/javascript">
treeObj = new JSDragDropTree();
treeObj.setTreeId('dhtmlgoodies_tree2');
treeObj.setMaximumDepth(3);
treeObj.setMessageMaximumDepthReached('Maximum depth reached'); // If you want to show a message when maximum depth is reached, i.e. on drop.
treeObj.initTree();
treeObj.expandAll();
</script>
<a href="#" onclick="treeObj.collapseAll()">Collapse all</a> |
<a href="#" onclick="treeObj.expandAll()">Expand all</a>
</body>
</html>[/HTML]
My problem is that, the structure of nodes is read from a matlab file, means it is not stored on a server so that I can send back the nodes' information by ajax. The only way I can think of is to get the relationship of nodes by JScript. But I dont know whethere it is possilbe at all to do that?? Please leave ur comment if you have any idea on this. Thank you very much!
6
