The cftree
form lets you display hierarchical information in a space-saving collapsible tree populated from data source queries. To build a tree control with cftree
, you use individual cftreeitem
tags to populate the control. You can specify one of six built-in icons to represent individual items in the tree control, or supply a URL to your own gif image.
tree1.cfm
in ColdFusion Studio.
<cfquery name="engquery" datasource="CompanyInfo"> SELECT FirstName + ' ' + LastName AS FullName FROM Employee </cfquery> <cfform name="form1" action="submit.cfm" method="Post"> <cftree name="tree1" required="Yes" hscroll="No"> <cftreeitem value=fullname query="engquery" queryasroot="Yes" img="folder,document"> </cftree> </cfform>
The following table describes the highlight code and its function:
In a query that you display using a cftree
control, you might want to organize your employees by the department. In this case, you separate column names with commas in the cftreeitem
value
attribute.
tree2.cfm
in ColdFusion Studio.
<!--- CFQUERY with an ORDER BY clause ---> <cfquery name="deptquery" datasource="CompanyInfo"> SELECT Dept_ID, FirstName + ' ' + LastName AS FullName FROM Employee ORDER BY Dept_ID </cfquery> <!--- Build the tree control ---> <cfform name="form1" action="submit.cfm" method="Post"> <cftree name="tree1" hscroll="No" border="Yes" height="350" required="Yes"> <cftreeitem value="Dept_ID, FullName" query="deptquery" queryasroot="Dept_ID" img="cd,folder"> </cftree> <br> <br><input type="Submit" value="Submit"> </cfform>
The following table describes the highlight code and its function:
Note that the cftreeitem
comma-separated img
and the value
attributes both correspond to the tree level structure. If you leave out the img
attribute, ColdFusion uses the folder image for all levels in the tree except the individual items, which have bullets.
The cftree
tag allows you to force a user to select an item from the tree control by setting the required
attribute to Yes. With or without the required
attribute, ColdFusion passes two form variables to the application page specified in the cftree
action
attribute:
To return the root part of the path, set the completepath
attribute of cftree
to Yes; otherwise, the path value starts with the first node. If you specify a root name in queryastroot
, that value gets returned as the root.
In the previous example, if the user selects the name "John Allen" in the tree, the following form variables are returned by ColdFusion:
Form.tree1.node = John Allen Form.tree1.path = Dept_ID\3\John Allen
You can specify the character used to delimit each element of the path form variable in the cftree
delimiter
attribute. The default is a backslash.
Although, the cftree
does not include a validate
attribute, you can use the required
attribute to force a user to select an item from the tree control. In addition, you can use the onvalidate
attribute to specify the JavaScript code to perform validation.