新浦京81707con > 注册购买 > php无限级分类,js实现树形菜单代码

原标题:php无限级分类,js实现树形菜单代码

浏览次数:165 时间:2019-10-03

 代码如下

 代码如下

    树型菜单在许多桌面应用系统中都有相当广阔的应用,其首要优点是协会清晰,利于使用者特别精晓的知道近日自身所在的职责。但在web上树型菜单的施用因为尚未好好的现存组件能够拿过来直接动用,所以日常的状态下,技术员首要是透过JavaScript来落到实处部分简易的树型结构菜单,但那个菜谱往往都是优先定好各菜单种类,以及各菜单体系里面包车型客车层系关系,不方便人民群众扩大,一旦需求另二个菜单结构时,往往还亟需再行编排,因而选择起来不是很有利。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>种类目录树</title>
<script type="text/网页特效">
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>

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" ";
<html xmlns=";
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<head>
<style type="text/css教程">
<!--
.menu { color:#000000; font-size: 12px; cursor: hand;}
</style>
<script type="text/网页特效">
function showmenu(menuid)
 {
 if(menuid.style.display=="none")
 {
 menuid.style.display="";
 }
 else
 {
 menuid.style.display="none";
 }
 }
</script>
<title>TV树状目录</title>
</head>
<body>
<?php
 $globals["id"] =1;
 $jibie=1;
 $sql="select * from tvmenu where bid=0";
 $result=mysql教程_query($sql,$conn);
 
 if(mysql_num_rows($result)>0)
 treemenu($conn,$result,$jibie,$id);
 
 function treemenu($conn,$result,$jibie)  //步入函数循环
 {
 $numrows=mysql_num_rows($result);
 echo "<table cellpadding='0' cellspacing='0' border='0'>";
 for($rows=0;$rows<$numrows;$rows )
 {
 $menu=mysql_fetch_array($result);
 $sql="select * from tvmenu where bid=$menu[id]";
 $result_sub=mysql_query($sql,$conn);
 echo "<tr>";
  //假诺该菜单体系有子菜单,则增添javascript onclick语句
  if(mysql_num_rows($result_sub)>0)
  {
  echo "<td width='20'><img src=' .gif' border='0'></td>";
  echo "<td class='menu' onclick='javascript:showmenu(menu".$globals["id"].");'>";
  }
  else
  {
  echo "<td width='20'><img src='-.gif' border='0'></td>";
  echo "<td class='menu'>";
  }
  if($menu[url]!="")
  echo "<a href='$menu[url]'>$menu[name]</a> ";
  else
  echo "<a href='#'>$menu[name]</a>   <a href='?b={$menu[id]}&tpye=add'> 添加</a>  <a href='?b={$menu[id]}&tpye=edit'> 编辑</a>  <a href='?b={$menu[id]}&action=del'> 删除</a>";
  echo "</td> </tr>";
  if(mysql_num_rows($result_sub)>0)
  {
  echo "<tr id=menu".$globals["id"] ." style='display:none'>";
  echo "<td width='20'> </td>";
  echo "<td>";
  //将级数加1
  $jibie ;
  treemenu($conn,$result_sub,$jibie);
  $jibie--;
  echo "</td></tr>";
  }
  //展现下一菜单
  }
  echo "</table>";
}
?>
<br />
<br />
<?php if ($tpye=="add") { ?>
<table width="551" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc">
<form action="" method="post" name="form1">
  <tr>
    <td height="28" colspan="2" align="center" bgcolor="#ffffff">加多栏目</td>
  </tr>
  <tr>
    <td width="246" height="28" align="right" bgcolor="#ffffff">栏目名称:</td>
    <td width="302" height="28" bgcolor="#ffffff"><input name="name" type="text" id="name" /></td>
  </tr>
  <tr>
    <td height="28" align="right" bgcolor="#ffffff">所属分类:</td>
    <td height="28" bgcolor="#ffffff"><select name="bid">
<?php
   
 $sql="select * from tvmenu";
 $que=mysql_query($sql,$conn);
    while($rs=mysql_fetch_array($que)){
  if ($rs['id']==$b) {
     $selected="selected="selected"";
     }else{
     $selected="";
     }
 ?>
 
      <option value="<?php echo $rs["id"]; ?>" <?php echo $selected;?>><?php echo $rs["name"]; ?></option>
  <?php }?>
    </select>
    </td>
  </tr>
  <tr>
    <td height="28" colspan="2" align="center" bgcolor="#ffffff"><input type="submit" name="submit" value="提 交" /></td>
  </tr>
  </form>
</table>
<?php }?>

    经过对函数递归的商量,作者发觉这种树型菜单能够透过递归函数,使树型菜单的来得完毕动态变化,并从未级数的范围。下边正是本身用php,MySQL,JavaScript写的二个动态树型菜单的管理代码,若是大家有意思味的话,就和自家一块儿来探视小编是如何贯彻的啊:)

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

 

率先,我们需求多个数据库,在那一个数据库中,我们树立以下一张表:

//提取顶尖菜单
$sql="select * from think_news where `f_id`=0";
$result=mysql_query($sql,$con);
//如果超级菜单存在则开首菜单的展现
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>";
}

 

CREATE TABLE menu (
id tinyint(4) NOT NULL auto_increment,
parent_id tinyint(4) DEFAULT '0' NOT NULL,
name varchar(20),
url varchar(60),
PRIMARY KEY (id)
);

 

那张表中
id 为索引
parent_id 用来保存上一流菜单的id号,假设是一级菜单则为0
name 为菜单的名号,也正是要在页面上出示的菜系内容
url 如若某菜单为末级菜单,则需求钦点该连接的url地址,这么些字段正是用来保存此地址的,别的非末级菜单,该字段为空

 代码如下

好了,数据库有了,你就可以增多一些记录了,下边是本身做测量检验的时候,使用的片段笔录:

<?php if ($tpye=="edit") {

INSERT INTO menu VALUES ( '1', '0', '人事管理', '');
INSERT INTO menu VALUES ( '2', '0', '通信沟通', '');
INSERT INTO menu VALUES ( '3', '1', '档案管理', '');
INSERT INTO menu VALUES ( '4', '1', '考勤管理', '');
INSERT INTO menu VALUES ( '5', '2', '通讯录', '');
INSERT INTO menu VALUES ( '6', '2', '互连网会议', '');
INSERT INTO menu VALUES ( '7', '3', '新添档案', '');
INSERT INTO menu VALUES ( '8', '3', '查询档案', '');
INSERT INTO menu VALUES ( '9', '3', '删除档案', '');
INSERT INTO menu VALUES ( '10', '5', '新添通信记录','');
INSERT INTO menu VALUES ( '11', '5', '查询通信记录', ');
INSERT INTO menu VALUES ( '12', '5', '删除通信记录', ');
INSERT INTO menu VALUES ( '13', '6', '举行会议', '');
INSERT INTO menu VALUES ( '14', '6', '会议查询', '');

 $sql="select * from tvmenu where id='$b'";
 //echo $sql ;
 //exit;
 $quea=mysql_query($sql,$conn);
 $rsa=mysql_fetch_array($quea);

在累加记录的时候,应当要小心,非超级菜单的parent_id必定要钦赐为上级菜单的ID号,不然你的菜单是不博览会示出来的:)

 ?>
<table width="551" border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc">
<form action="" method="post" name="form1">
  <tr>
    <td height="28" colspan="2" align="center" bgcolor="#ffffff">编辑栏目</td>
葡京线上开户,  </tr>
  <tr>
    <td width="246" height="28" align="right" bgcolor="#ffffff">栏目名称:</td>
    <td width="302" height="28" bgcolor="#ffffff"><input name="name" type="text" id="name" value="<?php echo $rsa['name'];?>" /></td>
  </tr>
  <tr>
    <td height="28" align="right" bgcolor="#ffffff">所属分类:</td>
    <td height="28" bgcolor="#ffffff"><select name="bid">
 <?php
   $sql="select * from tvmenu where bid<>'$rsa['bid']'";
     $que=mysql_query($sql,$conn);
           while($rs=mysql_fetch_array($que)){
     if ($rs["id"]==$rsa['bid']) {
     $selected="selected="selected"";
     }else{
     $selected="";
     }
 ?>
 
      <option value="<?php echo $rs["id"]; ?>" <?php echo $selected;?>><?php echo $rs["name"]; ?></option>
  <?php }?>
    </select>
    </select>
    </td>
  </tr>
  <tr>
    <td height="28" colspan="2" align="center" bgcolor="#ffffff"><input type="submit" name="submit" value="提 交" /></td>
  </tr>
  </form>
</table>
<?php }?>

好了!有了数据库,上面正是经过php,JavaScript把菜单从数据库中读出来,并展示出来了:)

<br />
注:" "为存在子目录,可以扩充,"-"为巅峰分类.
</body>
</html>

1、JavaScript脚本:
function ShowMenu(MenuID)
{
if(MenuID.style.display=="none")
{
MenuID.style.display="";
}
else
{
MenuID.style.display="none";
}
}

本文由新浦京81707con发布于注册购买,转载请注明出处:php无限级分类,js实现树形菜单代码

关键词: 新浦京81707con

上一篇:jquery在线切图代码,php图片上传代码

下一篇:没有了