樹型選單在許多桌面應用系統中都有非常廣泛的應用,其主要優點是結構清晰,利於使用者非常清楚的知道目前自己所在的位置。但在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");
//提取一級選單
$="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{
//將目前選單項目的內容匯入陣列
$menu=mysql_fultu=mysql_fultu=mysql_$
//提取選單項目的子選單記錄集
$sql="select * from menu where parent_id=$menu[id]";
$result_sub=mysql_query($sql,$Con);
$result_sub=mysql_query($sql,$Con);
$result_sub=mysql_query($sql,$Con);
echo ";
//如果該選單項目有子選單,則加入JavaScript onClick語句
if(mysql_num_rows($result_sub)>0)
{
echo " ";
echo " ";
echo " ";
}
//如果該選單項目沒有子選單,並指定了超級連接位址,則指定為超級連接,
//否則只顯示選單名稱
if($menu[url]!=" ")
echo "$menu[name]";
else
echo $menu[name];
echo "
";
";
//如果該項目選單有子,如果該項目選單,則顯示項目選單,則顯示項目選單(, mysql_num_rows($result_sub)>0)
{
//指定該子選單的ID和style,以便和onClick語句相對應
echo " ";
echo " ";
echo " "; 1
$layer++;
//遞歸呼叫ShowTreeMenu()函數,產生子選單
ShowTreeMenu($Con,$result_sub,$layer);
//子選單處理完成,回到遞歸的上一層,將級數減1
$layer--;
echo "
";
}
//繼續顯示下一個選單項目
}
echo " ";
}了一個函數ShowTreeMenu(),透過這個函數的調用,會從資料庫中遞歸的調出每個選單項目,並顯示在頁面上了:)
想要獲取更多的相關內容文章請關注PHP中文網(www.php.cn)!