[Sign Up][Log In]

Drag and Drop Tree Control

Drag and Drop the nodes in the treeview below. Right-click for a context menu with more options.
This treeview is a simple unordered HTML list wich is totally styled with CSS.

Output

By setting the attribute type="advanced" and using the provided javascript file, DBTree will create a fully customizable collapsible tree with drag & drop functionality as well as a right-click contextmenu.
Other than for the simple treeview, you have to write less code on the editpage.
The following pages have to be created:

• 1. Page for a treeview
• 2. Page for switching the action: editpage
• 3. Page for inserting a new record
• 4. Page for updating a record

1. Page for a treeview

The first page we create contains the treeview of our database table. Note the attributes action="edit" and type="simple". With the editpage attribute you indicate the path to the second page.
Instead of using datasource and table, you could also retrieve the records from cfquery and then use the query attribute.
Drag and Drop the nodes in the tree below. Right-Click on a element for more options. The Database is automatically updated with DBTree using Ajax.

Syntax

<cfmodule template="relative path to dbtree.cfm"
instancename="treeview"
action="edit"
type="advanced"
datasource="name of the datasource"
table="name of the database table"
id="column name"
parent="column name"
contentfield="column name"
editpage="web/demo/edittree2.cfm"
btn_addroot="create new root"
btn_moveroot="move to root"
btn_add="add node"
btn_edit="edit node"
btn_delete="delete node"
btn_up="move upwards"
btn_down="move downwards"
item="images/bullet.gif"
folderopen="images/minus.gif"
folderclosed="images/plus.gif"
imagewidth="20px"
imageheight="20px"
fontsize="13px"
color="000"
contextlinkcolor="000"
contextlinkcolor_over="fff"
contextbgcolor="eee"
contextbgcolor_over="6ea4f4"
tipcolor="fff"
tipbgcolor="6ea4f4">

[ Up ]

2. Page for switching the action: editpage

The "editpage" receives the url parameters node and action. Now you have to switch the actions with a cfswitch or an if-then-else construct to forward the user to an appropriate form for inserting or updating the database record with the given node-id.
Here is an example for a edit page:

Example Code

<cfswitch expression="#url.action#"> <cfcase value="add"> <form action="web/demo/insertnode2.cfm" method="post" id="frminsert"> <cfif #url.node# eq 0> <h2>Add new Root node</h2> <cfelse> <cfquery name="node" datasource="#application.dsn#"> SELECT * FROM #application.tableprefix#tblSimpleEdit WHERE id=#url.node# </cfquery> <h2>Add new node to "<cfoutput>#node.title#</cfoutput>"</h2> </cfif> <table class="tabelleedit" cellpadding="2"> <tr> <td>Title:</td> <td><input name="title" type="text" id="title" size="50" /></td> </tr> <tr> <td>Hyperlink:</td> <td><input name="link" type="text" id="link" size="50" /></td> </tr> <tr> <td>Target:</td> <td><select name="target" size="1" id="target"> <option value="" selected>-------</option> <option value="_blank">_blank</option> <option value="_parent">_parent</option> <option value="_self">_self</option> <option value="_top">_top</option> </select></td> </tr> </table> <p> <input type="hidden" name="id" value="<cfoutput>#url.node#</cfoutput>" /> <input type="button" name="Cancel" value="cancel" onClick="history.go(-1);" class="button" /> <input type="submit" name="Submit" value="save" class="button" /> </p> </form> </cfcase> <cfcase value="edit"> <cfquery name="node" datasource="#application.dsn#"> SELECT * FROM #application.tableprefix#tblSimpleEdit WHERE id=#url.node# </cfquery> <form action="web/demo/updatenode2.cfm" method="post" id="frmedit"> <h2>Edit node</h2> <cfoutput query="node"> <table class="tabelleedit" cellpadding="2"> <tr> <td>Title:</td> <td><input name="title" type="text" id="title" value="#title#" size="50"></td> </tr> <tr> <td>Hyperlink:</td> <td><input name="link" type="text" id="link" value="#link#" size="50" /></td> </tr> <tr> <td>Target:</td> <td><select name="target" size="1" id="target"> <option <cfif #target# eq "">selected</cfif> value="">-------</option> <option <cfif #target# eq "_blank">selected</cfif> value="_blank">_blank</option> <option <cfif #target# eq "_parent">selected</cfif> value="_parent">_parent</option> <option <cfif #target# eq "_self">selected</cfif> value="_self">_self</option> <option <cfif #target# eq "_top">selected</cfif> value="_top">_top</option> </select></td> </tr> </table> </cfoutput> <p> <input type="hidden" name="id" value="<cfoutput>#node.id#</cfoutput>" /> <input type="button" name="Cancel" value="cancel" onClick="history.go(-1);" class="button" /> <input type="submit" name="Submit" value="save" class="button" /> </p> </form> </cfcase> </cfswitch>

[ Up ]

3. Page for inserting a new record

This is the form action page for inserting a record into a DBTree table. Note: the new record will become the last child of node="".

Syntax

<cf_dbtree
instancename="id of the menu"
datasource="name of the datasource"
table="name of the database table"
action="insert"
id="column name"
parent="column name"
node="#form.id#"
formfields="title,link,target">

<cflocation url="advanced-edit-mode.cfm" addtoken="no">

[ Up ]

4. Page for updating a record

This is the form action page for updating a record in a DBTree table. Note: the node attribute is the record id.

Syntax

<cf_dbtree
instancename="id of the menu"
datasource="name of the datasource"
table="name of the database table"
action="update"
id="column name"
parent="column name"
node="#form.id#"
formfields="title,link,target">

<cflocation url="advanced-edit-mode.cfm" addtoken="no">

[ Up ]