Displaying data in tree structure php sql

Question

My website(php) has some categories and corresponding sub categories.

I want to display them in tree structure.

First of all the categories should be displayed with a plus sign , when someone clicks the plus sign , below categories should slide down and corresponding sub categories should display.

This is very common thin i found on many web sites but unable to find how to do it.

pls suggest how to implement this structure.

Thanks.

Answer 1

• First create tree structure in your SQL database (M)
  • http://www.sqlteam.com/article/more-trees-hierarchies-in-sql
  • Basically you create this three columns
    • [id]
    • [parent_id]
    • [title]
• Second fetch this structure and parse it with PHP (C)
  • Best to use here some ORM such as Dibi, Doctrine or so...
  • Convert it to JSON and pass to (V)
• Parse structure with some JQuery plugin displaying tree structure
  • http://www.jquery4u.com/tutorials/online-json-tree-viewer/
  • http://wiki.jqueryui.com/w/page/12138128/Tree

where (M) (V) (C) points to MVC application structure, see:
http://oreilly.com/php/archive/mvc-intro.html

Answer 2

You can do it using a Nested set model or an Adjecency list . Read up on those, there's a lot of example code available. For more information, read http://en.wikipedia.org/wiki/Tree_(data_structure ) .

Answer 3

Use jQuery, my demo js (this is a plugin wrote in 3 minutes):

    (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>