ツリー メニューは、多くのデスクトップ アプリケーション システムで広く使用されており、その主な利点は、構造が明確であり、ユーザーが現在の場所を明確に把握できることです。ただし、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) ),
主キー (id)
);
このテーブルでは、
parent_id は、前のメニューの ID 番号を保存するために使用されます。
name はメニューの名前、つまりページに表示されるメニューの内容です。
url メニューが最終レベルのメニューの場合、このフィールドは接続の URL アドレスを指定する必要があります。このアドレスを保存します。他の最終レベル以外のメニューの場合、このフィールドは空です
データベースができたので、テスト時に使用したレコードをいくつか追加します。
メニュー値に挿入します。 ( '1', '0', '人事管理', ' ');
メニュー値に挿入 ( '2', '0', 'コミュニケーション', ''); ( '3', '1', 'ファイル管理', '');
メニュー値に挿入 ( '4', '1', '出席管理', 'http://localhost/personal/attendance) .php');
メニュー値に挿入 ( '5', '2', 'アドレス帳 ', '');
メニュー値に挿入 ( '6', '2', 'Web会議') , '');
メニュー値に挿入 ( '7', '3', 'ファイルを追加', ' http://localhost/personal/add_achive.php'); 8', '3', 'アーカイブの検索', 'http://localhost/personal/search_archive.php');
メニュー値に挿入 ( '9', '3', 'アーカイブの削除', 'http ://localhost/personal/delete_archive.php');
メニュー値に挿入 ('10', '5', '新しい通信レコードの追加','http://localhost/communication/add_address.php') ;
メニュー値に挿入 ('11', '5', '通信レコードのクエリ', http://localhost/communication/search_address.php' );
メニュー値に挿入 ('12', ' 5', '通信記録の削除', http://localhost/communication/delete_address.php');
メニュー値に挿入 ( '13', '6', '会議の開催', 'http:// localhost/communication/convence_meeting.php');
メニュー値に挿入 ( '14', '6', 'http://localhost/communication/search_meeting.php');レコードでは、第 1 レベル以外のメニューの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 ファイル:
font-family: "verdana", "line-height: 130%; :1px
}
color: #990000; font-family: "verdana", "font-size: 12px; : none; 文字間隔:1px
}
色: #990000; フォントサイズ: 12px;
}
a:active {
color: #990000; font-family: "verdana", "宋体"; text-decoration: none; 文字間隔: 1px
}
a:hover {
color: #ff0000; font-family: "verdana", "宋体"; font-size: 12px; text-decoration: 文字間隔:1px
} .menu {
color:#000000; font-family: "verdana", "宋体"; font-size: 12px; カーソル: hand
}
は、フォント、色、スーパーリンクスタイルなどのいくつかの基本的なスタイル情報を定義します。など、スタイルを変更したい場合は、ここで変更するだけです。
3. 以下は私の php ページです。
;/head>
//基本的な変数設定
$globals["id"] //ドロップダウン メニューの ID 番号を追跡するために使用されます
$layer=1; ; //現在のメニューのレベルを追跡するために使用します
//データベースに接続します
$con=mysql_connect("localhost","root","");第 1 レベルのメニューを抽出します
$sql ="select * from menu whereparent_id=0";
$result=mysql_query($sql,$con);
//第 1 レベルのメニューが存在する場合、スタートメニュー
if(mysql_num_rows($result)>0 ) showtreemenu($con,$result,$layer,$id)
//=============== ============== ================
//ツリーメニュー関数を表示 showtreemenu($con,$result,$layer)
/ /$con: データベース接続
//$result: 必須 表示されるメニューレコードセット
//layer: 表示する必要があるメニューのレベル
//=============== ================= ===============
関数 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 whereparent_id=$menu[id]"; );
echo ""; ";
//メニュー項目にサブメニューがある場合、JavaScript の onclick ステートメントを追加します
if(mysql_num_rows($result_sub)>0)
{
echo "
< /td>";
echo "";
}
else
{
echo "
echo "";
}
//メニュー項目にサブメニューがなく、ハイパーリンク アドレスが指定されている場合は、ハイパーリンクとして指定されます。
//それ以外の場合は、メニュー名のみが表示されます
if($menu[url]!="")
echo " $menu[name]else
echo $menu[name];
echo "
// メニュー項目にサブメニューがある場合は、サブメニューを表示します
if(mysql_num_rows) ($result_sub)>0)
{
//onclick ステートメントに一致するサブメニューの ID とスタイルを指定します。
echo "
/ /次のメニュー項目を表示し続ける
}
echo "
?>
