分享
 
 
 

生成像资源管理器一样的树形目录

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

问题描述:

在我们项目中常常会出现自关联的数据表,如果我们从整体看去,整个表就呈现为一个树形数据结构(对于复杂的情况,它可能变成一个图)。当我们对这个表进行显示,编辑时,如果不采用好的表现形式,会显得很笨拙,为此,我们开发这样的树形结构的程序。在上一版本中,我们使用的是递归算法来实现,在我们对这个算法评测时发现,对于拥有成千上万条记录的数据库就不再能胜任了,所以在新的算法版本中,我们使用了XML技术,动态的发现数据,以解决一次从服务器下在大量数据的尴尬,同时也遍免了如果表数据结构呈现为图时就会进入死循环的错误。

实际思路:

1、 初始显示时只显示根与二级节点,根与二级节点同在一层次

2、 点击一节点,如果它的子节点区域对象不存在,则建立对象,同时下载数据更新数据,显示所有子节点。

3、 每个节点在建立后都就有相同的功能,如检查子节点是否存在,显示隐藏子节点等等

4、 DHTML+XML+ASP+CSS同时使用

技术难点:

1、 使用xmlhttp接口时乱码问题:

因为在asp输出页面中,缺省的编码方案并不是中文的,那么在客户端页面的xmlhttp中解释时,就会以缺省的方案解析,所以就会出现乱码。为此,我们在Server端的asp页面中,加入如下代码定义编码方案:

Response.CharSet="GB2312"

Response.ContentType="text/html"

2、 如何在界面上保持上一版本的风格(类资源管理器形式):

在上一版本中,所有的页面内容都是一气呵成的,在控制上采用递归等思想,所有时的界面相对友好,当时本版中的机制发生了变化,内容是有多次合成的关键问题,img ,span 对象的id 如何确定经过求证,在界面上,本版本的界面难以与第一界面相同,所以只能保留一部分,但是总体来说,新界面同样也能满足需要因为在这里不好使用附件,所以只能贴源码了:

---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>树形菜单演示程序</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&"'"

''SQL 语句书写要求:在记录集的前面三个字段必须依次为:row_id(惟一的主键)、name(菜单条显示的内容)、par_id(父节点row_id),其它根据需要输出与显示

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>") '项目内容

Response.Write("<span id='oSpan"&row_id&"' ></span>") '子节点内容区域

i=i+1

rs.MoveNext

wend

'''''''''''''''''''''''''''''''''''''''''Server Code END '''''''''''''''''''''

%>

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

function getChildTree(parId,nodeLayer)

parId:=父节点id,nodeLayer:=子节点所属层次

{

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)

显示,隐藏区域,达到菜单显示的目的objid:=区域对象ID的parid部分

{

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)

如果子节点内容为空,则初始化,并更新数据

childNodeId:=子节点对象Id的parid部分

{

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'");//变为减号

}

else

{//如果temp内容为空,说明未找到子树,则该节点为叶节点,更改相关属性

eval("objNode"+childNodeId+".src='leaf.bmp'");//更改图标

eval("objNode"+childNodeId+".onclick=''"); 取消click事件

eval("oSpan"+childNodeId+".innerHTML=temp");//内容为空

}

}

else

{ showHide(childNodeId);

}

}

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有