Tree controls built with cftree
can be very complex. Knowing how to specify the relationship between multiple cftreeitem
entries will help you handle even the most complex of cftree
constructs.
This example consists of a single root and a number of individual items:
<cfquery name="deptquery" datasource="CompanyInfo"> SELECT Dept_ID, FirstName + ' ' + LastName AS FullName FROM Employee ORDER BY Dept_ID </cfquery>
<cfform name="form1" action="submit.cfm"> <cftree name="tree1"> <cftreeitem value="FullName" query="deptquery" queryasroot="Department"> </cftree> <br> <input type="submit" value="Submit"> </cfform>
When populating a cftree
, you manipulate the structure of the tree by specifying a cftreeitem
parent. In this example, every cftreeitem
, except the top level, specifies a parent. The parent
attribute allows your cftree
to show the relationships between elements in the tree control. (This example populates the tree directly, not with a query.)
<cfform name="form2" action="cfform_submit.cfm"
method="Post"> <cftree name="tree1" hscroll="No" vscroll="No" border="No"> <cftreeitem value="Divisions"> <cftreeitem value="Development" parent="Divisions" img="folder"> <cftreeitem value="Product One" parent="Development"> <cftreeitem value="Product Two" parent="Development"> <cftreeitem value="GUI" parent="Product Two" img="document"> <cftreeitem value="Kernel" parent="Product Two" img="document"> <cftreeitem value="Product Three" parent="Development"> <cftreeitem value="QA" parent="Divisions" img="folder"> <cftreeitem value="Product One" parent="QA"> <cftreeitem value="Product Two" parent="QA"> <cftreeitem value="Product Three" parent="QA"> <cftreeitem value="Support" parent="Divisions" img="fixed"> <cftreeitem value="Product Two" parent="Support"> <cftreeitem value="Sales" parent="Divisions" img="cd"> <cftreeitem value="Marketing" parent="Divisions" img="document"> <cftreeitem value="Finance" parent="Divisions" img="element"> </cftree> </cfform>
When you use the img
attribute, ColdFusion displays the specified image beside the tree items. You can specify a built-in ColdFusion image name or the URL of an image of your choice, such as http://localhost/Myapp/Images/Level3.gif. As a general rule, your custom images should be less than 20 pixels high.
Note You can also control the tree appearance by using the |