【www.gdgbn.com--php应用】

树型菜单在很多桌面应用系统中都有非常广泛的应用,其主要优点是结构清楚,利于使用者非常清楚的知道目前自己所在的位置。但在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.php");


在添加记录的时候,一定要注重,非一级菜单的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 {

本文来源:http://www.gdgbn.com/jiaocheng/11441/