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 labyrinthine of CFTREE constructs.
Note | The following tree examples all use the result set from folllowing query. To run any of the tree examples, insert the query into your test template: |
<!--- CFQUERY with an ORDER BY clause ---> <CFQUERY NAME="deptquery" DATASOURCE="CompanyInfo"> SELECT Department_ID, FirstName + ' ' + LastName AS FullName FROM EMPLOYEES ORDER BY Department_ID </CFQUERY>
This example consists of a single root and a number of individual items:
<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 TREEITEM parent. In this example, every TREEITEM, except the top level, specifies a parent. The PARENT attribute allows your CFTREE to show the relationships between elements in the tree control.
<CFFORM NAME="form1" 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 TYPE="Image" attribute, ColdFusion attempts to display an image corresponding to the value in the column, which can be a built-in ColdFusion image name, or an image of your choice in the cfide\classes
directory or subdirectory, referenced with a relative URL.
The built-in image names are: