使用Jquery Tree Plugin配置ul li标签

Question

I have the following code which is generating the dynamic tree structure in ul li tag using PHP (Codeigniter).

Following is the PHP code where I am fetching data from preorder traversal table:

function renderTree($tree, $currDepth = -1) {
  $currNode = array_shift($tree);
  $result = '';
  // Going down?
  if ($currNode['depth'] > $currDepth) {
    // Yes, prepend <ul>
    $result .= '<ul>';
  }
  // Going up?
  if ($currNode['depth'] < $currDepth) {
    // Yes, close n open <ul>
    $result .= str_repeat('</ul>', $currDepth - $currNode['depth']);
  }
  // Always add the node
  $result .= '<li>' . $currNode['name'] . '</li>';
  // Anything left?
  if (!empty($tree)) {
    // Yes, recurse
    $result .=  renderTree($tree, $currNode['depth']);
  }
  else {
    // No, close remaining <ul>
    $result .= str_repeat('</ul>', $currNode['depth'] + 1);
  }
  return $result;
}

print renderTree($tree);

And it will generate the following tree structure according to the records in table:

<ul>
    <li>Language</li>
    <li>
        <ul>
            <li>PHP</li>
            <li>Java</li>
            <li>
                <ul>
                    <li>Hybernet</li>
                </ul>
            </li>
            <li>Web</li>
            <li>
                <ul>
                    <li>HTML</li>
                    <li>
                        <ul>
                            <li>HTML Canvas</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Ruby</li>
        </ul>
    </li>
</ul>

Now I want to use Jquery tree plugin for animating it. Means I can hide and expand the parent-child of it same like explorer or any hierarchical tree module. But because of this generating dynamically I am facing problem on it and not getting how can I configure it with jquery. I need help on it. Thanks in advance.

Answer 1

Used the TreeMenu.js and follow their documentation. Its easy for configuration:

http://mackpexton.com/projects/TreeMenu/index.htm