I have a recursive treeview which pulls all its information from a database and would like some insight as to how I can make it collapsible.
I tried using Jquery and Javascript but neither attempt had any effect. Not sure if was maybe just error on my part or something else.
here is my basic code:
<body>
<?php
mysql_connect('localhost', 'root');
mysql_select_db('test');
$qry="SELECT * FROM treeview_items";
$result=mysql_query($qry);
$arrayCategories = array();
while($row = mysql_fetch_assoc($result)){
$arrayCategories[$row['id']] = array("parent_id" => $row['parent_id'], "name" =>
$row['title']);
}
//createTree($arrayCategories, 0);
function createTree($array, $currentParent, $currLevel = 0, $prevLevel = -1) {
foreach ($array as $categoryId => $category) {
if ($currentParent == $category['parent_id']) {
if ($currLevel > $prevLevel) echo " <ul> ";
if ($currLevel == $prevLevel) echo " </li> ";
echo '<li id="'.$categoryId.'" onclick=child(this.id);>
<span>'.$category['name'].'</span>';
if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
$currLevel++;
createTree ($array, $categoryId, $currLevel, $prevLevel);
$currLevel--;
}
}
if ($currLevel == $prevLevel) echo " </li> </ul> ";
}
?>
<div id="content" class="general-style1">
<?php
if(mysql_num_rows($result)!=0)
{
?>
<ul>
<li id="0" class="root"><span>Categories</span>
<?php createTree($arrayCategories, 0); ?>
</li>
</ul>
<?php
}
?>
</div>
</body>
</html>
Any help is appreciated!
I think it really worth to take a look at this css only approach for collapsible tree views: http://www.thecssninja.com/css/css-tree-menu With a few modifications it can be used for any kind of tree view that you might want to use.