EllisLab text mark
Advanced Search
     
html helper for nested css based treeview
Posted: 30 November 2007 08:55 AM   [ Ignore ]
Avatar
Joined: 2007-06-10
2919 posts

Tree structure

/** 
 * List item array, builds tree view for css based nav
 * array[0] = new branch of this css class
 * others   = list items <label>|<url>|<css class>
 */

$list_items = array 
(
    
=> 'tree',
    
=> 'Item 1|#|open',
    
=> array
    (
        
=> '',
        
=> 'Item 1.1|#',
        
=> 'Item 1.2|#|closed',
        
=> array
        (
            
=> '',
            
=> 'Item 1.2.1|#',
            
=> 'Item 1.2.2|#',
            
=> 'Item 1.2.3|#'
        
),
        
=> 'Item 1.3|#',
    ),
    
=> 'Item 2|#|open',
    
=> array
    (
        
=> '',
        
=> 'Item 2.1.1|#',
        
=> 'Item 2.1.2|#',
        
=> 'Item 2.1.3|#'
    
),
); 

html helper function

function build_list($arr)
{
    
foreach ($arr as $key => $value)
    
{
        
if (is_array($value)) //recurse child
        
{
            $out 
.= $this->build_list($value);
            
$out .= '</li>'."\n";
        

        
else 
        
{
            
if ($key == 0//begin new branch
            

                $out 
'<ul';
                
$out .= ($value) ? ' class="'.$value.'"' ''//branch css class
                
$out .= '>'."\n";
            

            
else //build list items
            
{
                $attr 
explode('|'$value);
                
$css = (isset($attr[2])) ? ' class="'.$attr[2].'"' '' //item css class
                
                
$out .= '<li'.$css.'>';
                
$out .= (isset($attr[1])) ? anchor($attr[1],$attr[0]) : $attr[0];
                
$out .= (!isset($attr[2])) ? '</li>' '';
                
$out .= "\n";
            
}
        }
    }
    
    
return $out.'</ul>'."\n";
echo build_list($list_items); 

Output

<ul class="tree">
<
li class="open"><a href="#">Item 1</a>
<
ul>
<
li><a href="#">Item 1.1</a></li>
<
li class="closed"><a href="#">Item 1.2</a>
<
ul>
<
li><a href="#">Item 1.2.1</a></li>
<
li><a href="#">Item 1.2.2</a></li>
<
li><a href="#">Item 1.2.3</a></li>
</
ul>
</
li>
<
li><a href="#">Item 1.3</a></li>
</
ul>
</
li>
<
li class="open"><a href="#">Item 2</a>
<
ul>
<
li><a href="#">Item 2.1.1</a></li>
<
li><a href="#">Item 2.1.2</a></li>
<
li><a href="#">Item 2.1.3</a></li>
</
ul>
</
li>
</
ul


Based on SilverStripe tree control http://www.silverstripe.com/tree-control/, css and javascript is available for download.

 Signature 

URI Language Identifier | Modular Extensions - HMVC | View Object | Widget plugin | Access Control library