Question

我的网站（php）有一些类别和相应的子类别。

我想以树形结构显示它们。

首先，应该使用加号显示类别，当有人点击加号时，下方的类别应向下滑动并显示相应的子类别。

这是我在许多网站上发现的非常常见的瘦身，但无法找到如何做到这一点。

请建议如何实现这种结构。

感谢。

Answer 1

首先在SQL数据库中创建树结构（M）
- http://www.sqlteam.com/article/more-trees-hierarchies-in-sql
- 基本上你创建了这三列
  - [ID]
  - [PARENT_ID]
  - [标题]
第二次获取此结构并使用PHP（C）解析它
- 最好在这里使用一些ORM，如Dibi，Doctrine等......
- 将其转换为JSON并传递给（V）
使用一些显示树结构的JQuery插件解析结构
- http://www.jquery4u.com/tutorials/online-json-tree-viewer/
- http://wiki.jqueryui.com/w/page/12138128/Tree

其中（M）（V）（C）指向MVC应用程序结构，参见：
http://oreilly.com/php/archive/mvc-intro.html

Answer 2

您可以使用Nested set model或Adjecency list来完成此操作。阅读这些内容，有很多可用的示例代码。有关更多信息，请阅读http://en.wikipedia.org/wiki/Tree_(data_structure）。

Answer 3

使用jQuery，我的演示 js（这是一个插件在3分钟内写完）：

    (function($){  
 $.fn.subcath = function() {  
   return this.each(function() {  
   obj = $(this);     
   var subcath=$('.subcath', obj);
   alert(obj.html());
   obj.click(function (){
        subcath.toggle('slow');
    });
   });
    }})(jQuery);

HTML：

     <SCRIPT language="JavaScript" SRC="jquery.js"></SCRIPT> 
     <SCRIPT language="JavaScript" SRC="my_plugin.js"></SCRIPT> 
   <script>
         $().ready(function() {  
            $('.subcath').hide();
                $('.menu').subcath();
          });
    </script>  

    <ul class='menu'> 
     <div class="cathegory" >
            <li class="cath" >Cath1</li>
        <div class="sub_cathegory" >
            <ul class="subcath"> 
                 <li class="sub_el" >Cath1</li>
                 <li class="sub_el" >Cath2</li>
            </ul> 
        </div>
     </div>
         <div class="cathegory" >
            <li class="cath" >Cath1</li>
        <div class="sub_cathegory" >
            <ul class="subcath"> 
                      <li class="subcath_el" >Cath3</li>
                  <li class="subcath_el" >Cath4</li>
            </ul>
        </div>
     </div>
    </ul>

在树结构php sql中显示数据

3 个答案: