The following simple example creates a simple hierarchical tree of unlimited depth, with one node per level. Each node label (specified by the display attribute) identifies the node depth:

The following example shows the CFML page:

<cfform name="testform">
    <cftree name="t1" format="html">
        <cftreeitem bind="cfc:makeTree.getNodes({cftreeitemvalue},{cftreeitempath})">
    </cftree>
</cfform>

The following examples shows the maketree.cfc file with the getNodes method that is called when the user expands a node:

<cfcomponent>
    <cffunction name="getNodes" returnType="array" output="no" access="remote">
        <cfargument name="nodeitemid" required="true">
        <cfargument name="nodeitempath" required="true">
        <!--- The initial value of the top level is the empty string. --->
        <cfif nodeitemid IS "">
            <cfset nodeitemid =0>
        </cfif>
        <!--- Create a array with one element defining the child node. --->
        <cfset nodeArray = ArrayNew(1)>
        <cfset element1 = StructNew()>
        <cfset element1.value = nodeitemid + 1>
        <cfset element1.display = "Node #nodeitemid#">
        <cfset nodeArray[1] = element1>
        <cfreturn nodeArray>
    </cffunction>
</cfcomponent>

Handling leaf nodes

Code that returns the information for leaf nodes of the tree should always set the LEAFNODE structure field to true. This prevents the tree from displaying a + expansion indicator in the tree leaf node tree entries and from attempting to expand the node. The following example shows how you use the LEAFNODE field.