ASP Advanced Learning: Database dynamic Generation Tree Directory

A wide range of applications of the directory tree
In order to this paragraph content, searches searches on Baidu, the content a chase, related unexpectedly did not have. Search What search? Is the usefulness not obvious? The management of Folder Explorer folders, the management of Multi-level forum in the Forum, the AWT in Java is lack of components including tree directory is limited to use ... Who is so impolite, not to give a little face, how can I say it? Cleared his throat:

In our project, we often have the autocorrelation data table, from the overall view, the entire table is presented as a tree-shaped data structure. When we display and edit this table, it would be awkward if we did not take good representations, and it would be a good idea to manage it with a tree-shaped directory.
(The axe swung round, and it felt great, and then said ...) The tree directory in the Web can be implemented with JavaScript, but some details such as Tree directory values (click on a child node, open the relevant link), multi-level directory and node increase, delete, drag on the various elbow. In fact, using a Third-party control is obviously a good idea.

Second, about the island of Intelligence directory tree control

OK, our hero today--the lightweight, Smart Island directory tree control (download address:http://www.oapro.com/ostarocx/download/OTree.ocx) came out. It uses the vc++6.0 development, is the standard OCX control, may apply in the Windows environment VB, VC, PB, Dephi, ASP, JSP and so on programming language. It takes an XML file as an interface file, which can be either a ready-made file or a dynamically generated XML format file (in other words, a tree node can be dynamically generated based on a database). Chi Island The tree control supports replication, movement, renaming, and permission controls on nodes, and there is no limit on the number of levels of the directory. Introduced so much, presumably want to try more. In the ASP small test first:

Third, register add control

1. Registered Chi Island Directory tree control

Download (Download address:http://www.oapro.com/ostarocx/download/OTree.ocx) Chi Island Directory tree control (with its file name Otree.ocx), register the control as follows:

Click "Start" → "run"; In the Run dialog box, enter the following command:
regsvr32 < otree.ocx file absolute path > registered Chi Island Directory tree control control
regsvr32/u < otree.ocx file absolute path > lifting Chi Island Directory tree Control Registration

2. Add the Smart Island tree control to the page

Add the following code to the page to insert the Chi Island directory tree control:

<object classid= "clsid:d835ed15-0bd0-4f24-ac76-a60175ae1137" id= "Otree" width= "0"
codebase= "Http://www.oapro.com/ostarocx/download/OTree.ocx" >
<param name= "_version" value= "65536" >
<param name= "_extentx" value= "2646" >
<param name= "_extenty" value= "1323" >
<param name= "_stockprops" value= "0" >
</object>

which
Width and Height: The display widths and heights of the accused pieces;
ID: The name of the accusation object that implements the operation of the control by that name;
CODEBASE: Refers to a client that does not have the Smart Island tree control installed automatically to download the address of the installation of the control when it runs the page.

Iii. generating a tree directory from an XML file

1. XML Document Format

XML is a good thing, but also to conform to a certain format Ah, otherwise the control can not be recognized Oh! The following is an XML document format:

<?xml version= "1.0" encoding= "GB2312"?>
<NaviTree>
<NodeItem>
<NodeName> </NodeName><!--node name-->
<NodeType> </NodeType><!--Node type-->
<NodeData> </NodeData><!--node Data-->
<ImageIndex> </ImageIndex><!--node picture-->
<Creator> </Creator><!--Creator-->
<rightdepartmen>| Development Department |</rightdepartmen><!--Department that has the right to this directory-->
<RightUser> </RightUser><!--Users who have the right to this directory-->
<Lock> </Lock><!--whether to lock 0/1-->
</NodeItem>
...
</NaviTree>

which

NodeName: Refers to the node name, if there is a parent node, to include the ancestor node name, the node name between the symbol "\" separated. Example "my desk \ Bulletin notification \ e-mail" indicates that the root node is "My desk", the parent node is "announcement notification" and this node is "e-mail". If ask you to contain five level of node name is how, hehe, don't take tomatoes to throw me!

NodeType: node type, generally refers to "href".
ImageIndex: A small icon that appears before the name of the node, where 0 represents a folder-like icon and 4 represents a data-table icon.

Here is an XML format document source code:

<?xml version= "1.0" encoding= "GB2312"?>
<NaviTree>
<NodeItem>
<NodeName> my desk </NodeName><!--node name-->
<NodeType>href</NodeType><!--Node Type-->
<NodeData>MyDesk.aps</NodeData><!--Node Data-->
<Lock>0</Lock><!--is locked 0/1-->

<ImageIndex>0</ImageIndex>
</NodeItem>
<NodeItem>
<NodeName> my desk \ Announcement Notification </NodeName><!--node name-->
<NodeType>href</NodeType><!--Node Type-->
<NodeData> Notice .aps</nodedata><!--node data-->
<Lock>0</Lock><!--is locked 0/1-->
<ImageIndex>0</ImageIndex>
</NodeItem>
<NodeItem>
<NodeName> my desk \ Bulletin notification \ e-mail </NodeName><!--node name-->
<ImageIndex>0</ImageIndex>
</NodeItem>
<NodeItem>
<NodeName> my desk/announcement notification \ e-mail inbox </NodeName><!--node name-->
<ImageIndex>4</ImageIndex>
</NodeItem>
<NodeItem>
<NodeName> my desk/announcement notification \ e-mail \ Outbox </NodeName><!--node name-->
<ImageIndex>4</ImageIndex>
</NodeItem>
<NodeItem>
<NodeName> my desk \ Bulletin notification \ e-mail \ Sent messages </NodeName><!--node name-->
</NodeItem>
<NodeItem>
<NodeName> my desk \ Schedule </NodeName><!--node name-->
<ImageIndex>0</ImageIndex>
</NodeItem>
<NodeItem>
<NodeName> my desk \ schedule \ calendar </NodeName><!--node name-->
</NodeItem>
</NaviTree>

2. Code implementation

Notify the Chi Island Directory tree control to open an XML document with the following statement:

Otree.openxmlfile ("")

The absolute path of the XML document within quotation marks, for example:
Otree.openxmlfile ("C:\OTree.xml")

Operation effect see the following figure:

I've seen you nodding, but mumbling: if you want to generate a tree directory from the content in your database ...? Hehe, let's go to the bottom of the topic (is that the front so many words is cheat royalties ah?) Who? Hush ..., keep your voice down, don't let the little voices hear you:

Four, based on the database to generate a tree directory

1. XML Document Format

The node of tree directory is stored in the database, which lays a good foundation for us to form the tree directory dynamically. Of course, there are also some trees that represent data structures in a database (the parent is the database name and the child node is the datasheet). Anyway, with the previous foundation, all we need to do now is to form the contents of the database into the XML document in the format above. Here is an ASP source, the structure of the database into an XML document, where the variable datasource store the name of the database passed over.

<?xml version= "1.0" encoding= "GB2312"?>
<NaviTree>
<%
Dim datasource
Datasource=request ("DataSource")
%>
<NodeItem>
<NodeName><%=datasource%>
<NodeType></NodeType>
<NodeData></NodeData>
<ImageIndex>0</ImageIndex>
<Creator></Creator>
<rightdepartmen>| Development Department | Marketing Department |</rightdepartmen>
<RightUser></RightUser>
<Lock>0</Lock>
</NodeItem>
<%

Strconn= "dbq=" +server.mappath ("db\" &datasource) + ";D efaultdir=;D river={microsoft Access DRIVER (*.mdb)};"
Set Objconn=server.createobject ("Adodb.connection")
objConn.Open strconn
Set Rsschema=objconn.openschema (20)
Rsschema.movefirst
Do Until rsschema.eof
If Rsschema ("table_type") = "TABLE" Then
%>
<NodeItem>
<nodename><%=datasource%>\<%=rsschema ("table_name")%></nodename>
<NodeType>href</NodeType>
<nodedata><%=rsschema ("table_name")%></nodedata>
<ImageIndex>4</ImageIndex>
<Creator></Creator>
<rightdepartmen>| Development Department | Marketing Department |</rightdepartmen>
<RightUser></RightUser>
<Lock>0</Lock>
</NodeItem>
<%
End If
Rsschema.movenext
Loop
Set objconn=nothing
%>

</NaviTree>

2. Code implementation

The interface method at this point is different from opening the XML document directly:
Otree.setnodexml (Otree.httpget ("http://www.oapro.com/ostarocx/sample/Dataman/OTree.asp", "Datasource=otree.mdb") ))

Where the method HttpGet has two parameters, the first parameter for the implementation of the database we described above to convert the XML format of the Web page address, must be in the URL format, can not use a relative or absolute path (because the current method is not yet supported), the second parameter is passed to the file parameters, where we are passing the database name.

According to the above introduction you quickly implemented a tree directory, point root node, expand, point the parent node, expand, and then point ... how come you didn't react? How would you like to react? Oh, sorry, I almost forgot to introduce:

V. Responding to Node events

Chi Island Tree-shaped directory control provides an interface method to respond to node events:

Eventtreeselchanged (Stritemname, Stritemdata,stritemtype)

which

Stritemname node Name
Stritemdata node Data
Stritemtype node type
These three parameters are provided by the Chi Island Tree directory control to our developers for our call.

We can trigger the event by scripting, and here's an example code:

<script for= "Otree" event= "eventtreeselchanged (Stritemname, Stritemdata, Stritemtype)" LANGUAGE= "JavaScript" >
alert (stritemname);
</SCRIPT>

When the above code implements the click of the node, a pop-up dialog box displays the name.

Vi. examples

Well, I'm so tired! Knock on the keyboard almost deformed small hand rubbing look at the screen look sour big eyes, and flashed a thought, give an example:http://www.oapro.com/ostarocx/sample/ogrid_f . In this example, the contents of the tree directory will change when the database name is selected from the Drop-down box, and clicking on the node displays the data in the datasheet represented by that node. The entire example fully demonstrates the technical details of the above article. Here is an example screenshot: