Jump to content

Expendable list ... i am lost -> Expert needed


drisate

Recommended Posts

Hey guys i am trying to create a page menu with a + and - icon to show or hide the childs

 

This is a screeny of what it should look like:

 

screeny.png

 

As you can see in this images each section must be expandable ... to do that i need to open a div when the child list starts and close it when it ends. Thats not to complicated to do. But the problem is there can be a unlimited number of categorys in categorys ...  so ia m having a hard time closing the div's at the good place ...

 

The hole tree is inside and array that looks like this:

Array
(
    [42] => Array
        (
            [titre1] => Gestions des pages
            [parent] => 11
            [idd] => 42
         )

    [11] => Array
        (
            [titre1] => Zone de gestion
            [parent] => 0
            [idd] => 11
        )

    [14] => Array
        (
            [titre1] => HÉBERGEMENT
            [parent] => 0
            [idd] => 14
        )

    [34] => Array
        (
            [titre1] => François Blaquière
            [parent] => 17
            [idd] => 34
         )

    [35] => Array
        (
            [titre1] => Joëlle Bergeron
            [parent] => 17
            [idd] => 35
         )

    [36] => Array
        (
            [titre1] => Patrick Simard
            [parent] => 17
            [idd] => 36
         )

    [37] => Array
        (
            [titre1] => Florian Siretas
            [parent] => 17
            [idd] => 37
         )

    [38] => Array
        (
            [titre1] => Valeria Valdes
            [parent] => 17
            [idd] => 38
        )

    [39] => Array
        (
            [titre1] => Marie-Ève Matte
            [parent] => 17
            [idd] => 39
        )

    [15] => Array
        (
            [titre1] => Sauvegarde
            [parent] => 0
            [idd] => 15
         )

    [16] => Array
        (
            [titre1] => Entreprise
            [parent] => 0
            [idd] => 16
         )

    [17] => Array
        (
            [titre1] => Équipe
            [parent] => 0
            [idd] => 17
        )

    [18] => Array
        (
            [titre1] => Services
            [parent] => 0
            [idd] => 18
        )

    [19] => Array
        (
            [titre1] => Centre de données
            [parent] => 0
            [idd] => 19
        )

    [20] => Array
        (
            [titre1] => Aide aux utilisateurs
            [parent] => 0
            [idd] => 20
        )

    [21] => Array
        (
            [titre1] => La configuration de votre courriel.
            [parent] => 20
            [idd] => 21
        )

    [23] => Array
        (
            [titre1] => Configuration de Outlook Express
            [parent] => 23
            [idd] => 23
        )

    [24] => Array
        (
            [titre1] => Configuration de Outlook 2003
            [parent] => 21
            [idd] => 24
        )

    [25] => Array
        (
            [titre1] => Configuration de Outlook 2007
            [parent] => 21
            [idd] => 25
         )

    [40] => Array
        (
            [titre1] => Site Internet
            [parent] => 26
            [idd] => 40
        )

    [26] => Array
        (
            [titre1] => Accueil
            [parent] => 0
            [idd] => 26
        )

    [43] => Array
        (
            [titre1] => Infolettre
            [parent] => 11
            [idd] => 43
        )

    [45] => Array
        (
            [titre1] => Site Internet
            [parent] => 26
            [idd] => 45
        )

    [46] => Array
        (
            [titre1] => Site Internet
            [parent] => 26
            [idd] => 46
          )

    [47] => Array
        (
            [titre1] => Site Internet
            [parent] => 26
            [idd] => 47
        )

    [48] => Array
        (
            [titre1] => Site Internet
            [parent] => 26
            [idd] => 48
        )

    [50] => Array
        (
            [titre1] => Téléchargement
            [parent] => 0
            [idd] => 50
        )

    [51] => Array
        (
            [titre1] => Skype
            [parent] => 50
            [idd] => 51
        )

    [52] => Array
        (
            [titre1] => TeamViewer
            [parent] => 50
            [idd] => 52
        )

 

I tryed doing this ... but it's not working. The div's are not closed so when you click on a + icone the hole page colapses

 

<?php
//recursive function that prints categories as a nested html unorderd list
function generate_menu($parent, $count=0, $level=0, $parent_list){

    if (!isset ($parent_list)){$parent_list = array();} 
    if ($count==""){$count=0;}

global $menu_array;

echo '<div style="width:750px" align="center">';
if ($menu_array){
foreach($menu_array as $key => $value)
{
   
       $parent_list[parent][] = $value['parent'];
       
	if ($value['parent'] == $parent) 
	{
	  
        $check = @current(@mysql_fetch_assoc(@mysql_query("SELECT count(id) FROM page_categ WHERE parent = '$value[idd]'")));
            
            if ($parent=="0"){
                
                $color = "#656D80";
            }else{
                $color = "#e8e8e8";
                $level = check_level($value['idd'], '0');
                
                unset($level_i);
                $i = 0;
                while ($i <= $level) {
                    $level_i .= '<img border="0" src="images/icon4.png">';
                    $i++;  
                }
                
                $level_i .= '<img border="0" src="images/icon1.png">';
                
            }
            
            if ($check and $value['parent']!="0"){
                $color="#CDCDCD";
            }
            
            if (!$value['titre1']){$value['titre1']="Aucun titre";}
            
            //echo $totals[$value[idd]];
            
print ('<table style="BORDER-COLLAPSE: collapse" id="table2" border="0" cellspacing="3" bordercolor="#111111" cellpadding="3" width="100%">
			<tr class="eg-bar">
				<td style="font-family: verdana; font-weight: normal; font-size: 11px; border-top: 1px solid; border-bottom: medium none" bgcolor="'.$color.'" width="70%" colspan="2">'.$level_i.'<font color="#FFFFFF">');
                    
                    if ($check and $value['parent']=="0"){
                        echo '<span id="'.alpharizer($value[idd]).'-title" class="iconspan"><img src="images/iconplusblanc.png" width="11" height="11" /></span>';
                    }else{
                        echo '<img border="0" src="images/icon4.png">';
                    }
                    
                    print ('</font>
				<input style="height:16px; font-size:10px;" type="text" name="ordre[]" value="1" size="1"><input type="hidden" name="id[]" value="102"><input type="hidden" name="is[]" value="categ">
				<a href="page.php?mod=addmod&id=' . $value['idd'] . '&parent='.$value['parent'].'">
				<font color="#FFFFFF">'.$value['titre1'].'</font></a></td>
				<td style="color: #000000; font-family: verdana; font-weight: normal; font-size: 11px; border-top: 1px solid; border-bottom: medium none" bgcolor="'.$color.'" width="30%" align="right">');

// Si c'est une catégorie principale
if ($value['parent']=="0"){
$_add = 'add';
$_del = 'del';

// Si c'est une catégori secondaire
}else{

$_add = 'adds';
$_del = 'dels';
   
}

        if ($_SESSION[status] <= $value[$_add]) {
            echo '<a style="height:30px;" href="page.php?mod=addmod&id=' . $value['idd'] . '&ajout=1&parent='.$value['parent'].'"><img alt="Ajouter" src="images/monplus.png" border="0" width="16" height="16"></a> ';
        }
        
        // -> Supression
        if ($_SESSION[status] <= $value[$_del]) {
            echo '<a title="Suprimer" href="javascript: confirm_link(\'Vous êtes sur le point de supprimer cette élément de la liste. Ce faisan, vous supprimerait également tout les pages associé à celle-ci! Voulez-vous vraiment continuer?\', \'page.php?mod=del&id=' . $value['idd'] . '\');"><img alt="Suprimer" src="images/delete_16.png" border="0" width="16" height="16"></a> ';
        }
   
print ('</td>
			</tr>
		</table>');
            
            $id_f = alpharizer($value[idd]); 
            $id_p = alpharizer($value[parent]);
			           
            if ($check and !$close){
            $parent_list[parent][$id_f][]=1; 
			echo '<div id="'.$id_f.'" class="icongroup'.$id_f.'">';
		}
            //echo "<br>".getPar($parent_list, &$parArr, $id_p)." > $check<br>";   

            
	if (getPar($parent_list, &$parArr, $id_p) == $check){
	  echo '</div>'; //echo "<br>CLOSED!<br>"; 
          unset($has_childs);
        }  
                    
generate_menu($key, $count++, $level, $parent_list);
/*echo '</div><pre>';
print_r($parent_list);
echo "</pre>";*/
	}
}

echo '</div>';

    }else{
        echo "<br><br>Aucune page ajouter a ce jour";
    }

}
?>

 

The if (getPar($parent_list, &$parArr, $id_p) == $check) part is supose to check how much rows has been printed VS how much row total there should be and if the total is meeted then it prints out the </div>... But it's not working and now i am completly lost lol I guess the hole code above needs to be rethinked.

 

In any case thats not gona work eather because this can also happen:

 

id 1, parent 0

    id 2, parent 1

        id 3, parent 2

    id 4, parent 1

 

How can i make it do this:

id 1, parent 0 <div id=1>

    id 2, parent 1 <div id=2>

        id 3, parent 2

        id 4, parent 2

    id 5, parent 1<div id=5>

        id 6, parent 5

        </div> // id 5

    </div> // id 2

</div> // id 1

 

Any sugestions?

 

Link to comment
Share on other sites

if i bring back the code to the basic the shell whould look like

 

<?php
//recursive function that prints categories
function generate_menu($parent){
global $menu_array;
    
if ($menu_array){
foreach($menu_array as $key => $value){
  
      if ($value['parent'] == $parent) {
        
        
      
      generate_menu($key);
      } 
    }
}

}
?>

 

Now how can i open and close a div at the good time.

 

id 1, parent 0 <div id=1>

    id 2, parent 1 <div id=2>

        id 3, parent 2

        id 4, parent 2

    </div> // id 2

    id 5, parent 1<div id=5>

        id 6, parent 5

    </div> // id 5

</div> // id 1

 

The div must start before the childs and end after the last child of that level.

Link to comment
Share on other sites

The problem is not making it slide ... the problem is generating the tree. I am gona have exacly teh same problem using the script you just gave but istead of <div> it would be <ul>.

 

Any help on generating this from the array above would be great

id 1, parent 0 <div id=1>

    id 2, parent 1 <div id=2>

        id 3, parent 2

        id 4, parent 2

    </div> // id 2

    id 5, parent 1<div id=5>

        id 6, parent 5

    </div> // id 5

</div> // id 1

Link to comment
Share on other sites

You need to re-think your logic.  The way you are building your array is going to make it next to impossible to accomplish your task.

 

I would make two arrays.

 


while($row = mysql_fetch_assoc($result)) {
  if($row['parent'] == 0) { $parent_array[$row['idd']] = $row['titre1']; } //Parent array = array( id => name);
else { $child_array[$row['parent']][$row['idd']] = $row['titre1']; } //Child array = array(parent_id => array(id => name, id => name));
}

foreach($parent_array as $p_id => $p_name) {
  echo $p_name . '<div>';
   foreach($child_array as $p_link => $L2) {
     if($p_link == $p_id) {
       foreach($L2 as $c_id => $c_name) {
         echo $c_id . ' ' . $c_name . '<br />' . "\n";
       }
     }
   }
echo '</div>';
}

 

*code un-tested*

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.