JSInfiniti级可伸缩菜单详解,js达成树形菜单代码

但是今天听完我细细道来,今天来点稍微难的,– 表的结构 ,&lt,/title&gt,类别目录树&lt

发了几天基础的事物,明日来点稍微难的,一般在CMS系统后台北都要用到的品种管理一些的卓越--Infiniti级分类菜单,对于菜鸟来说,那个或然有自然难度,但是明天听完小编细细道来,相信现在大家就都会弄那东东了。怎么落实呢?我们先做个数据库出来先:
— 
— 表的组织 `JSInfiniti级可伸缩菜单详解,js达成树形菜单代码。cr_columninfo`
— 

 代码如下

复制代码 代码如下:

<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″
/>
<title>种类目录树</title>
<script
type=”text/网页特效”>
JSInfiniti级可伸缩菜单详解,js达成树形菜单代码。function showmenu(menuid)
{
if(menuid.style.display==”none”){
menuid.style.display=””;
}
else{
menuid.style.display=”none”;
}
}
</script>
<style>
body{margin:0px;}
table tr td{font-size:12px}
</style>
</head>
<body>

CREATE TABLE `cr_columninfo` ( 
  `columnid`JSInfiniti级可伸缩菜单详解,js达成树形菜单代码。 int(4) NOT NULL auto_increment, 
  `columnfatherid` int(4) NOT NULL default ‘0’, 
  `columnname` varchar(100) NOT NULL default ”, 
JSInfiniti级可伸缩菜单详解,js达成树形菜单代码。  `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_JSInfiniti级可伸缩菜单详解,js达成树形菜单代码。columninfo`
— 
INSERT INTO `cr_columninfo`JSInfiniti级可伸缩菜单详解,js达成树形菜单代码。 (`columnid`, `JSInfiniti级可伸缩菜单详解,js达成树形菜单代码。columnfatherid`, `columnname`, `columnadder`, `columninputdate`) VALUES (1, 0, ‘影音歌手’, ‘leehui’, ‘二〇〇五-09-28’),
(2, 0, ‘高校风情’, ‘leehui1982’, ‘二〇〇五-09-28’),
(3, 1, ‘港台明星’, ‘leehui’, ‘二零零六-09-28’),
(4, 0, ‘风景图片’, ‘leehui一九八四’, ‘二零零六-09-29’),
(5, 4, ‘浩瀚大海’, ‘leehui1981’, ‘二零零五-09-29’),
(6, 5, ‘帕罗奥图的海’, ‘leehui一九八二’, ‘二〇〇六-09-29’),
JSInfiniti级可伸缩菜单详解,js达成树形菜单代码。(7, 2, ‘结业图片’, ‘leehui’, ‘贰零零陆-09-29’),
(9, 0, ‘体育艺人’, ‘leehui一九八一’, ‘二〇〇六-10-02’),
(10, 0, ‘精美壁纸’, ‘leehui一九八二’, ‘二〇〇五-10-02’),
(11, 0, ‘城市风光’, ‘leehui一九八二’, ‘二〇〇五-10-02’),
JSInfiniti级可伸缩菜单详解,js达成树形菜单代码。(12, 0, ‘卡通动漫’, ‘leehui1981’, ‘2005-10-02’),
(13, 0, ‘游戏截图’, ‘leehui一九八四’, ‘2007-10-02’),
JSInfiniti级可伸缩菜单详解,js达成树形菜单代码。(14, 0, ‘小编相册’, ‘leehui一九八三’, ‘二零零六-10-02’);

<?php
$globals[“id”] =1; //用来追踪下拉菜单的id号
$layer=1; //用来追踪当前菜谱的级数
//连接数据库
$con=mysql_connect(“localhost”,”root”,”123456″);
mysql_select_db(“demo”);

这么些是测量检验数据,基本原理正是依据树型结创设构数量字段,宗旨正是栏目都有自个儿的ID号和父栏目标ID号,依靠那五个涉及,创建树型结构,一级栏目父ID=0,这几个都好精晓,往后来说述下程序实行原理,本程序选用最为常见的递归算法来遍历子菜单,首先,先查询出富有顶尖菜单,展现在一个大表格里,没一行展现五个五星级菜单,再通过递归列出全部子菜单,子菜单处在上级菜单的所在行的下一行,且行的来得属性为不显得,通进程序动态变化的行ID号,结合JS调控行的浮现与潜伏,也等于相近于微软菜单的可伸缩效果,小说最终有张图有利于我们通晓,那是把转换页面包车型大巴HTML复制进DW来只管演示程序的终极结出。
JSInfiniti级可伸缩菜单详解,js达成树形菜单代码。来看代码部分,并未难懂的语法,请大家借助注释本身阅读,有意思味可扩张此代码。
PHP代码如下: 

//提取一流菜单
$sql=”select * from think_news where `f_id`=0″;
$result=mysql_query($sql,$con);
JSInfiniti级可伸缩菜单详解,js达成树形菜单代码。//要是超级菜单存在则初始菜单的显得
if(mysql_num_rows($result)>0) showtreemenu($con,$result,$id);
function showtreemenu($con,$result,$layer)
{
//获得要求出示的菜谱的项目数
$numrows=mysql_num_rows($result);
//开头显得菜单,种种子菜单都用一个报表来代表
  echo “<table cellpadding=’0′ cellspacing=’0′ border=’0′
width=’100%’>”;
 for($rows=0;$rows<$numrows;$rows++)
 {
   //将当前美食指南体系的剧情导入数组
    $menu=mysql_fetch_array($result);
   //提取菜单类别的子菜单记录集
   $sql=”select * from think_news where f_id=$menu[id]”;
   $result_sub=mysql_query($sql,$con);
   echo “<tr>”;
   //假如该菜单连串有子菜单,则增加javascript onclick语句
   if(mysql_num_rows($result_sub)>0)
   {
         echo “<td width=’20’ valign= ‘top’ ><span
onclick=’showmenu(menu”.$globals[‘id’].”)’ ><img
src=’menu_minus.gif’ border=’0′ 
align=’absmiddle’></span></td>”;
         echo “<td class=’menu’ >”;
   }
   else
   {
         echo “<td width=’20’><img src=’menu_plus.gif’
border=’0′ align=’absmiddle’ > </td>”;
         echo “<td class=’menu’>”;
   }
   //假使该菜单连串未有子菜单,只体现菜单名称
   echo $menu[“title”];
   echo “</td></tr>”;
   //假如该菜单体系有子菜单,则展现子菜单
   if(mysql_num_rows($result_sub)>0)
   {
       //钦点该子菜单的id和style,以便和onclick语句绝对应
       echo “<tr id=menu”.$globals[“id”]++.”
style=’display:none’>”;
       echo “<td width=’20’> </td>”;
       echo “<td>”;
       //将级数加1
       $layer++;
       //递归调用showtreemenu()函数,生成子菜单
       showtreemenu($con,$result_sub,$layer);
       //子菜单管理完了,再次来到到递归的上一层
       echo “</td></tr>”;
   }
   //子菜单管理完了,重临到递归的上一层,将级数减1
   $layer–;
  }
  echo “</table>”;
}

复制代码 代码如下:

<html> 
<head> 
<meta http-equiv=”Content-Type” c /> 
<title>种类目录树</title> 
<script type=”text/javascript”> 
function ShowMenu(MenuID) 
{  
 if(MenuID.style.display==”none”){  
    MenuID.style.display=””;  
 }  
 else{  
 MenuID.style.display=”none”;  
 }  
}  
</script> 
<link href=”style.css” rel=”stylesheet” type=”text/css”> 
</head> 
<body topmargin=”0″ bgcolor=”#EFEFE7″> 
<table width=”100%” height=”25″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#739E18″> 
  <tr> 
    <td align=”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(“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 “<table cellpadding=’0′ cellspacing=’0′ border=’0′ width=’100%’>”;  
      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 “<tr>”;  
        //如若该菜单体系有子菜单,则增加JavaScript onClick语句  
        if(mysql_num_rows($result_sub)>0)  
        {  
          echo “<td width=’20’><img src=’./images/plus.png’ border=’0′ > </td>”;  
          echo “<td class=’Menu’ >”;  
        }  
        else{  
          echo “<td width=’20’><img src=’./images/page.png’ border=’0′> </td>”;  
          echo “<td class=’Menu’>”;  
        }  
     //借使该菜单类别尚未子菜单,只彰显菜单名称  
     echo $menu[columnname]; 
     echo “</td></tr>”;  
     //假设该菜单种类有子菜单,则呈现子菜单  
     if(mysql_num_rows($result_sub)>0)  
     {  
      //钦定该子菜单的ID和style,以便和onClick语句相对应  
      echo “<tr id=Menu”.$GLOBALS[“ID”]++.” style=’display:none’>”;  
      echo “<td width=’20’> </td>”;  
      echo “<td>”;  
     //将级数加1  
     $layer++;  
     //递归调用ShowTreeMenu()函数,生成子菜单  
     ShowTreeMenu($Con,$result_sub,$layer);  
     //子菜单管理到位,再次回到到递归的上一层 
     echo “</td></tr>”;  
     }  
     //子菜单管理到位,重返到递归的上一层,将级数减1  
     $layer–;  
   }  
     echo “</table>”;  
  }  
?> 
</body> 
</html>

终极贴上作用图和源代码打包,希望本文对大家具备援救^_^
图片 1
下载此文件 

您或者感兴趣的文章:

  • 依照BootStrap
    Metronic开荒框架经验总计【二】列表分页管理和插件JSTree的行使
  • jsTree 基于JQuery的排序节点
    Bug
  • jquery下jstree轻便利用 –
    v1.0
  • jquery.jstree
    扩大节点的双击事件代码
  • 基于jsTree的Infiniti级树JSON数据的调换代码
  • JQery jstree
    大数据量难题消除办法
  • jsTree树控件(基于jQuery,
    超强悍)[推荐]
  • 至于Infiniti分级(ASP+数据库+JS)的落到实处代码
  • js达成Infiniti级树形导航列表效果代码
  • json+jQuery完结的Infiniti级树形菜单成效代码
  • javascript贯彻Infiniti级select联合浮动菜单
  • 依照jquery的Infiniti级联下拉框js插件
  • jsInfiniti级折叠菜单精简版
  • php
    Infiniti级数据JSON格式及JS剖析
  • jstree创设Infiniti分级树的方法【基于ajax动态创立子节点】