• 技术文章 >php教程 >php手册

    PHP+JS无限级可伸缩菜单详解(简单易懂)

    2016-06-13 12:34:54原创398

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

    复制代码 代码如下:

    CREATE TABLE `cr_columninfo` (
    `columnid` int(4) NOT NULL auto_increment,
    `columnfatherid` int(4) NOT NULL default '0',
    `columnname` varchar(100) NOT NULL default '',
    `columnadder` varchar(50) NOT NULL default '',
    `columninputdate` date NOT NULL default '0000-00-00',
    PRIMARY KEY (`columnid`)
    ) ENGINE=MyISAM AUTO_INCREMENT=15 DEFAULT CHARSET=utf8 AUTO_INCREMENT=15 ;
    -- 导出表中的数据 `cr_columninfo`
    --
    INSERT INTO `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代码如下:

    复制代码 代码如下:




    类别目录树








    栏目树形结构列表

    //基本变量设置
    $GLOBALS["ID"] =1; //用来跟踪下拉菜单的ID号
    $layer=1; //用来跟踪当前菜单的级数
    //连接数据库
    $Con=mysql_connect("localhost","root","7529639");
    mysql_select_db("cr_download");
    mysql_query("SET NAMES 'GBK'");
    //提取一级菜单
    $sql="select * from cr_columninfo where columnfatherid=0";
    $result=mysql_query($sql,$Con);
    //如果一级菜单存在则开始菜单的显示
    if(mysql_num_rows($result)>0) ShowTreeMenu($Con,$result,$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 cr_columninfo where columnfatherid=$menu[columnid]";
    $result_sub=mysql_query($sql,$Con);
    echo "";
    //如果该菜单项目有子菜单,则添加JavaScript onClick语句
    if(mysql_num_rows($result_sub)>0)
    {
    echo "";
    echo "";
    echo "";
    //如果该菜单项目有子菜单,则显示子菜单
    if(mysql_num_rows($result_sub)>0)
    {
    //指定该子菜单的ID和style,以便和onClick语句相对应
    echo "";
    echo "";
    echo "";
    }
    //子菜单处理完成,返回到递归的上一层,将级数减1
    $layer--;
    }
    echo "
    ";
    }
    ?>


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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:IIS下配置Php+Mysql+zend的图文教程 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • PHP代码:Http断点续传的实现例子• PHP5中Cookie与 Session使用详解• php实现文件下载更能介绍• php写的简易聊天室代码• 整理:Apache+MySql+PHP的快速安装
    1/1

    PHP中文网