分享
 
 
 

使用"函数递归"实现的树型菜单

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

使用"函数递归"实现的树型菜单

源作者:simon.qiu 人气:11847

树型菜单在很多桌面应用系统中都有非常广泛的应用,其主要优点是结构清晰,利于使用者非常清楚的知道目前自己所在的位置。但在web上树型菜单的应用因为没有理想的现成组件可以拿过来直接使用,所以一般的情况下,程序员主要是通过JavaScript来实现一些简单的树型结构菜单,但这些菜单往往都是事先定好各菜单项目,以及各菜单项目之间的层次关系,不利于扩充,一旦需要另一个菜单结构时,往往还需要重新编写,因此使用起来不是很方便。

经过对函数递归的研究,我发现这种树型菜单可以通过递归函数,使树型菜单的显示实现动态变化,并没有级数的限制。下面就是我用php,MySQL,JavaScript写的一个动态树型菜单的处理代码,如果大家有兴趣的话,就和我一起来看看我是如何实现的吧:)

首先,我们需要一个数据库,在这个数据库中,我们建立以下一张表:

CREATE TABLE menu (

id tinyint(4) NOT NULL auto_increment,

parent_id tinyint(4) DEFAULT "0" NOT NULL,

name varchar(20),

url varchar(60),

PRIMARY KEY (id)

);

这张表中

id 为索引

parent_id 用来保存上一级菜单的id号,如果是一级菜单则为0

name 为菜单的名称,也就是要在页面上显示的菜单内容

url 如果某菜单为末级菜单,则需要指定该连接的url地址,这个字段就是用来保存此地址的,其他非末级菜单,该字段为空

好了,数据库有了,你就可以添加一些记录了,下面是我做测试的时候,使用的一些记录:

INSERT INTO menu VALUES ( "1", "0", "人事管理", "");

INSERT INTO menu VALUES ( "2", "0", "通讯交流", "");

INSERT INTO menu VALUES ( "3", "1", "档案管理", "");

INSERT INTO menu VALUES ( "4", "1", "考勤管理", "http://localhost/personal/attendance.php");

INSERT INTO menu VALUES ( "5", "2", "通讯录", "");

INSERT INTO menu VALUES ( "6", "2", "网络会议", "");

INSERT INTO menu VALUES ( "7", "3", "新增档案", "http://localhost/personal/add_achive.php");

INSERT INTO menu VALUES ( "8", "3", "查询档案", "http://localhost/personal/search_archive.php");

INSERT INTO menu VALUES ( "9", "3", "删除档案", "http://localhost/personal/delete_archive.php");

INSERT INTO menu VALUES ( "10", "5", "新增通讯记录", "http://localhost/communication/add_address.php");

INSERT INTO menu VALUES ( "11", "5", "查询通讯记录", "http://localhost/communication/search_address.php");

INSERT INTO menu VALUES ( "12", "5", "删除通讯记录", "http://localhost/communication/delete_address.php");

INSERT INTO menu VALUES ( "13", "6", "召开会议", "http://localhost/communication/convence_meeting.php");

INSERT INTO menu VALUES ( "14", "6", "会议查询", "http://localhost/communication/search_meeting.ph");

在添加记录的时候,一定要注意,非一级菜单的parent_id一定要指定为上级菜单的ID号,否则你的菜单是不会显示出来的:)

好了!有了数据库,下面就是通过php,JavaScript把菜单从数据库中读出来,并显示出来了:)

1、JavaScript脚本:

function ShowMenu(MenuID)

{

if(MenuID.style.display=="none")

{

MenuID.style.display="";

}

else

{

MenuID.style.display="none";

}

}

这个脚本很简单,就是用来响应点击某个菜单被点击的事件的。

2、CSS文件:

TD {

FONT-FAMILY: "Verdana", "宋体"; FONT-SIZE: 12px; LINE-HEIGHT: 130%; letter-spacing:1px

}

A:link {

COLOR: #990000; FONT-FAMILY: "Verdana", "宋体"; FONT-SIZE: 12px; TEXT-DECORATION: none; letter-spacing:1px

}

A:visited {

COLOR: #990000; FONT-FAMILY: "Verdana", "宋体"; FONT-SIZE: 12px; TEXT-DECORATION: none; letter-spacing:1px

}

A:active {

COLOR: #990000; FONT-FAMILY: "Verdana", "宋体"; FONT-SIZE: 12px; TEXT-DECORATION: none; letter-spacing:1px

}

A:hover {

COLOR: #ff0000; FONT-FAMILY: "Verdana", "宋体"; FONT-SIZE: 12px; TEXT-DECORATION: underline; letter-spacing:1px

}

.Menu {

COLOR:#000000; FONT-FAMILY: "Verdana", "宋体"; FONT-SIZE: 12px; CURSOR: hand

}

定义了一些基本的样式信息,比如字体,颜色,超级连接的样式等,如果你想改变样式的话,只要修改这里就行了!

3、下面就是我的php页面了!

//基本变量设置

$GLOBALS["ID"] =1; //用来跟踪下拉菜单的ID号

$layer=1; //用来跟踪当前菜单的级数

//连接数据库

$Con=mysql_connect("localhost","root","");

mysql_select_db("work");

//提取一级菜单

$sql="select * from menu where parent_id=0";

$result=mysql_query($sql,$Con);

//如果一级菜单存在则开始菜单的显示

if(mysql_num_rows($result)>0) ShowTreeMenu($Con,$result,$layer,$ID);

//=============================================

//显示树型菜单函数 ShowTreeMenu($con,$result,$layer)

//$con:数据库连接

//$result:需要显示的菜单记录集

//layer:需要显示的菜单的级数

//=============================================

function ShowTreeMenu($Con,$result,$layer)

{

//取得需要显示的菜单的项目数

$numrows=mysql_num_rows($result);

//开始显示菜单,每个子菜单都用一个表格来表示

echo "";

for($rows=0;$rows<$numrows;$rows++)

{

//将当前菜单项目的内容导入数组

$menu=mysql_fetch_array($result);

//提取菜单项目的子菜单记录集

$sql="select * from menu where parent_id=$menu[id]";

$result_sub=mysql_query($sql,$Con);

echo " ";

//如果该菜单项目有子菜单,则添加JavaScript onClick语句

if(mysql_num_rows($result_sub)>0)

{

echo " ";

echo " ";

}

else

{

echo " ";

echo " ";

}

//如果该菜单项目没有子菜单,并指定了超级连接地址,则指定为超级连接,

//否则只显示菜单名称

if($menu[url]!="")

echo "$menu[name]";

else

echo $menu[name];

echo " ";

//如果该菜单项目有子菜单,则显示子菜单

if(mysql_num_rows($result_sub)>0)

{

//指定该子菜单的ID和style,以便和onClick语句相对应

echo " ";

echo " ";

echo " ";

//将级数加1

$layer++;

//递归调用ShowTreeMenu()函数,生成子菜单

ShowTreeMenu($Con,$result_sub,$layer);

//子菜单处理完成,返回到递归的上一层,将级数减1

$layer--;

echo "

";

}

//继续显示下一个菜单项目

}

echo " ";

}

?>

在上面的php页面里面,我定义了一个函数ShowTreeMenu(),通过这个函数的调用,会从数据库中递归的调出每个菜单项目,并显示在页面上了:)

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
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- 王朝網路 版權所有