使用函数递归实现基于php和MySQL的动态树型菜单
树型菜单在很多桌面应用系统中都有非常广泛的应用,其主要优点是结构清晰,利于使用者非常清楚的知道目前自己所在的位置。但在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 {
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 "
![]() | "; "; } else { echo " |
![]() | "; "; } //如果该菜单项目没有子菜单,并指定了超级连接地址,则指定为超级连接, //否则只显示菜单名称 if($menu[url]!="") echo "$menu[name]"; else echo $menu[name]; echo " |
}
?>
在上面的php页面里面,我定义了一个函数ShowTreeMenu(),通过这个函数的调用,会从数据库中递归的调出每个菜单项目,并显示在页面上了:)

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











MySQL은 설치가 간단하고 강력하며 데이터를 쉽게 관리하기 쉽기 때문에 초보자에게 적합합니다. 1. 다양한 운영 체제에 적합한 간단한 설치 및 구성. 2. 데이터베이스 및 테이블 작성, 삽입, 쿼리, 업데이트 및 삭제와 같은 기본 작업을 지원합니다. 3. 조인 작업 및 하위 쿼리와 같은 고급 기능을 제공합니다. 4. 인덱싱, 쿼리 최적화 및 테이블 파티셔닝을 통해 성능을 향상시킬 수 있습니다. 5. 데이터 보안 및 일관성을 보장하기위한 지원 백업, 복구 및 보안 조치.

Navicat 자체는 데이터베이스 비밀번호를 저장하지 않으며 암호화 된 암호 만 검색 할 수 있습니다. 솔루션 : 1. 비밀번호 관리자를 확인하십시오. 2. Navicat의 "비밀번호 기억"기능을 확인하십시오. 3. 데이터베이스 비밀번호를 재설정합니다. 4. 데이터베이스 관리자에게 문의하십시오.

Navicat Premium을 사용하여 데이터베이스 생성 : 데이터베이스 서버에 연결하고 연결 매개 변수를 입력하십시오. 서버를 마우스 오른쪽 버튼으로 클릭하고 데이터베이스 생성을 선택하십시오. 새 데이터베이스의 이름과 지정된 문자 세트 및 Collation의 이름을 입력하십시오. 새 데이터베이스에 연결하고 객체 브라우저에서 테이블을 만듭니다. 테이블을 마우스 오른쪽 버튼으로 클릭하고 데이터 삽입을 선택하여 데이터를 삽입하십시오.

MariaDB 용 Navicat은 암호가 암호화 된 양식으로 저장되므로 데이터베이스 비밀번호를 직접 볼 수 없습니다. 데이터베이스 보안을 보장하려면 비밀번호를 재설정하는 세 가지 방법이 있습니다. Navicat을 통해 비밀번호를 재설정하고 복잡한 비밀번호를 설정하십시오. 구성 파일을 봅니다 (권장되지 않음, 위험이 높음). 시스템 명령 줄 도구를 사용하십시오 (권장되지 않으면 명령 줄 도구에 능숙해야 함).

응용 프로그램을 열고 새로운 연결 (Ctrl n)을 선택하여 Navicat에서 새로운 MySQL 연결을 만들 수 있습니다. "MySQL"을 연결 유형으로 선택하십시오. 호스트 이름/IP 주소, 포트, 사용자 이름 및 비밀번호를 입력하십시오. (선택 사항) 고급 옵션을 구성합니다. 연결을 저장하고 연결 이름을 입력하십시오.

Navicat이 데이터베이스 및 해당 솔루션에 연결할 수없는 일반적인 이유 : 1. 서버의 실행 상태를 확인하십시오. 2. 연결 정보를 확인하십시오. 3. 방화벽 설정을 조정하십시오. 4. 원격 액세스 구성; 5. 네트워크 문제 문제 해결; 6. 권한을 확인하십시오. 7. 버전 호환성을 보장합니다. 8. 다른 가능성 문제를 해결하십시오.

Navicat에서 SQL을 수행하는 단계 : 데이터베이스에 연결하십시오. SQL 편집기 창을 만듭니다. SQL 쿼리 또는 스크립트를 작성하십시오. 실행 버튼을 클릭하여 쿼리 또는 스크립트를 실행하십시오. 결과를 봅니다 (쿼리가 실행 된 경우).

데이터베이스에 연결할 때의 일반적인 오류 및 솔루션 : 사용자 이름 또는 비밀번호 (오류 1045) 방화벽 차단 연결 (오류 2003) 연결 시간 초과 (오류 10060) 소켓 연결 (오류 1042) SSL 연결 오류 (오류 10055) 너무 많은 연결 시도가 차단되는 경우 (오류 1049) 데이터베이스에 연결되지 않음 (오류 1049) 데이터베이스에 연결되지 않습니다 (오류 1049).
