Populates a form tree control, created with the cftree
tag, with elements. To display icons, you can use the img
values that ColdFusion provides, or reference your own icons.
<cftreeitem
value = "text"
display = "text"
parent = "parent_name"
img = "filename"
imgopen = "filename"
href = "URL"
target = "URL_target"
query = "queryname"
queryAsRoot = "Yes" or "No"
expand = "Yes" or "No">
cfapplet
,
cfform
,
cfgrid
,
cfgridcolumn
,
cfgridrow
,
cfgridupdate
,
cfinput
,
cfselect
,
cfslider
,
cftextinput
,
cftree
Attribute | Req/Opt | Default | Description |
---|---|---|---|
value |
Required |
|
Value passed when |
display |
Optional |
value |
Tree item label. When populating a tree with data from a query, specify names in a delimited list. Example: |
parent |
Optional |
|
Value for tree item parent. |
img |
Optional |
folder |
Image name, filename, or file URL for tree item icon. The following values are provided:
You can specify a custom image. To do so, include path and file extension; for example:
To specify more than one image in a tree, or an image at the second or subsequent level, use commas to separate names, corresponding to level; for example:
|
imgopen |
Optional |
|
Icon displayed with open tree item. You can specify icon filename with a relative path. You can use a ColdFusion image. |
href |
Optional |
|
URL to associate with tree item or query column for a tree that is populated from a query. If When populating a tree with data from a query, HREFs can be specified in delimited list; for example:
|
target |
Optional |
|
Target attribute of href URL. When populating a tree with data from a query, specify target in delimited list:
|
query |
Optional |
|
Query name to generate data for the treeitem. |
queryAsRoot |
Optional |
|
Defines query as the root level. This avoids having to create another parent cftreeitem.
If you do not specify a root name, ColdFusion returns the query name as the root. |
expand |
Optional |
Yes |
|
This tag requires the client to download a Java applet. Downloading an applet takes time; therefore, using this tag might be slightly slower than using an HTML form element or the cfinput
tag to get the same information.
For this tag to work properly. the browser must be JavaScript-enabled.
<!--- This example shows the use of cftreeitem in cfform. Query takes
employee list, and uses cftree and cfselect to display query results.
Shows an alternate means of displaying the data ---> <!--- set a default for the employeeNames variable ---> <cfparam name = "employeeNames" default = ""> <!--- if an employee name has been passed from the form, set employeeNames
variable to this value ---Auto> <cfif IsDefined("form.employeeNames")> <cfset employeeNames = form.employeeNames> </cfif> <!--- query the datasource to find the employee information---> <cfquery name = "GetEmployees" dataSource = "cfsnippets"> SELECT Emp_ID, FirstName, LastName, EMail, Phone, Department FROM Employees WHERE 0=0 <cfif employeeNames is not ""> AND LastName = '#employeeNames#' </cfif> </cfquery> <!--- Use cfform when using other cfinput tools ---> <cfform action = "cfindex.cfm"> <!--- Use cfselect to present the contents of the query by column ---> <h3>cfselect Presentation of Data</h3> <h4>Click an employee's last name and click "see information for this employee" to see expanded information.</h4> <cfselect name = "EmployeeNames" message = "Select an Employee Name" size = "#getEmployees.recordcount#" query = "GetEmployees" value = "LastName" required = "No"> <option value = "">Select All </cfselect> <input type = "Submit" name = "" value = "see information for this employee"> <!--- showing use of cftree for expanded presentation of data ---> <!--- Loop through the query to create each branch of the cftree ---> <h3>cftree Presentation of Data</h3> <h4>Click the folders to "drill down" and reveal information.</h4> <p>cftreeitem is used to create the branches of the cftree. <p><cftree name = "SeeEmployees" height = "150" width = "240" font = "Arial Narrow" bold = "No" italic = "No" border = "Yes" hScroll = "Yes" vScroll = "Yes" required = "No" completePath = "No" appendKey = "Yes" highlightHref = "Yes"> <cfloop query = "GetEmployees"> <cftreeitem value = "#Emp_ID#" parent = "SeeEmployees" expand = "No"> <cftreeitem value = "#LastName#" display = "Name" parent = "#Emp_ID#" queryAsRoot = "No" expand = "No"> <cftreeitem value = "#LastName#, #FirstName#" parent = "#LastName#" expand = "No" queryAsRoot = "No"> <cftreeitem value = "#Department#" display = "Department" parent = "#Emp_ID#" queryAsRoot = "No" expand = "No"> <cftreeitem value = "#Department#" parent = "#Department#" expand = "No" queryAsRoot = "No"> <cftreeitem value = "#Phone#" display = "Phone" parent = "#Emp_ID#" queryAsRoot = "No" expand = "No"> <cftreeitem value = "#Phone#" parent = "#Phone#" expand = "No" queryAsRoot = "No"> <cftreeitem value = "#Email#" display = "Email" parent = "#Emp_ID#" queryAsRoot = "No" expand = "No"> <cftreeitem value = "#Email#" parent = "#Email#" expand = "No" queryAsRoot = "No"> </cfloop> </cftree> <!--------For a more comprehensive, quicker view, you can use CFGRID -------> <h3>cfgrid Presentation of Data</h3> <cfgrid name="SampleGrid" width="600" query="GetEmployees" insert="No" delete="No" sort="No" font="Verdana" bold="No" italic="No" appendkey="No" highlighthref="No" griddataalign="LEFT" gridlines="Yes" rowheaders="No" rowheaderalign="LEFT" rowheaderitalic="No" rowheaderbold="No" colheaders="Yes" colheaderalign="CENTER" colheaderitalic="No" colheaderbold="No" bgcolor="Teal" selectmode="BROWSE" picturebar="No"> <cfgridcolumn name="LastName" header="Last Name" headeralign="LEFT" dataalign="LEFT" bold="No" italic="No" select="Yes" display="Yes" headerbold="No" headeritalic="No"> <cfgridcolumn name="FirstName" header="First Name" headeralign="LEFT" dataalign="LEFT" fontsize="2" bold="No" italic="No" select="No" display="Yes" headerbold="No" headeritalic="No"> <cfgridcolumn name="Email" header="Email" headeralign="LEFT" dataalign="LEFT" bold="No" italic="No" select="No" display="Yes" headerbold="No" headeritalic="No"> <cfgridcolumn name="Phone" header="Phone" headeralign="LEFT" dataalign="LEFT" bold="No" italic="Yes" select="No" display="Yes" headerbold="No" headeritalic="No"> <cfgridcolumn name="Department" header="Department" headeralign="LEFT" dataalign="LEFT" bold="Yes" italic="No" select="No" display="Yes" headerbold="No" headeritalic="No"> <cfgridcolumn name="Emp_ID" header="ID" headeralign="LEFT" dataalign="LEFT" width="40" bold="No" italic="No" select="No" display="Yes" headerbold="No" headeritalic="No"> </cfgrid> </cfform>