|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Structuring Tree Controls
|
|
|
|
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.
|
|
|
|
Example: One-level tree control
|
|
|
The following example CFTREE code uses the CFQUERY consists of a single root and a number of individual items:
<CFFORM NAME="form1" ACTION="submit.cfm">
<CFTREE NAME="tree1">
<CFTREEITEM VALUE="FullName"
QUERY="myquery"
QUERYASROOT="Department">
</CFTREE>
<BR><INPUT TYPE="submit" VALUE="Submit">
</CFFORM>
The resulting tree looks like this:
|
|
|
|
Example: Multilevel tree control
|
|
|
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>
The resulting tree control looks like this:
|
|
|
|
Image names in a CFTREE |
|
|
|
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:
- cd
- computer
- document
- element
- folder
- floppy
- fixed
- remote
|
|
|
|
Using commas in CFTREEITEM |
|
|
|
Commas are used to separate CFTREEITEM, VALUE, DISPLAY, IMG, and HREF attribute values. You use commas to separate column names in a CFTREE you want to populate with data from a query. As in the following example, two columns returned by the query are specified in the VALUE attribute:
<CFTREE NAME="tree1" VSCROLL="no"
HSCROLL="no" BORDER="no">
<CFTREEITEM VALUE="Department,LastName"
QUERY="myquery"
QUERYASROOT="Company B"
IMG="folder,folder,document"
PARENT="Company B">
</CFTREE>
In this tree control, Department and LastName are returned by the query. The tree is constructed with LastName entries organized under Department names (assuming the query included an ORDER BY clause on DEPARTMENT). Note also the value of the IMG attribute. Since the tree control consists of three separate levels, you can specify a different built-in or custom image for each level of the tree control by separating each image name with a comma.
|
|
|
  
|
|
|
AllaireDoc@allaire.com
Copyright © 1998, Allaire Corporation. All rights reserved.
|