트리 메뉴는 많은 데스크탑 애플리케이션 시스템에서 널리 사용됩니다. 구조가 명확하여 사용자가 현재 위치를 명확하게 알 수 있다는 것이 가장 큰 장점입니다. 그러나 웹에서 트리 메뉴를 적용하는 경우 직접 사용할 수 있는 이상적인 기성 컴포넌트가 없기 때문에 일반적으로 프로그래머는 주로 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 번호를 저장합니다. 이전 메뉴. , 1차 메뉴인 경우 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');
레코드를 추가할 때 non의 parent_id를 참고하세요. - 1차 메뉴는 반드시 상위 메뉴의 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 첫 번째 레벨 메뉴가 존재합니다. 시작 메뉴 표시
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 " " 🎜>if($menu[url]!="")
echo "$menu[name]";
else
echo $menu[name]
echo "
"
//메뉴 항목에 하위 메뉴가 있는 경우 하위 메뉴 표시
if(mysql_num_rows($result_sub)>0)
{
//onClick 문에 해당하는 하위 메뉴의 ID와 스타일을 지정합니다.
echo " "
echo " ";
echo " ";
//계열을 1씩 늘립니다.
$layer++
//ShowTreeMenu() 함수를 반복적으로 호출하여 하위 메뉴를 생성합니다.
ShowTreeMenu($Con,$result_sub, $layer);//하위 메뉴 처리가 완료되면 재귀 레이어의 이전 단계로 돌아가서 레벨을 1만큼 줄입니다.
$layer--
echo "
"; 🎜>}
//다음 메뉴 항목을 계속 표시합니다
}
echo " " ;
}
?> 위의 PHP 페이지에서는 ShowTreeMenu() 함수를 정의했는데, 이 함수를 호출하면 데이터베이스에서 반복적으로 검색됩니다. 각 메뉴 항목을 호출하여 페이지에 표시합니다.)
If 더 많은 관련 콘텐츠 기사를 얻으려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!