Tutorials to .com

Tutorials to .com » Asp » Xml » Subtidal imaging in the Web interface, like the Explorer tree directory (cool effects)

Subtidal imaging in the Web interface, like the Explorer tree directory (cool effects)

Print View , by: iSee ,Total views: 6 ,Word Count: 1484 ,Date: Wed, 22 Apr 2009 Time: 7:49 AM

-------------------------------------------------- ------------------------------
Problem description:
In our project, since there are often associated with data tables, if we look a whole, the entire table into a tree on a data structure (for complex cases, it may turn into a chart). When we display on this table, when editing, if they do not adopt the form of good performance would make it very awkward, to that end, we have developed such a tree structure of the procedure. In the previous version, we use the recursive algorithm to achieve, in our evaluation of this algorithm was found to have tens of thousands of database records are no longer capable of performing, so in the new version of the algorithm , we use the xml technology, dynamic discovery of data from the server to resolve a large amount of data in embarrassment, but also all over the avoidance of data if the table structure will be presented for the map into the infinite loop error.


The actual train of thought:
1, the initial display shows only the root and the secondary node, the root node and with a two-level;
2, click on a node, if it is a sub-regional target node does not exist, the establishment of targets, at the same time to download the data to update data to show that all child nodes;
3, each node will have after the establishment of the same features, such as checking the existence of sub-node to show the hidden child nodes and so on;
4, dhtml + xml + asp + css at the same time.


Technical Difficulties:
1, using xmlhttp garbled interface issues:
Output in the asp page, the default encoding scheme is not Chinese, then the client explained xmlhttp page, it will resolve to the default program, so there will be garbled. To this end, we in the Server-side asp page, by adding the following code the definition of coding schemes:
Response.CharSet = "GB2312"
Response.ContentType = "text / html"

2, how to interface to maintain the previous version of the style (form type Explorer):
In the previous version, the contents of all pages at one go, and in control, such as the use of recursive thinking, all at the interface is relatively friendly, version of the mechanism was changed, the content is a synthesis of the key issues on many occasions , img, span object id how to determine, after confirmation, in the interface, this version of the interface difficult to interface the same as the first, we can only retain a part of, but on the whole, the new interface is also able to meet their needs.

Where not to use the annex, we can only paste the source code:

--- xtree. html -------------------------------------------- -----------------------

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript src="xtree.js">
</ SCRIPT>
<style type="text/css">
<! --
a: link (font-size: 14px; text-decoration: none; color: # 0000FF)
a: visited (font-size: 14px; color: # 0000FF; text-decoration: none)
a: hover (font-size: 14px; color: # FF0000; background-color: # CCCC99; text-decoration: none)
a: active (font-size: 14px; color: # FFFFFF; background-color: # 191970; text-decoration: none)
. item (font-size: 14px)
->
</ style>
</ HEAD>
<BODY LeftMargin=0 rightMargin=0 topMargin=0 border=0>
<bold> Tree Menu Demo </ bold> <br>
<table border=0>
<tr> <td nowrap>
<span id='oSpanroot' border=0> </ span> <SCRIPT LANGUAGE=javascript> createChildNode ( "root", 0); </ SCRIPT> </ td> </ tr>
</ table>
</ BODY>
</ HTML>


------- xtree. asp ---------------------------------------- -----------------------

<% @ Language = VBScript%>
<%
Response.CharSet = "GB2312"
Response.ContentType = "text / html"
''''''''''''''''''''''''''''''' Server code start'''''''''''''''' '''''''''''''''
dim parId, nodeLayer
parid = Request.QueryString ( "parId")
nodeLayer = cint (Request.QueryString ( "nodeLayer"))

if (parid = "") then
Response.Write ( "root id can't is null")
Response.End ()
end if
if (nodeLayer <0) then
nodeLayer = 0

end if
%>
<%
strconn = "at"
strsql = "select * from tree where par = '" & parid & "'"
Written request''SQL statement: in the record set the previous three fields must be followed: row_id (the only primary key), name (the menu shows the contents of article), par_id (parent node row_id), the other in accordance with the needs of the output and display
set conn = server.createobject ( "ADODB.connection")
conn.open strconn

set rs = server.createobject ( "ADODB.Recordset")
rs.open strsql, conn, 3,3
i = 0
dim row_id
row_id = ""
while not rs.EOF
row_id = rs.Fields ( "row_id"). Value
name = rs.Fields ( "name"). Value
j = 0

while j <nodeLayer
Response.Write ( "<img src='blank.bmp'>")
j = j +1
wend
Response.Write ( "<img id = 'objNode" & row_id & "' style = 'cursor: hand' src = 'open.bmp' onclick = javascript: createChildNode ( '" & row_id &"',"& nodeLayer +1 & ") border = 0 align = 'absmiddle'> ")
Response.Write ( "<img src='blank.bmp' border=0 align='absmiddle'>")
Response.Write ( "<a class=item href='view.asp?id="&row_id&"' target='mainFrame'>" & Trim (name )&"</ a> </ br> ") 'project
Response.Write ( "<span id='oSpan"&row_id&"'> </ span>") 'sub-node content areas
i = i +1
rs.MoveNext
wend
''''''''''''''''''''''''''''''''''''''''' Server Code END'''''' ''''''''''''''''''''''''''''
%>

--------- xtree. js -------------------------------------- ---------------------------------------

function getChildTree (parId, nodeLayer)
/ / parId: = fu node id, nodeLayer: = sub-node level-owned
(
var xmlhttp = new ActiveXObject ( "Microsoft.XMLHTTP");
xmlhttp.Open ( "get", "xtree.asp? parId =" + parId + "& nodeLayer =" + nodeLayer, false);
xmlhttp.Send ( "Author: taojianbo; Version: 2.0");
return xmlhttp.responseText;
)

function showHide (objid)
/ / Show the hidden region, to achieve the purpose of the menu display
/ / objid: = region of parid part of the object ID
(
var temp;
eval ( "temp = oSpan" + objid + ". style.display");
if (temp == "block")
(
eval ( "oSpan" + objid + ". style.display = 'none'");
eval ( "objNode" + objid + ". src = 'open.bmp'");
)
else
(
eval ( "oSpan" + objid + ". style.display = 'block'");
eval ( "objNode" + objid + ". src = 'close.bmp'");
)
) / / end function

function createChildNode (childNodeId, nodeLayer)
/ / If the content of child nodes is empty, initialize, and update data
/ / childNodeId: = sub-node object parid part of the Id
(
var temp;
eval ( "temp = oSpan" + childNodeId + ". innerHTML");
if (temp =="")
(
eval ( "oSpan" + childNodeId + ". innerHTML = '<div align=right> LOADING ...</ div> <br>'");
temp = new String (getChildTree (childNodeId, nodeLayer));
if (temp.length! = 0)
(
eval ( "oSpan" + childNodeId + ". innerHTML = temp");
eval ( "objNode" + childNodeId + ". src = 'close.bmp'");// into minus
)
else
(/ / If the temp is empty the contents of that subtree not found, the node for the leaf node, change the relevant attribute
eval ( "objNode" + childNodeId + ". src = 'leaf.bmp'");// change the icon
eval ( "objNode" + childNodeId + ". onclick =''"); / / Cancel click event
eval ( "oSpan" + childNodeId + ". innerHTML = temp ");// content is empty
)
)
else
(ShowHide (childNodeId);
)
)


Asp and XML related Articles


Can't Find What You're Looking For?


Rating: Not yet rated

Comments

No comments posted.