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.

This is such a ridiculously broad, "please write my code for me" kind of question. How do you think it should be done? Where would you start? — DaveRandom
– DaveRandom, Commented Oct 25, 2011 at 13:55

Marek Sebera · Accepted Answer · 2011-10-25 13:59:15Z

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

answered Oct 25, 2011 at 13:59

Marek Sebera

40.8k37 gold badges166 silver badges252 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rijk · Accepted Answer · 2011-10-25 14:00:30Z

1

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) .

answered Oct 25, 2011 at 14:00

Rijk

11.3k3 gold badges33 silver badges46 bronze badges

Comments

ka_lin · Accepted Answer · 2011-10-25 14:43:22Z

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>

Collectives™ on Stack Overflow

Displaying data in tree structure php sql

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related