PHP+JS无限级可伸缩菜单详解(简单易懂)_php教程-查字典教程网
PHP+JS无限级可伸缩菜单详解(简单易懂)
PHP+JS无限级可伸缩菜单详解(简单易懂)
发布时间:2017-01-07 来源:查字典编辑
摘要:发了几天基础的东西,今天来点稍微难的,一般在CMS系统后台中都要用到的类别管理部分的精华--无限级分类菜单,对于新手来说,这个可能有一定难度...

发了几天基础的东西,今天来点稍微难的,一般在CMS系统后台中都要用到的类别管理部分的精华--无限级分类菜单,对于新手来说,这个可能有一定难度,但是今天听完我细细道来,相信以后大家就都会弄这东东了。怎么实现呢?大家先做个数据库出来先:

--

--表的结构`cr_columninfo`

--

复制代码 代码如下:CREATETABLE`cr_columninfo`(

`columnid`int(4)NOTNULLauto_increment,

`columnfatherid`int(4)NOTNULLdefault'0',

`columnname`varchar(100)NOTNULLdefault'',

`columnadder`varchar(50)NOTNULLdefault'',

`columninputdate`dateNOTNULLdefault'0000-00-00',

PRIMARYKEY(`columnid`)

)ENGINE=MyISAMAUTO_INCREMENT=15DEFAULTCHARSET=utf8AUTO_INCREMENT=15;

--导出表中的数据`cr_columninfo`

--

INSERTINTO`cr_columninfo`(`columnid`,`columnfatherid`,`columnname`,`columnadder`,`columninputdate`)VALUES(1,0,'影音明星','leehui','2006-09-28'),

(2,0,'校园风情','leehui1983','2006-09-28'),

(3,1,'港台明星','leehui','2006-09-28'),

(4,0,'风景图片','leehui1983','2006-09-29'),

(5,4,'浩瀚大海','leehui1983','2006-09-29'),

(6,5,'福州的海','leehui1983','2006-09-29'),

(7,2,'毕业图片','leehui','2006-09-29'),

(9,0,'体育明星','leehui1983','2006-10-02'),

(10,0,'精美壁纸','leehui1983','2006-10-02'),

(11,0,'城市风光','leehui1983','2006-10-02'),

(12,0,'卡通动漫','leehui1983','2006-10-02'),

(13,0,'游戏截图','leehui1983','2006-10-02'),

(14,0,'作者相册','leehui1983','2006-10-02');

这些是测试数据,基本原理就是按照树型结构建立数据字段,核心就是栏目都有本身的ID号和父栏目的ID号,依靠这两个关系,建立树型结构,顶级栏目父ID=0,这个都好理解,现在来叙述下程序执行原理,本程序采用最为普遍的递归算法来遍历子菜单,首先,先查询出所有顶级菜单,显示在一个大表格里,没一行显示一个顶级菜单,再通过递归列出所有子菜单,子菜单处在上级菜单的所在行的下一行,且行的显示属性为不显示,通过程序动态生成的行ID号,结合JS控制行的显示与隐藏,也就是类似于微软菜单的可伸缩效果,文章最后有张图有助于大家理解,这是把生成页面的HTML复制进DW来只管演示程序的最终结果。

来看代码部分,并没有难懂的语法,请大家借助注释自己阅读,有兴趣可扩展此代码。

PHP代码如下:

复制代码 代码如下:<html>

<head>

<metahttp-equiv="Content-Type"c/>

<title>类别目录树</title>

<scripttype="text/javascript">

functionShowMenu(MenuID)

{

if(MenuID.style.display=="none"){

MenuID.style.display="";

}

else{

MenuID.style.display="none";

}

}

</script>

<linkhref="style.css"rel="stylesheet"type="text/css">

</head>

<bodytopmargin="0"bgcolor="#EFEFE7">

<tablewidth="100%"height="25"border="0"cellpadding="0"cellspacing="0"bgcolor="#739E18">

<tr>

<tdalign="left"><strong>栏目树形结构列表</strong></td>

</tr>

</table>

<?php

//基本变量设置

$GLOBALS["ID"]=1;//用来跟踪下拉菜单的ID号

$layer=1;//用来跟踪当前菜单的级数

//连接数据库

$Con=mysql_connect("localhost","root","7529639");

mysql_select_db("cr_download");

mysql_query("SETNAMES'GBK'");

//提取一级菜单

$sql="select*fromcr_columninfowherecolumnfatherid=0";

$result=mysql_query($sql,$Con);

//如果一级菜单存在则开始菜单的显示

if(mysql_num_rows($result)>0)ShowTreeMenu($Con,$result,$ID);

//=============================================

//显示树型菜单函数ShowTreeMenu($con,$result,$layer)

//$con:数据库连接

//$result:需要显示的菜单记录集

//$layer:需要显示的菜单的级数

//=============================================

functionShowTreeMenu($Con,$result,$layer)

{

//取得需要显示的菜单的项目数

$numrows=mysql_num_rows($result);

//开始显示菜单,每个子菜单都用一个表格来表示

echo"<tablecellpadding='0'cellspacing='0'border='0'width='100%'>";

for($rows=0;$rows<$numrows;$rows++)

{

//将当前菜单项目的内容导入数组

$menu=mysql_fetch_array($result);

//提取菜单项目的子菜单记录集

$sql="select*fromcr_columninfowherecolumnfatherid=$menu[columnid]";

$result_sub=mysql_query($sql,$Con);

echo"<tr>";

//如果该菜单项目有子菜单,则添加JavaScriptonClick语句

if(mysql_num_rows($result_sub)>0)

{

echo"<tdwidth='20'><imgsrc='./images/plus.png'border='0'></td>";

echo"<tdclass='Menu'>";

}

else{

echo"<tdwidth='20'><imgsrc='./images/page.png'border='0'></td>";

echo"<tdclass='Menu'>";

}

//如果该菜单项目没有子菜单,只显示菜单名称

echo$menu[columnname];

echo"</td></tr>";

//如果该菜单项目有子菜单,则显示子菜单

if(mysql_num_rows($result_sub)>0)

{

//指定该子菜单的ID和style,以便和onClick语句相对应

echo"<trid=Menu".$GLOBALS["ID"]++.">";

echo"<tdwidth='20'></td>";

echo"<td>";

//将级数加1

$layer++;

//递归调用ShowTreeMenu()函数,生成子菜单

ShowTreeMenu($Con,$result_sub,$layer);

//子菜单处理完成,返回到递归的上一层

echo"</td></tr>";

}

//子菜单处理完成,返回到递归的上一层,将级数减1

$layer--;

}

echo"</table>";

}

?>

</body>

</html>

最后贴上效果图和源代码打包,希望本文对大家有所帮助^_^

下载此文件

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新php教程学习
    热门php教程学习
    编程开发子分类