您的位置: 首页 > 技术文档 > 网络编程 > web关联菜单实现方法
基于Ajax的应用程序架构汇总 回到列表 NoahWeb应用———字符资源
 web关联菜单实现方法

作者:chainengjie 时间: 2005-08-27 文档类型:原创 来自:蓝色理想

第 1 页 web关联菜单实现方法 [1]
第 2 页 web关联菜单实现方法 [2]

笔者日前涉及一个大型ASP项目的开发,其中多次遇到多维下拉菜单(对于WEB项目而言,这里专指网页中的<SELECT>元素)的问题,菜单中的数据均需要从数据库中取出,并动态的生成和变化。笔者以前曾发表过如何利用PHP和JavaScript制作二维下拉菜单的文章,目前这类文章在网络上也颇为多见,思路也有很多创新,但对于本文中谈到的多维下拉菜单,很少有人谈及。笔者无意班门弄斧,只是想把开发中的一点经验和技巧总结出来,希望能给广大的读者一点启示。

多维下拉菜单,顾名思义,也就是根据一个下拉菜单的选择,来控制其它一个或多个下拉菜单中显示的数据。举个例子来说明,在一个WEB管理系统中,用户要求通过选择单位名称,进而选择部门名称,最后选择员工。也就是说,需要提供三个下拉列表,每个下拉列表之间需要建立关联。通过第一个能选择第二个,并同时选择第三个,第四个等等。那么每一个下拉列表的显示数据之间如何建立关联,关联起来的数据又如何通过事件驱动,这正是本文所要讨论的主要内容。

熟悉VB、Delphi等RAD开发工具的朋友可能会感到疑惑。的确,在这些所谓的RAD开发工具中,我们可以利用Combo Boxes控件很容易的实现下拉菜单,进而实现他们之间的关联。但是由于WEB项目中的下拉菜单是利用HTML中的<SELECT>元素来实现的,而由于HTML的局限性,无论是对象的属性还是事件模型,都远没有RAD工具那么强大。所以,开发WEB项目,这种问题只能有一个解决途径,那就是利用JavaScript(也可能有人说可以利用java来实现,那我也只好说,您是高手)。
关于JavaScript的使用,不是本文的重点,所以不了解或不熟悉JavaScript的读者请先参考JavaScript的相关资料以获取相关信息。

好,言归正传,下面我们就一起来探讨多维下拉菜单的设计问题。为了讨论的方便,我们就以上文提到的三维下拉菜单为例,向大家一步一步的讲述设计的思路。

一、分析菜单的运作流程

首先,用户会选择单位列表,并从中选出一个单位名称,我们假定为单位A。这时,另外两个下拉列表应该做些什么?对,我们希望第二个下拉菜单能立即反映第一个下拉菜单的选择,显示并仅显示单位A中的所有部门,我们再假定菜单中第一项为部门A(默认的显示项)。那么可能有读者会问,第三个下拉菜单不是应该同时选择与部门A对应的员工数据吗?这是个很好的想法,是的,我们也应该立即改变第三个下拉菜单中的数据为部门A中的员工列表。同样,当用户选择部门时,又会改变员工列表。依次类推。
以上是一种思路,可能有一些特殊的情况,例如,在改变部门列表时,并不希望立即就选择一个部门,而是显示一个"请选择"字样的提示条目。
思路已经有了,下面就是如何实现的问题了。

二、菜单数据的容器

根据常规想法,当用户从第一个下拉菜单中选择单位名称,我们可以从数据库中选出与之相关的部门数据,并显示出来,这似乎也不无可行。但有经验的开发者就会发现,由于Web页面的无状态性,当你再次连接数据库时,Web页面必须得再次刷新。这是一个头疼的问题,一方面我们想连接数据库,可另一方面我们必须得保持用户已输入数据不被破坏。即使如此,估计用户也并不希望看到一个每次选择都刷新一次的局面。难道就没有更好的办法?
有,那就是利用JavaScript的多维数组。我们为什么不可以把需要显示的数据在第一次连接数据库时全取出来,放到数组中去?这样在每次改变菜单数据时,只要从数组中取得数据,不就可以大大的提高效率了吗?这是个令人振奋的方法,这个方法中提到的JavaScript数组,我们暂且称之为菜单数据的容器。
您的思路是不是一下子豁然开朗?可是跃跃欲试一番以后,是不是感到事情好像并不是那么简单?问题又来了,容器的结构该如何设计,数据之间的关联又如何实现呢?别急,其实这正是问题之所在。

三、数据容器结构的设计

说起容器结构的设计,我们得感谢数据结构中的链表给我们的启示--链表是通过指针联系在一起的。虽然JavaScript中没有指针的概念,但我们为什么不可以模拟一下。
为了讨论方便,我们假定数据库的结构如下:

1、 单位信息表:(unit_id, unit_name, …)
2、 部门信息表:(dept_id, unit_id, dept_name, …)
3、 员工信息表:(emp_id, dept_id, emp_name, …)

利用这个数据库结构,我们可以很容易的推导出数组的结构。您说的没错,这应该是一个多维数组。其定义方法应该象下面这样(以部门为例):

var arrDept = new Array();
arrDept[0] = new Array(unit_id0, dept_id0 dept_name0);
arrDept[1] = new Array(unit_id1, dept_id1, dept_name1);

arrDept[n] = new Array(unit_idn, dept_idn, dept_namen);

n的大小视实际数据量而定,例如在单位下拉菜单中,n代表单位的总数。但读者必须明白,正是由于n的不确定性,以上的代码必须通过程序动态的产生。例如对于ASP程序,我们可以在<script></script>之间嵌入这样的一段代码:

<%
Dim rs, i
'[连接数据库,取出数据]
response.write "var arrDept = new Array();" & vbNewLine
i = 0
while not rs.EOF
response.write "arrDept[" & i & "] = new Array('" & rs(unit_id) & "', '" & _
rs(dept_id) & "', '" & rs(dept_name) & "');" & vbNewLine
rs.MoveNext
i = i +1
wend

%>

代码拷贝框

[Ctrl+A 全部选择 然后拷贝]

以上这段代码用来从部门表中取出数据,并产生相关的JavaScript多维数组。这只是笔者的一种演示,读者完全可以使用更灵活的方法来提取数据。
说来说去,我们还是要回到JavaScript数组的结构定义上来。聪明的读者应该已经从上述的代码中发现了数组的定义方法,但笔者还是要不厌其烦的再补充一遍:
我们把数组的第一个元素定义为指针,用来指向其"父结点"。等等,什么是父结点?父结点说明白了就是上一级结点,例如,部门的上一级是单位,员工的上一级是部门。那么第二个元素是什么?让我们来看一下下面的一段<SELECT>定义:

<SELECT NAME="s1" onChange=" SetSubMenu(this)">
<OPTION Value="1">单位1</OPTION>
<OPTION Value="2">单位2</OPTION>
….
</SELECT>

<OPTION>元素的Value属性从哪里来呢?对,就是第二个元素,依此类推,第三个元素指的就是显示在菜单中的数据喽,即上面的"单位1"、"单位2"…

读者到这里可能有些糊涂了,说这么多,这个数组到底是什么样?别急,让我们以部门为例,给出一段根据部门库中的数据动态生成的数组模拟代码:

<SCRIPT LANGUAGE="JAVASCRIPT">
<!-

var arrDept = new Array();
arrDept[0] = new Array('u01', 'd01', '部门1');
arrDept[1] = new Array('u01', 'd02', '部门2');

arrDept[8] = new Array('u06', 'd08', '部门8');

arrDept[15] = new Array('u08', 'd15', '部门15');

->
</SCRIPT>

数组终于真相大白。以"u"开头数据的代表单位的编号,即,指向单位的指针,也就是说,我们可以通过这个编号来确定该单位所属的部门;以"d"开头的数据代表部门的编号,用来供下一级选单(即员工选单)的指针使用。(注:实际使用中,数据格式根据情况而定)
有一个问题,象单位这样没有父结点的数组该如何定义?很简单,把数组的第一个元素全部置为0就行了。
下一步,是到我们编写JavaScript代码来控制菜单的显示的时候了。我们就假定您生成的三个数组分别命名为arrUnit,arrDept,arrEmp。

出处:蓝色理想
责任编辑:moby

上一页 下一页 web关联菜单实现方法 [2]

◎进入论坛网络编程版块参加讨论

相关文章 更多相关链接
[asp]怎么添加验证码的解决方法
开发ASP组件引用asp内置对象方法
手机GUI二级菜单设计说明
用Popup窗口建无限级Web页菜单
[ASP]利用 xmlhttp 分块上传文件
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:1/21个记录/页 转到 页 共2个记录 分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2