Jump to content

Function to render hierchical data in select element


son
 Share

Recommended Posts

I get data from db as

while (list($catID, $catName, $catParent) = mysqli_fetch_array($rs, MYSQLI_BOTH))  {	 $categoryNames[(string)$catID] = $catName;	 $catParent = (string)$catParent;	 if(!array_key_exists($catParent, $childrenTree))		 $childrenTree[$catParent] = array();	 $childrenTree[$catParent][] = (string)$catID;  }

and want to display data as select drop down with each level a bit further indented. When I simply displayed as

function renderTree($parent = "0"){	global $categoryNames;	global $childrenTree;	if($parent != "0") echo "<li> ", $categoryNames[$parent], "\n";	$children = $childrenTree[$parent];	 if(count($children) > 0)  { //If node has children		echo "<ul>\n";		foreach($children as $child)	   renderTree($child);	   echo "</ul>\n";	 }	if($parent != "0") echo "</li>\n";  } renderTree();  //This renders the hierarchical tree

it worked well, but now to try with select cannot get it working. Currently have:

function renderTree2($parent = "0"){	global $categoryNames;	global $childrenTree;	if($parent != "0") echo "<option>", $parent . $categoryNames[$parent], "</option>\n";	$children = $childrenTree[$parent];	 if(count($children) > 0)  { //If node has children		echo "<option>\n";		foreach($children as $child)	   renderTree($child);	   echo "</option>\n";	 }  }echo "<select>";renderTree2();  //This renders the hierarchical tree  echo "</select>";

It outputs the wrong code:

<option><li> main page<ul><li> sub page<ul><li> Sub Sub</li></ul></li></ul></li></option></select>

Any ideas where I am going wrong? Son

Edited by son
Link to comment
Share on other sites

I cannot believe this... I simply did not see this. Taking it out works well and does exactly what I anticipated. Gosh, sometimes I think I really need a pair of glasses;-) Thanks for this. Just one more question: Is there a way to indent each level a bit further to right? How having them all starting at same level I realise that the drawback is that it is not very easy to distinguish levels now... Son

Link to comment
Share on other sites

Add a second parameter to the function to indicate the number of levels to indent, and each time you call the function recursively make sure the indent parameter is 1 more than the current value. You can add a for loop when you write the text to add the indenting based on the indent level.

  • Like 1
Link to comment
Share on other sites

I have done it like this now:

function renderTree($parent = 0, $subCounter = 0){    global $categoryNames;    global $childrenTree;	 if($parent != 0)  {  echo "<option value='" . $parent .  "' style='padding-left:" . $subCounter . "px;'>", $categoryNames[$parent], "</option>\n";  $subCounter = $subCounter + 5;  }    $children = $childrenTree[$parent];	 if(count($children) > 0)  { //If node has children	    foreach($children as $child)	    renderTree($child, $subCounter);	 }  }echo "<select>\n";renderTree();  //This renders the hierarchical tree  echo "</select>\n";

which does is slightly different to what you suggested. It works. Do you think this is ok like this or are there any disadvantages to my approach? I mean it contains the key elements you suggested, only that I added a parameter to indicate padding-left for each child's level... Son

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...