PHP菜单级联

转载 2007年09月28日 17:19:00
<!---  
          简单的树形菜单   
    
          树形菜单较滑动菜单稍微复杂一点。其主要难点在于从简洁的数据描述来产生便于操纵的html结构。  
          本例用来展示树形菜单的编写。使用无线表格,算法上采用了递归,理论上可构造无穷分制枝的树。  
          本代码可自由扩散。  
  --->  
  <style>  
  table     {font-size     =     9pt}  
  td     {height     =     10px}  
  </style>  
  <body>  
  <span     id="menus"></span>  
  <span     id="view"></span>  
  </body>  
   
  <script>  
  /**  
  *     构造树,初值为0  
  */  
  function     tree(n)     {  
                  var     id     =     new     Array("bar","pad","#","+");  
                  if(n     ==     0)     {     //     初始化变量  
                                  n     =     1;  
                                  i     =     0;  
                                  s     =     "";  
                  }  
                  s     +=     "<table>";  
                  for(;i<tree_ar.length-1;i++)     {  
                                  var     k     =     (n     >=     tree_ar[i+1][0])?0:1;  
                                  s     +=     "<tr     id=''"+id[k]+"''     value="+i+"><td>"+id[k+2]+"</td><td>"+tree_ar[i][1]+"</td></tr>";     //     构造节点,注意这里的自定义属性value。作用是简化构造节点的描述,共享参数数组信息。  
                                  if(n     >     tree_ar[i+1][0])     {     //     若期望层次大于当前层次,结束本层次返回上一层次。  
                                                  s     +=     "</td></tr></table>";  
                                                  return     tree_ar[i+1][0];  
                                  }  
                                  if(n     <     tree_ar[i+1][0])     {     //     若期望层次小于当前层次,递归进入下一层次。  
                                                  s     +=     "<tr     style=''display:none''     v=1><td></td><td>";  
                                                  var     m     =     tree(tree_ar[++i][0]);  
                                                  s     +=     "</td></tr>";  
                                                  if(m     <     n)     {     //     当递归返回值小于当前层次期望值时,将产生连续的返回动作。  
                                                                  s     +=     "</table>";  
                                                                  return     m;  
                                                  }  
                                  }  
                  }  
                  s     +=     "</table>";  
                  return     s;  
  }  
  </script>  
   
  <script     for=pad     event=onclick>  
  //     分枝节点的点击响应  
  v     =     this.parentElement.rows[this.rowIndex+1].style;  
  if(v.display     ==     ''block'')     {  
                  v.display     =     ''none'';  
                  this.cells[0].innerHTML     =     "+";  
                  view.innerHTML     =     "";     //     自行修改为参数数组定义的闭合动作  
  }else     {  
                  v.display     =     ''block'';  
                  this.cells[0].innerHTML     =     "-";  
                  view.innerHTML     =     "<b>"+tree_ar[this.value][1]+"</b>";     //     自行修改为参数数组定义的展开动作  
  }  
   
  /**  
  *     以下代码用于关闭已展开的其他分枝  
  *     如需自行关闭展开的分枝则从这里直接返回或删去这段代码  
  */  
  if(!     tree_ar[this.value].type)     //     如该节点为首次进入,则记录所在层次信息  
                  genTreeInfo(this);  
  var     n     =     1*this.value+1;  
  for(i=n;i<tree_ar.length-1;i++)     {     //     关闭排列在当前节点之后的树  
                  if(tree_ar[i].type     ==     "pad")     {  
                                  tree_ar[i].obj2.style.display     =     ''none'';  
                                  tree_ar[i].obj1.cells[0].innerHTML     =     "+";  
                  }  
  }  
  while(tree_ar[--n][0]     >     1);     //     回溯到当前树的起点  
  while(--n     >=     0)     //     关闭排列在当前树的起点之前的树  
  if(tree_ar[n].type     ==     "pad")     {  
                  tree_ar[n].obj2.style.display     =     ''none'';  
                  tree_ar[n].obj1.cells[0].innerHTML     =     "+";  
  }  
   
  /**     记录层次信息,用以简化遍历树时的复杂的节点描述     **/  
  function     genTreeInfo(o)     {  
          var     el     =     o.parentElement;  
          for(var     i=0;i<el.rows.length;i++)     {  
                  if(el.rows[i].id     !=     "")     {  
                          tree_ar[el.rows[i].value].type     =     el.rows[i].id;  
                  }  
                  if(el.rows[i].id     ==     "pad")     {  
                          tree_ar[el.rows[i].value].obj1     =     el.rows[i];  
                          tree_ar[el.rows[i].value].obj2     =     el.rows[i+1];  
                  }  
          }  
  }  
  </script>  
   
  <script     for=bar     event=onclick>  
  //     无分枝节点的点击响应  
  view.innerHTML     =     "<b>"+tree_ar[this.value][1]+"</b>";     //     自行修改为参数数组定义的点击动作  
  </script>  
   
  <script>  
  /**  
  *     基本参数数组,根据具体应用自行扩展  
  *     数据可较简单的由服务器端提供  
  *     列1:节点层次  
  *     列2:节点标题  
  *     其余自行扩充  
  */  
  tree_ar     =     new     Array(  
          new     Array(1,"节点1"),  
          new     Array(1,"节点2"),  
          new     Array(2,"节点3"),  
          new     Array(2,"节点4"),  
          new     Array(3,"节点5"),  
          new     Array(4,"节点6"),  
          new     Array(5,"节点7"),  
          new     Array(6,"节点8"),  
          new     Array(7,"节点9"),  
          new     Array(2,"节点10"),  
          new     Array(1,"节点11"),  
          new     Array(2,"节点12"),  
          new     Array(2,"节点13"),  
          new     Array(1,"节点14"),  
          new     Array(1,"")     //     为简化终止判断附加的空数据项  
  );  
   
  /***     创建菜单     ***/  
  menus.innerHTML     =tree(0);  
  </script> 

.net jquery无刷新级联菜单

  • 2015年09月16日 16:34
  • 488KB
  • 下载

jQuery实现级联菜单<数据动态加载>

级联菜单数据动态加载

jquery-FillOptions级联菜单

  • 2016年11月17日 15:30
  • 29KB
  • 下载

无刷新级联菜单

  • 2012年02月08日 13:55
  • 29KB
  • 下载

微信小程序基于picker的级联菜单

品牌:{{brands[brandindex]}} 配件类别:{{object[index1]}} data: { br...

javascript实现级联菜单

下面是一个级联菜单的实现案例: 选择广东省之后,在第二个下拉菜单就会显示相应的城市名称: 当你选择了某个城市之后,如果在这个市里还其他的地区就会再次出现一个下拉菜单:     第三个下拉菜单就是对应的...
  • java_zb
  • java_zb
  • 2011年03月16日 14:53
  • 1321

超级全面省市县三级级联菜单

  • 2010年03月29日 17:20
  • 35KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:PHP菜单级联
举报原因:
原因补充:

(最多只允许输入30个字)