ASP网页编程之web联系关系菜单完成办法

强大的可扩展性。ASP具有强大的扩展性，可以实现与多种网络、硬件设备的连接：通过专用的通讯线路远程接入企业；通过远程拨号服务器为远程拨号客户提供服务；通过WAP为移动电话互联网客户服务。web|菜单　　笔者日前触及一个年夜型ASP项目标开辟，个中屡次碰到多维下拉菜单（关于WEB项目而言，这里专指网页中的<SELECT>元素）的成绩，菜单中的数据均必要从数据库中掏出，并静态的天生和变更。笔者之前曾宣布过怎样使用PHP和JavaScript制造二维下拉菜单的文章，今朝这类文章在收集上也很是多见，思绪也有良多立异，但关于本文中谈到的多维下拉菜单，很少有人谈及。笔者偶然布鼓雷门，只是想把开辟中的一点履历和技能总结出来，但愿能给宽大的读者一点启发。
　　多维下拉菜单，望文生义，也就是依据一个下拉菜单的选择，来把持别的一个或多个下拉菜单中显现的数据。举个例子来讲明，在一个WEB办理体系中，用户请求经由过程选择单元称号，进而选择部门称号，最初选择员工。也就是说，必要供应三个下拉列表，每一个下拉列表之间必要创建联系关系。经由过程第一个能选择第二个，并同时选择第三个，第四个等等。那末每个下拉列表的显现数据之间怎样创建联系关系，联系关系起来的数据又怎样经由过程事务驱动，这恰是本文所要会商的次要内容。
　　熟习VB、Delphi等RAD开辟工具的伴侣大概会感应困惑。切实其实，在这些所谓的RAD开辟工具中，我们能够使用ComboBoxes控件很简单的完成下拉菜单，进而完成他们之间的联系关系。可是因为WEB项目中的下拉菜单是使用HTML中的<SELECT>元从来完成的，而因为HTML的范围性，不管是工具的属性仍是事务模子，都远没有RAD工具那末壮大。以是，开辟WEB项目，这类成绩只能有一个办理路子，那就是使用JavaScript（也大概有人说能够使用java来完成，那我也只好说，您是妙手）。
关于JavaScript的利用，不是本文的重点，以是不懂得或不熟习JavaScript的读者请先参考JavaScript的相干材料以猎取相干信息。
　　好，言回正传，上面我们就一同来切磋多维下拉菜单的计划成绩。为了会商的便利，我们就以上文提到的三维下拉菜单为例，向人人一步一步的报告计划的思绪。
　　1、剖析菜单的运作流程
　　起首，用户会选择单元列表，并从当选出一个单元称号，我们假定为单元A。这时候，别的两个下拉列表应当做些甚么？对，我们但愿第二个下拉菜单能当即反应第一个下拉菜单的选择，显现并仅显现单元A中的一切部门，我们再假定菜单中第一项为部门A（默许的显现项）。那末大概有读者会问，第三个下拉菜单不是应当同时选择与部门A对应的员工数据吗？这是个很好的设法，是的，我们也应当当即改动第三个下拉菜单中的数据为部门A中的员工列表。一样，当用户选择部门时，又会改动员工列表。顺次类推。
以上是一种思绪，大概有一些特别的情形，比方，在改动部门列表时，其实不但愿当即就选择一个部门，而是显现一个"请选择"字样的提醒条目。
思绪已有了，上面就是怎样完成的成绩了。
　　2、菜双数据的容器
　　依据惯例设法，当用户从第一个下拉菜单当选择单元称号，我们能够从数据库当选出与之相干的部门数据，并显现出来，这仿佛也不无可行。但有履历的开辟者就会发明，因为Web页面的无形态性，当你再次毗连数据库时，Web页面必需得再次革新。这是一个头疼的成绩，一方面我们想毗连数据库，可另外一方面我们必需得坚持用户已输出数据不被损坏。即便云云，估量用户也其实不但愿看到一个每次选择都革新一次的场合排场。岂非就没有更好的举措？
　　有，那就是使用JavaScript的多维数组。我们为何不成以把必要显现的数据在第一次毗连数据库时全掏出来，放到数组中往？如许在每次改动菜双数据时，只需从数组中获得数据，不就能够年夜年夜的进步效力了吗？这是个使人奋发的办法，这个办法中提到的JavaScript数组，我们临时称之为菜双数据的容器。
　　您的思绪是否是一会儿名顿开？但是伎痒一番今后，是否是感应事变仿佛并非那末复杂？成绩又来了，容器的布局该怎样计划，数据之间的联系关系又怎样完成呢？别急，实在这恰是成绩之地点。
　　3、数据容器布局的计划
　　提及容器布局的计划，我们得感激数据布局中的链表给我们的启发--链表是经由过程指针接洽在一同的。固然JavaScript中没有指针的观点，但我们为何不成以摹拟一下。
　　为了会商便利，我们假定命据库的布局以下：
1、单元信息表：(unit_id,unit_name,…)
2、部门信息表：(dept_id,unit_id,dept_name,…)
3、员工信息表：(emp_id,dept_id,emp_name,…)
　　使用这个数据库布局，我们能够很简单的推导出数组的布局。您说的没错，这应当是一个多维数组。其界说办法应当象上面如许（以部门为例）：
vararrDept=newArray();
arrDept[0]=newArray(unit_id0,dept_id0dept_name0);
arrDept[1]=newArray(unit_id1,dept_id1,dept_name1);
…
arrDept[n]=newArray(unit_idn,dept_idn,dept_namen);
　　n的巨细视实践数据量而定，比方在单元下拉菜单中，n代表单元的总数。但读者必需分明，恰是因为n的不断定性，以上的代码必需经由过程程序静态的发生。比方关于ASP程序，我们能够在<script></script>之间嵌进如许的一段代码：
<Palign=center><%
Dimrs,i
[毗连数据库，掏出数据]
response.write"vararrDept=newArray();"&vbNewLine
i=0
whilenotrs.EOF
response.write"arrDept["&i&"]=newArray("&rs(unit_id)&","&_
rs(dept_id)&","&rs(dept_name)&");"&vbNewLine
rs.MoveNext
i=i+1
wend
…
%>

代码拷贝框

<%Dimrs,i[毗连数据库，掏出数据]response.write"vararrDept=newArray();"&vbNewLinei=0whilenotrs.EOFresponse.write"arrDept["&i&"]=newArray("&rs(unit_id)&","&_rs(dept_id)&","&rs(dept_name)&");"&vbNewLiners.MoveNexti=i+1wend…%>

[Ctrl+A全体选择然后拷贝]
　　以上这段代码用来从部门表中掏出数据，并发生相干的JavaScript多维数组。这只是笔者的一种演示，读者完整可使用更天真的办法来提取数据。
　　说来讲往，我们仍是要回到JavaScript数组的布局界说下去。伶俐的读者应当已从上述的代码中发明了数组的界说办法，但笔者仍是要诲人不倦的再增补一遍：
　　我们把数组的第一个元素界说为指针，用来指向其"父结点"。等等，甚么是父结点？父结点申明白了就是上一级结点，比方，部门的上一级是单元，员工的上一级是部门。那末第二个元素是甚么？让我们来看一下上面的一段<SELECT>界说：
<SELECTNAME="s1">
<OPTIONValue="1">单元1</OPTION>
<OPTIONValue="2">单元2</OPTION>
….
</SELECT>
　　<OPTION>元素的Value属性从那里来呢？对，就是第二个元素，依此类推，第三个元素指的就是显现在菜单中的数据喽，即下面的"单元1"、"单元2"…
　　读者到这里大概有些懵懂了，说这么多，这个数组究竟是甚么样？别急，让我们以部门为例，给出一段依据部门库中的数据静态天生的数组摹拟代码：
<SCRIPTLANGUAGE="JAVASCRIPT">
<!-
…
vararrDept=newArray();
arrDept[0]=newArray(u01,d01,部门1);
arrDept[1]=newArray(u01,d02,部门2);
…
arrDept[8]=newArray(u06,d08,部门8);
…
arrDept[15]=newArray(u08,d15,部门15);
…
->
</SCRIPT>
　　数组终究水落石出。以"u"开首数据的代表单元的编号，即，指向单元的指针，也就是说，我们能够经由过程这个编号来断定该单元所属的部门；以"d"开首的数据代表部门的编号，用来供下一级选单（即员工选单）的指针利用。（注：实践利用中，数据格局依据情形而定）
有一个成绩，象单元如许没有父结点的数组该怎样界说？很复杂，把数组的第一个元素全体置为0就好了。
　　下一步，是到我们编写JavaScript代码来把持菜单的显现的时分了。我们就假定您天生的三个数组分离定名为arrUnit，arrDept，arrEmp。
　　4、编写JavaScript代码，把持菜单的显现
　　实在有履历的程序员，读到这里应当晓得怎样举行下往。但您无妨读下往，大概，笔者的办法对您一定不是一种新的实验。并且，据我推测，读我这篇文章的年夜多半都是没有履历的程序员，呵呵，帮人帮究竟吧。ComeOn,LetsGo.
　　让菜单显现出来，实在有好几种思绪。使用ASP等程序间接天生<SELECT>布局、使用OPTION工具的ADD和Remove办法静态增加和改动等等，都是可使用的办法。但，经由笔者的屡次理论和探索，有一种办法更加无效，那就是使用Script代码静态的改写全部<SELECT>框架。
　　好，就让我们从加载页面（document）入手下手，一步一步的解说JavaScript代码究竟是怎样把持菜单的显现的。
　　既然有三个菜单，那末我们就得事前计划出如许的HTML代码（实在要不要无所谓，放在那边只是为了便于了解）：
<Palign=center><BODYBGCOLOR="#FFFFFF">
...
<TD>
<SELECTNAME="s0"></SELECT>
</TD>
<TD>
<SELECTNAME="s1"></SELECT>
</TD>
<TD>
<SELECTNAME="s2"></SELECT>
</TD>
</BODY>
　　您有大概要问，这里怎样甚么数据都没有？不要奇异，等一下您天然就会分明。我们来看一下<BODY>工具的ONLOAD事务body_onload()做了些甚么事情？
<Palign=center>functionbody_onload(){
varTD=GetParent(document.all("s0"),"TD");
TD.innerHTML=MakeMenu(arrUnit,0,0,"s0",1);
TD=GetParent(document.all("s1"),"TD");
TD.innerHTML=MakeMenu(arrDept,GetSelectValue(document.all("s0")),0,"s1",1);
TD=GetParent(document.all("s2"),"TD");
TD.innerHTML=MakeMenu(arrEmp,GetSelectValue(document.all("s1")),0,"s2",1);
}
　　让我们来研讨一下。起首程序使用GetParent()函数获得s0的容器TD工具句柄，然后，使用MakMenu()函数发生菜单代码，并把代码赋值给方才获得的TD工具；然后是s1，接着是s2.。GetParent()函数界说以下：
functionGetParent(src,tag){
if(src&&src.tagName!=tag){
return(GetParent(src.parentElement,tag));
}
returnsrc;
}
　　这里的tag参数必需年夜写，比方TD、TR、TABLE，函数前往的是离src指定的元素比来的由tag标签订义的父工具。
　　我们要出格申明一下MakeMenu()函数，这个函数的感化不问可知--发生菜单的HTML界说，先看看函数界说：
<Palign=center>functionMakeMenu(arrSub,pValue,cValue,name,bulSkip){
varsHTML="<selectname="+name+">";
if(bulSkip)sHTML+="<optionvalue=0><未选择></option>";
for(vari=0;i<arrSub.length;i++){
if(arrSub[0]==pValue){
vartag=(arrSub[1]==cValue)?"selected>":">";
sHTML+="<optionvalue="+arrSub[1]+""+tag+arrSub[2]+"</option>";
}
}
sHTML+="</select>";
returnsHTML;
}

代码拷贝框
functionMakeMenu(arrSub,pValue,cValue,name,bulSkip){varsHTML="<selectname="+name+">";if(bulSkip)sHTML+="<optionvalue=0><未选择></option>";for(vari=0;i<arrSub.length;i++){if(arrSub[0]==pValue){vartag=(arrSub[1]==cValue)?"selected>":">";sHTML+="<optionvalue="+arrSub[1]+""+tag+arrSub[2]+"</option>";}}sHTML+="</select>";returnsHTML;}
[Ctrl+A全体选择然后拷贝]

　　来看一下参数的寄义。arrSub，指的是菜双数据的来历，实在就是我们上订婚义的数组；pValue，指定父结点的编号，依据这个编号，我们能够找出一切的子结点数据；cValue，指定菜单的默许显现项；name，指定发生的<SELECT>菜单的称号；bulSkip，指定菜单的默许显现项是"<未选择>"仍是详细数据。
　　GetSelectValue()函数的目标，就是获得<SELECT>工具以后显现的值。假如没有显现任何值，函数前往0。
<Palign=center>functionGetSelectValue(oSelect){
if(oSelect.selectedIndex<0)return0;
returnoSelect.options(oSelect.selectedIndex).value;
}
　　那末，当用户加载页面以后，起首运转的就是body_onload()函数，该函数依据已发生的JavaScript多维数组，使用MakeMenu()函数静态的天生菜单的HTML代码，并依据DHTML的道理加载到页面中。OK，运转一下页面，看看菜单是不是一般显现？假如有甚么成绩，抓紧工夫好好调试一下，比方数据库的毗连是不是一般，javascript代码的巨细写是不是准确，数组的界说是不是有甚么成绩…
　　下一步，选择菜单…等一下，仿佛另有甚么漏掉，对了，我们还必需为<SELECT>工具的onchange事务增加程序代码：
<Palign=center>functionSetSubMenu(pSelect){
varoOption,sValue;
if(pSelect.selectedIndex<0)return;
switch(pSelect.name){
case"s0":
varTD=GetParent(document.all("s1"),"TD");
TD.innerHTML=MakeMenu(arrDept,GetSelectValue("s0"),"0","s1",0);
TD=GetParent(document.all("s2"),"TD");
TD.innerHTML=MakeMenu(arrEmp,GetSelectValue("s1"),"0","s2",0);
break;
case"s1":
varTD=GetParent(document.all("s2"),"TD");
TD.innerHTML=MakeMenu(arrEmp,GetSelectValue("s1"),"0","s2",0);
break;
default:
}
}
　　好了，我们再反省一下，另有没有甚么漏掉。从第一个下拉菜单当选择单元，当即，第二个下拉菜单和第三个下拉菜单都产生了变更，看看是否是想要的。（不是？呵呵，转头好好反省）；再在第二个下拉菜单当选择部门，看看员工的下拉菜单是不是随着改动？
　　祝贺你，你已乐成的完成了三维下拉菜单。实在，关于二维菜单，完成的办法完整分歧。读者完整能够使用本文的办法完成WEB项目菜单的全攻略。今后再碰到相似的成绩，我想这回你必定能够坚决果断的说，让我来弄定它。
只要你想学,就没什么优缺点,上面那位大哥已经把网上的评论说了,但我认为想学哪个都一样,不然它就不可能在当今时代数字艺术方面存活到今天

在平时的学习过程中要注意现学现用，注重运用，在掌握了一定的基础知识后，我们可以尝试做一些网页，也许在开始的时候我们可能会遇到很多问题，比如说如何很好的构建基本框架。

我认为比较好的方法是找一些比较经典的例子，每个例子比较集中一种编程思想而设计的。

下载一个源代码，然后再下载一个VBScript帮助，在源代码中遇到不认识的函数或是其他什么程序，都可以查帮助进行解决，这样学习效率很高。

我可以结合自己的经验大致给你说一说，希望对你有所帮助，少走些弯路。

以HTML语言整合(HTML负责界面上，ASP则负责功能上)形成一个B/S(浏览器/服务器)模式的网页程序。

下载一个源代码，然后再下载一个VBScript帮助，在源代码中遇到不认识的函数或是其他什么程序，都可以查帮助进行解决，这样学习效率很高。

你可以通过继承已有的对象最大限度保护你以前的投资。并且C#和C++、Java一样提供了完善的调试/纠错体系。

不能只是将它停留在纸上谈兵的程度上。