[Sign Up][Log In]

Simple Edit Mode

Output

• Create new Root

• Link 1 [add] [edit] [delete] [move to root] [up] [down]
• Test [add] [edit] [delete] [move to root] [up] [down]
• Link 3 [add] [edit] [delete] [move to root] [up] [down]
• Link 3.1 [add] [edit] [delete] [move to root] [up] [down]
  • Link 3.1.2 [add] [edit] [delete] [move to root] [up] [down]

For fully using DBTrees' modifying functionality, you need to create some .cfm pages. One page would contain the tree itself configurated for editing. On that page you would also have to indicate a page where you send the action and the node of that tree. This is made with the attribute 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.

Syntax

<cf_dbtree
instancename="id of the menu"
datasource="name of the datasource"
table="name of the database table"
action="edit"
type="simple"
id="column name"
parent="column name"
contentfield="column name"
editpage="path to the edit page"
btn_addroot="create new root"
btn_moveroot="[move to root]"
btn_add="[add]"
btn_edit="[edit]"
btn_delete="[delete]"
btn_up="[up]"
btn_down="[down]">

[ 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/insertnode1.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/updatenode1.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> <cfcase value="delete"> <cfmodule template="../../dbtree/dbtree.cfm" datasource="#application.dsn#" table="#application.tableprefix#tblSimpleEdit" action="delete" node="#url.node#"> <cflocation url="simple-edit-mode.cfm" addtoken="no"> </cfcase> <cfcase value="up"> <cfmodule template="../../dbtree/dbtree.cfm" datasource="#application.dsn#" table="#application.tableprefix#tblSimpleEdit" action="up" node="#url.node#"> <cflocation url="simple-edit-mode.cfm" addtoken="no"> </cfcase> <cfcase value="down"> <cfmodule template="../../dbtree/dbtree.cfm" datasource="#application.dsn#" table="#application.tableprefix#tblSimpleEdit" action="down" node="#url.node#"> <cflocation url="simple-edit-mode.cfm" addtoken="no"> </cfcase> <cfcase value="moveroot"> <cfmodule template="../../dbtree/dbtree.cfm" datasource="#application.dsn#" table="#application.tableprefix#tblSimpleEdit" action="moveroot" node="#url.node#"> <cflocation url="simple-edit-mode.cfm" addtoken="no"> </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="simple-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="simple-edit-mode.cfm" addtoken="no">

[ Up ]