JavaScript+PHP应用二：网页设计中树形菜单的动态实现
时间：2007-02-17 来源：PHP爱好者
树形菜单，熟悉Windows程序管理器的读者一定不会陌生。单击项目左侧的+号，项目展开；再次单击，项目收缩。读过很多篇有关树形菜单的JavaScript实现方法，原理很简单，都是利用Style中display属性的控制。笔者本文的重点并不侧重于此，倒是想谈一谈如何实现每一次从数据库中提取数据并动态更新树形菜单。
树形菜单主要用来导航。网站有很多栏目，每个栏目下有很多子栏目，栏目经常变动，如增加新栏目，改变现有栏目名称，调整主次栏目之间关系等等，如果每一次都去改动页面代码，非常不便。而且因为信息都存放在数据库中，动态实现变得可能和必要。
本文并不侧重理论，只是为大家提供自己的一段代码，和大家一起来探讨一下PHP实现问题。为了便于说明，笔者对数据库作了一些改动，假设菜单字符串存放在menu表中，main字段存放主菜单字符串，sub字段存放子菜单字符串，subid字段存放子菜单标识。
<?php
$DB = new My_DB();
$DB->query("select subid, main from menu group by main order by subid");
while ($DB->next_record()){
$Main[] = $DB->f("main");
$Key[] = $DB->f("subid");
}
/*首先，连接数据库，查询所谓的栏目名称。以上代码采用了PHPLib中的数据库函数，其中，$Main数组用来存放主菜单字符串，$Key数组用来存放子菜单关键字。大家可以采用多种方法，因人而异*/
for ($i=0;$i<count($Main);$i++){
$j=0;
$DB->query("select sub, subid from menu where main='".$Main[$i]."'");
////利用query查询出与当前主菜单匹配的所有子菜单字符串
?>
/*以下代码和HTML代码结合到一起，大家看起来可能会不习惯，但这样代码显得简洁多了。为了模拟树形菜单，笔者源程序中使用了几个图片文件，l.gif, m.gif和p.gif，并利用onMouse事件模拟菜单的动态效果。PHP语句主要是为Javascript制作标签(tag)的id*/
<table width="140" border="0" cellspacing="0" cellpadding="0" class="f14">
<tr>
<td width="15"></td>
<td id="<?php echo "m_".$Key[$i]; ?>" width="9" height="21"><img src="http://www.chinaitpower.com/A/2001-11-25/http://www.chinaitpower.com/A/2001-11-25/images/p.gif" width="9" height="21"></td>
<td>
<div style="cursor:hand" onclick="javascript:MakeMenu('<?php echo $Key[$i]; ?>')" onMouseOver="javascript:MakeShow('in')" onMouseOut="javascript:MakeShow('out')"> <?php echo $Main[$i]; ?></div>
</td>
</tr>
<tr id="<?php echo "s_".$Key[$i]; ?>" style="display:none">
<td width="15"></td>
<td colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="f9">
<?php
while ($DB->next_record()){
?>
<tr>
<td width="12">
<img src="images/<?php echo ++$j==$DB->nf()?"l.gif":"t.gif"; ?>" width="12" height="21"></td>
////需要说明一下，$j变量在这里用来决定显示什么图片。此句的意思是，子菜单的最后一项显示l.gif，其它项显示t.gif
<td> <?php echo "<a href="yoururl">yourstr</a>";?></td>
</tr>
<?php
}
?>
</table>
</td>
</tr>
</table>
<?php
}
?>
到此为止，PHP的使命已经结束，大家可以把代码运行一下，看看输出是什么。总而言之，它的输出结果正是树形菜单所要的结构。下面我们需要构造Javascript代码。很简单，我不打算作向详细的描述。
<script language="javascript1.2">
<!--
function MakeMenu(id){
mid="m_"+id;
sid="s_"+id;
with (document){
if (all(sid).style.display=="none"){
all(sid).style.display="";
all(mid).innerHTML="<img src='http://www.chinaitpower.com/A/2001-11-25/images/m.gif' width='9' height='21'>";
}else{
all(sid).style.display="none";
all(mid).innerHTML="<img src='http://www.chinaitpower.com/A/2001-11-25/http://www.chinaitpower.com/A/2001-11-25/images/p.gif' width='9' height='21'>";
}
}
}
function MakeShow(to){
with (document){
if (to=='in'){
window.event.srcElement.style.color="red";
window.event.srcElement.style.fontWeight="bold";
}else{
window.event.srcElement.style.color="";
window.event.srcElement.style.fontWeight="";
}
}
}
-->
</script>
熟悉Javascript的读者，以上代码理解起来应该不成问题。这段代码的难点就在于PHP的实现部分，调试时遇到很大麻烦，总是提示Javascirpt错误。在排除万难之后，把这段代码奉献给大家，希望能为大家以后的网页设计工作节省一点宝贵的时间。
非常全面的一个php技术网站,php爱好者站 http://www.phpfans.net 有相当丰富的文章和源代码.
树形菜单主要用来导航。网站有很多栏目，每个栏目下有很多子栏目，栏目经常变动，如增加新栏目，改变现有栏目名称，调整主次栏目之间关系等等，如果每一次都去改动页面代码，非常不便。而且因为信息都存放在数据库中，动态实现变得可能和必要。
本文并不侧重理论，只是为大家提供自己的一段代码，和大家一起来探讨一下PHP实现问题。为了便于说明，笔者对数据库作了一些改动，假设菜单字符串存放在menu表中，main字段存放主菜单字符串，sub字段存放子菜单字符串，subid字段存放子菜单标识。
<?php
$DB = new My_DB();
$DB->query("select subid, main from menu group by main order by subid");
while ($DB->next_record()){
$Main[] = $DB->f("main");
$Key[] = $DB->f("subid");
}
/*首先，连接数据库，查询所谓的栏目名称。以上代码采用了PHPLib中的数据库函数，其中，$Main数组用来存放主菜单字符串，$Key数组用来存放子菜单关键字。大家可以采用多种方法，因人而异*/
for ($i=0;$i<count($Main);$i++){
$j=0;
$DB->query("select sub, subid from menu where main='".$Main[$i]."'");
////利用query查询出与当前主菜单匹配的所有子菜单字符串
?>
/*以下代码和HTML代码结合到一起，大家看起来可能会不习惯，但这样代码显得简洁多了。为了模拟树形菜单，笔者源程序中使用了几个图片文件，l.gif, m.gif和p.gif，并利用onMouse事件模拟菜单的动态效果。PHP语句主要是为Javascript制作标签(tag)的id*/
<table width="140" border="0" cellspacing="0" cellpadding="0" class="f14">
<tr>
<td width="15"></td>
<td id="<?php echo "m_".$Key[$i]; ?>" width="9" height="21"><img src="http://www.chinaitpower.com/A/2001-11-25/http://www.chinaitpower.com/A/2001-11-25/images/p.gif" width="9" height="21"></td>
<td>
<div style="cursor:hand" onclick="javascript:MakeMenu('<?php echo $Key[$i]; ?>')" onMouseOver="javascript:MakeShow('in')" onMouseOut="javascript:MakeShow('out')"> <?php echo $Main[$i]; ?></div>
</td>
</tr>
<tr id="<?php echo "s_".$Key[$i]; ?>" style="display:none">
<td width="15"></td>
<td colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="f9">
<?php
while ($DB->next_record()){
?>
<tr>
<td width="12">
<img src="images/<?php echo ++$j==$DB->nf()?"l.gif":"t.gif"; ?>" width="12" height="21"></td>
////需要说明一下，$j变量在这里用来决定显示什么图片。此句的意思是，子菜单的最后一项显示l.gif，其它项显示t.gif
<td> <?php echo "<a href="yoururl">yourstr</a>";?></td>
</tr>
<?php
}
?>
</table>
</td>
</tr>
</table>
<?php
}
?>
到此为止，PHP的使命已经结束，大家可以把代码运行一下，看看输出是什么。总而言之，它的输出结果正是树形菜单所要的结构。下面我们需要构造Javascript代码。很简单，我不打算作向详细的描述。
<script language="javascript1.2">
<!--
function MakeMenu(id){
mid="m_"+id;
sid="s_"+id;
with (document){
if (all(sid).style.display=="none"){
all(sid).style.display="";
all(mid).innerHTML="<img src='http://www.chinaitpower.com/A/2001-11-25/images/m.gif' width='9' height='21'>";
}else{
all(sid).style.display="none";
all(mid).innerHTML="<img src='http://www.chinaitpower.com/A/2001-11-25/http://www.chinaitpower.com/A/2001-11-25/images/p.gif' width='9' height='21'>";
}
}
}
function MakeShow(to){
with (document){
if (to=='in'){
window.event.srcElement.style.color="red";
window.event.srcElement.style.fontWeight="bold";
}else{
window.event.srcElement.style.color="";
window.event.srcElement.style.fontWeight="";
}
}
}
-->
</script>
熟悉Javascript的读者，以上代码理解起来应该不成问题。这段代码的难点就在于PHP的实现部分，调试时遇到很大麻烦，总是提示Javascirpt错误。在排除万难之后，把这段代码奉献给大家，希望能为大家以后的网页设计工作节省一点宝贵的时间。
非常全面的一个php技术网站,php爱好者站 http://www.phpfans.net 有相当丰富的文章和源代码.
相关阅读 更多 +
