Using ASP and JavaScript to implement dynamic hierarchical catalogs on Web pages

Source: Internet
Author: User
Tags date array chr functions implement trim name database oracle database
Dynamic | Web page one, dynamic classification directory and its characteristics
The so-called hierarchical directory, in fact, we are not unfamiliar, people familiar with the Windows operating system, must have the image of Windows FileSystem's resource manager, the hierarchical directory display (as shown in the following figure) is like a resource manager is a tree structure.

By clicking on the "folder" icon, you can see the subcategories under this category, so recursively until the most peripheral nodes.
This hierarchical catalog is important in many network applications, and it has the following advantages:
1. Intuitive: Even a person who does not know the computer and does not often surf the Internet through this hierarchical catalogue will not be able to get lost in the hypertext of the sea, but can easily find the place they want to go.
2. Easy to manage: For the system to write and maintain personnel, this structure is also more conducive to the implementation of the program modularization.
In short, an interface-friendly Web page or application is inseparable from the hierarchical directory, many of the sites are also on their own page in this form, but most of the hierarchical directory is static, that is, they are written in simple JavaScript or HTML, so when the content of the Web page changes, The source code of the Web page must be modified, the disadvantage of this is obvious, but the main disadvantage is that the maintenance of the page to add a lot of unnecessary work, reduce the efficiency of the job, so here is mainly introduced with ASP technology and JavaScript to achieve dynamic hierarchical directory of the method. Dynamic classification directory, that is, the Web page on the display of hierarchical directory of the nodes are stored in a certain data structure in the database, so you can by the corresponding increase, delete, and change the operation to control the Web page display content, to achieve convenient, intuitive, fast.
In a word to summarize the characteristics of dynamic hierarchical directory, it is to fully carry forward the advantages of the original static hierarchical directory on the basis of its flexibility and maintenance of management deficiencies.
Second, the overall introduction of the system
1. System environment
Server: WindowsNT, installed with IIS5.0 or Iis6.0,oracle8 database, ODBC
Client: Any operating system, with TCP/IP protocol, internet browser (ie, NC)
2. Related technologies: ASP (Active Server Pages), Oracle database, SQL language, JAVASCRIPT,HTML,CSS, etc.
3. Related development tools: Dreamweaver,photoshop and so on.
4. Related Data structures
File category name database: Law_type_name
Field Name field meaning
Typekey category Keywords (primary key)
Typename category Name
F_point A forward pointer indicating the keyword of the class above the category
B_point pointer to indicate whether the subordinate of the category is a category or a specific file
0: Description of its subordinates are also categories, in this library to find
1: Description of their subordinates for specific documents, should be in the law and Regulation database
(law_rule) In search of

Laws and regulations database: Law_rule
Field Name field meaning
ID file ordinal (primary key)
Title File Header
Content file Contents
pubdate Release date
Puborg Publishing Unit
RegDate Date of registration
Update_date Last Modified Time
Typekey file belongs to Category

The data structure of dynamic hierarchical directory determines that it is composed of two different nodes, one is the concrete document node, the other is the complex folder node. A document node is the nerve endings of a dynamic hierarchical directory, and when a viewer clicks on a node like this, a hyperlink is clicked, and the browser automatically loads the corresponding category of laws and regulations files into the right frame for the user to query. There can be several child nodes under a folder node, which can be either a document node or a folder node, so that a complete hierarchical directory can be formed.
Each node in a dynamic hierarchical directory is an array of 4+n elements that record the type, name, current state, and dependencies of the node, and the meanings of each element are as follows:
NODE[0]=0/1 represents whether this node is closed or open, 0 delegates are closed, and 1 is open;
NODE[1]=0/1 on behalf of this folder is closed or open, 0 on behalf of the closed, 1 representatives open;
NODE[2] temporarily meaningless;
NODE[3] Represents the name of the node;
Node[4]......node[n] represents the N child node of the node.
In summary, a dynamic hierarchical directory data structure can be represented by the following tree structure:

Third, related algorithms and function description
When the Default.asp page is loaded into the browser, the Initializetree () function is first called to complete the creation and display of the dynamic hierarchical directory. This function further invokes the Generatetree () function generated by the ASP, which scans the data in the law_type_name from beginning to end and generates an array containing all the nodes, invoking the Redrawtree () on the basis that the array already exists. The function can recursively display the hierarchical directory on the page.
The following is a detailed introduction to some of the functions that are used primarily:
Generatetree () function, using ASP to create an array of each node, and establish the links between the nodes, the program code is as follows:
<%
Set Myconn=server.createobject ("Adodb.connection")
Create an instance of an ADO Connection object myconn
Set Rs=server.createobject ("Adodb.recordset")
Create an instance of an ADO Recordset object RS
Rs.Open "SELECT * from Law_type_name
Typekey ", myconn,adopenstatic//Assign the data in Law_type_name to RS
CR=CHR (+) &AMP;CHR (10)/Enter line feed
Response.Write ("<script languang=javascript>" &AMP;CR)
Response.Write ("function Generatetree () {" &AMP;CR)
Response.Write ("Var aux;" &AMP;CR)
Response.Write ("Aux=new Array ();" &AMP;CR)
I=1
While not rs.eof//start scanning data in law_type_name individually
If RS ("F_point") =0 then//generate the most fundamental node, the other nodes are its descendants
Response.Write ("Folderstree=foldernode"
&trim (RS ("TypeName")) & "');" &AMP;CR)
Else
If RS ("B_point") =0 then//If the node is a folder node
If RS ("F_point") =1 then//If the node is a direct child node of the root

Response.Write ("aux[" &rs ("Typekey") & "]=appendchild
(Folderstree,foldernode (' "&trim (RS (" TypeName ")) &"); " &cr
Join Folder node
Else
Response.Write ("aux[" &rs ("Typekey") & "]=
AppendChild (aux["&rs" ("F_point") & "],
Foldernode (' "&trim (RS (" TypeName ")) &"); " &cr
Join Folder node
End If
Else
If RS ("F_point") =1 Then
Response.Write ("AppendChild" (folderstree,generatedocentry (0, ') &
Trim (RS ("TypeName")) & "', '," &trim (RS ("Typekey")) &); " &AMP;CR)
Join document Node
Else
Response.Write ("AppendChild aux[" &rs ("F_point") & "],
Generatedocentry (0, ' "&trim (RS (" TypeName ")) &" ', ' ","
&trim (RS ("Typekey")) &); " &AMP;CR)//Join document node
End If
End If
End If
Rs.movenext
Wend
Response.Write ("}")
Response.Write ("</script>")
Rs.close//Free object Resources
Myconn.close
%>
//******************************
The following are the auxiliary functions of the construction node
function Foldernode (name)//to generate a folder node
{
var Arrayaux;
Arrayaux=new Array ();
arrayaux[0]=0;
arrayaux[1]=0;
arrayaux[2]=0;
Arrayaux[3]=name;
return arrayaux;
}
function Generatedocentry (icon,docdescription,link,num)
Used to generate document nodes
{
var retstring= "";
retstring= "Small icon to display before the document node
retstring=retstring+ "border=0>" + "" + "&LT;TD nowrap>" +
"<a href=typeinquest.asp?typekey=" +num+
"Target= ' folderframe ' >" "+docdescription+" </a> "+" ";
Display a document node with a hyperlink
return retstring;
}
function AppendChild (parent,child)
Establish a relationship between a folder node and a document node
{
Parent[parent.length]=child;
return to child;
}
//*************************************
Call this function when the Web page is loaded into the browser
function Initializetree ()//page initialization
{
Generatetree ();
Top.openbranch ("Laws and regulations"); Show root node
Redrawtree (); Display the entire dynamic hierarchical directory
}
//**************************************
displaying dynamic hierarchical catalogs
function Redrawtree ()
{
var do



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.