What Sothink Tree Menu Can Do?

 

Back

Home

Next

 

ASP sample of dynamic tree menu created from database

Part 1: Sample Instruction

To create a dynamic tree menu from database, you can input some condition clauses using either CGI (ASP, PHP, and etc.) or JavaScript language, that is, to input the Prefix or Suffix for a node in the Node Settings > Condition dialog.

You can view the following tree menu on the web server that supports ASP (Active Server Pages).

As you see, in this sample, the tree menu contains two levels: the parent level shows the product categories and the sub level shows the specific products. Actually, there are only two nodes, one in the parent level and the other is in the sub level.

The final result that you are seeing is just got from database.

Below is the diagram of the database.

Part 2: Steps

The following are the steps of this example:

(Before creating the tree menu, you should make a database containing the information of the product categories and the specific products.)

1. Create a tree menu from Blank. Choose "Node Settings" and click "General". Input <%=sCatName%> in the text box.

2. Click "Condition" in "Node Settings".  And input the prefix and suffix for the node.



Note: when you add the condition, you may get a warning message in Tree Menu. That's because the condition code is server-side code which can not be processed by the browser directly. The warning will not show when you add the tree menu to an ASP page that is supported by server. You can uncheck "Preview > Enable Auto-Refresh" to avoid seeing the warnings.
Tips: To prevent this error popping up, you can add the JavaScript comment delimiters /* and */ to the Prefix as well as Suffix. In that way the preview ignores the extra code and the code works well on the server side processing.

For example:
Prefix:
/*
<%
While Not sCat.EOF
sCatName = rscat("NAME")
%>
*/

Suffix:
/*
<%rsCat.MoveNext%>
<%Wend%>
*/

3. Click "Append Sub Node " button to add a sub node of it, and then input <%=sProduct%> in text box. In the link field, input <%=sLink%>.

4. Click "Condition" in "Node Settings" and input the prefix and suffix for the node.

Note: Normally in order to optimize the menu code, if several nodes have the same property, only one node's property code is recorded and other nodes take reference of its property code. If we add a condition to this node, there is possibility that it will be invisible when its condition is not met. And its property code can not be referenced by other nodes either. This will cause the whole tree menu can not work correctly. Please do check "This node may be invisible at run-time" to avoid the problem.

 

Part 3: Code Explanation

This is the source code at the beginning of this sample page.

Code	Explanation
<%Option Explicit%>
<% Dim Dbq, Dsn, Dc Dim rsCat, rsProduct Dim sCatName, sProduct, sLink                                                   Dbq = Server.MapPath(".\") & "\products.mdb;" Dsn = "driver={Microsoft Access Driver (*.mdb)};pwd=;Dbq=" & Dbq Set Dc = Server.CreateObject("ADODB.Connection") Dc.Open Dsn	Connect with the database.
Set rsCat = Dc.Execute("SELECT * FROM CATEGORY") %>	Retrieve recordset from the CATEGORY table.

After you add node condition and edit the node, Tree Menu inserts following code into the page. The entire source code below is generated by Tree Menu program. Your editing of conditions will be saved in the menu's configuration file (*.stm), which can be edited again.
To learn further what the code represents,  please read the following code explanation:

Code	Explanation
stBM(1,"tree77cb".....)	Begin the whole tree menu.
stBS("p0",[0]);	Begin a sub node (nodes of category).
<% While Not rsCat.EOF sCatName=resCat("NAME") %>	Walk through the CATEGORY recordset and save each category's name as variable "sCatName".
stIT("p0i0",["<%=sCatName%>","",.....)	<%=sCatName%> is the category name.
stBS("p1",[],"p0")	Begin a sub node (nodes of product).
<% Set rsProduct = Dc.Execute("SELECT * FROM PRODUCTS WHERE CATID=" & rsCat(0)) While Not rsProduct.EOF sProduct = rsProduct("NAME") sLink = rsProduct("LILNK") %>	Retrieve recordset from the PRODUCT table. Walk through the PRODUCT recordset and save product name and link as temporary variables.
stIT("p1i0", [,"<%=sProduct%> .....)	Append a node. <%=sProduct%> is the node text.
<% rsProduct.MoveNext Wend %>	Move to the next record of PRODUCT table.
stES();	End of a sub node.
<%rsCat.MoveNext%> <%Wend%>	Move to the next record of the CATEGORY recordset.
stES();	End of a sub node.
stEM();	End of the whole tree menu.