<script language="JavaScript">
function TreeAction(id, act, path) {
var elt = document.getElementById(id);
if (!elt) {
alert("Error: cannot find element with id '" + id + "'");
return;
}
var form = forms_getForm(elt);
var actInput = id + ":action";
var pathInput = id + ":path";
form[actInput].value = act
form[pathInput].value = path;
forms_submitForm(elt, id);
// Reset fields (this form may be reposted later when in Ajax mode)
form[actInput].value = "";
form[pathInput].value = "";
return false;
}
function TreeToggleCollapse(id, path) {
return TreeAction(id, "toggle-collapse", path);
}
function TreeToggleSelect(id, path) {
return TreeAction(id, "toggle-select", path);
}
</script>
<p>This page shows a number of different possible renderings of a tree widget. They're all very easily defined
in the form template using the <ft:tree> and <ft:tree-nodes> instructions (currently available only
in the JXTemplate version of the CForms template language).</p>
-<fi:form-template ajax="true" action="6869316c76407a6e3c6c774279730a143c015033.continue" method="get">
Name:
-<bu:replace id="name">
-<fi:field id="name" state="active" required="true">
<fi:datatype type="string"/>
</fi:field>
</bu:replace>
<br/>
-<bu:replace id="tree">
-<div style="float: right; border: dotted black 1px">
Article list:
-<ul>
-<fi:field id="tree:action">
<fi:styling type="hidden"/>
</fi:field>
-<fi:field id="tree:path">
<fi:styling type="hidden"/>
</fi:field>
-<li>
root
(
<a href="#" onclick="return TreeToggleCollapse('tree', '/')">
details
</a>
)
<ul>
</ul>
</li>
</ul>
</div>
</bu:replace>
<br/>
-<bu:replace id="tree2">
-<div>
Tree sample:
-<fi:field id="tree2:action">
<fi:styling type="hidden"/>
</fi:field>
-<fi:field id="tree2:path">
<fi:styling type="hidden"/>
</fi:field>
-<div style="margin-left: 15px">
-<a href="#" onclick="return TreeToggleCollapse('tree2', '/')">
<img src="resources/forms/img/tree/win/collapsed.gif" border="0"/>
</a>
root
</div>
</div>
</bu:replace>
Example of a tree-table
-<bu:replace id="files">
-<table>
-<tr>
<th/>
<th>Name</th>
<th>Last modified</th>
</tr>
-<fi:field id="files:action">
<fi:styling type="hidden"/>
</fi:field>
-<fi:field id="files:path">
<fi:styling type="hidden"/>
</fi:field>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
-<a href="#" onclick="return TreeToggleCollapse('files', '/dreamteam')">
<img src="resources/forms/img/tree/win/collapsed.gif" border="0"/>
</a>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/dreamteam')">
dreamteam</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
-<a href="#" onclick="return TreeToggleCollapse('files', '/sql')">
<img src="resources/forms/img/tree/win/collapsed.gif" border="0"/>
</a>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/sql')">
sql</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
<img src="resources/forms/img/tree/win/leaf.gif" border="0"/>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/sitemap.xmap')">
sitemap.xmap</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
<img src="resources/forms/img/tree/win/leaf.gif" border="0"/>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/pom.xml')">
pom.xml</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
-<a href="#" onclick="return TreeToggleCollapse('files', '/forms')">
<img src="resources/forms/img/tree/win/collapsed.gif" border="0"/>
</a>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/forms')">
forms</a>
</td>
<td>Dec 11, 2023</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
-<a href="#" onclick="return TreeToggleCollapse('files', '/flow')">
<img src="resources/forms/img/tree/win/collapsed.gif" border="0"/>
</a>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/flow')">
flow</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
-<a href="#" onclick="return TreeToggleCollapse('files', '/library')">
<img src="resources/forms/img/tree/win/collapsed.gif" border="0"/>
</a>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/library')">
library</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
-<a href="#" onclick="return TreeToggleCollapse('files', '/swan')">
<img src="resources/forms/img/tree/win/collapsed.gif" border="0"/>
</a>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/swan')">
swan</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
-<a href="#" onclick="return TreeToggleCollapse('files', '/messages')">
<img src="resources/forms/img/tree/win/collapsed.gif" border="0"/>
</a>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/messages')">
messages</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
<img src="resources/forms/img/tree/win/leaf.gif" border="0"/>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/welcome.xml')">
welcome.xml</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
<img src="resources/forms/img/tree/win/leaf.gif" border="0"/>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/suggest-list.xsl')">
suggest-list.xsl</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
-<a href="#" onclick="return TreeToggleCollapse('files', '/captcha')">
<img src="resources/forms/img/tree/win/collapsed.gif" border="0"/>
</a>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/captcha')">
captcha</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
-<a href="#" onclick="return TreeToggleCollapse('files', '/xsl')">
<img src="resources/forms/img/tree/win/collapsed.gif" border="0"/>
</a>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/xsl')">
xsl</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
-<a href="#" onclick="return TreeToggleCollapse('files', '/resources')">
<img src="resources/forms/img/tree/win/collapsed.gif" border="0"/>
</a>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/resources')">
resources</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
-<a href="#" onclick="return TreeToggleCollapse('files', '/aggregate')">
<img src="resources/forms/img/tree/win/collapsed.gif" border="0"/>
</a>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/aggregate')">
aggregate</a>
</td>
<td>Aug 31, 2006</td>
</tr>
-<tr>
-<td>
<input type="checkbox" name="$select"/>
</td>
-<td>
-<span style="margin-left: 0px">
<img src="resources/forms/img/tree/win/leaf.gif" border="0"/>
</span>
<a class="unselected" href="#" onclick="return TreeToggleSelect('files', '/forms.xsamples')">
forms.xsamples</a>
</td>
<td>Aug 31, 2006</td>
</tr>
</table>
</bu:replace>
-<bu:replace id="ok">
-<fi:action id="ok" state="active">
<fi:label>OK</fi:label>
</fi:action>
</bu:replace>
<br/>
<a href="./do-sampleTree.flow">Restart this sample</a>
-
<a href="./">Back to samples</a>
</fi:form-template>
</content>