1

我有以下代码，它使用 PHP（Codeigniter）在 ul li 标签中生成动态树结构。

以下是我从前序遍历表中获取数据的 PHP 代码：

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);

它会根据表中的记录生成如下的树形结构：

<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>

现在我想使用 Jquery 树插件对其进行动画处理。意味着我可以像资源管理器或任何分层树模块一样隐藏和扩展它的父子节点。但是由于这种动态生成，我面临着问题，并且没有得到如何使用 jquery 配置它。我需要帮助。提前致谢。

4

3 回答 3

1

把 id="tree" 放在你的 UL 上

假设您使用的是http://jquery.bassistance.de/treeview/demo/

然后把一些js沿线 

<script type="text/javascript">
    $(function() {
        $("#tree").treeview({
            collapsed: true,
            animated: "fast",
            prerendered: true,
            persist: "location"
        });
    })

</script>

它应该可以正常工作，请务必阅读链接的 jquery 插件站点中的文档和示例。

于 2012-08-07T04:47:05.503 回答
0

我不知道这是否会对您有所帮助，但我已经为您制作了一个带有展开/折叠类别的 jsfiddle。你可以自己做而不使用任何插件，但我不知道这是否是你想要的

CSS

div.tree ul li {
    display:block;
}

div.tree ul li ul {
    display:none;
}

HTML

<div class="tree">
<ul> 
    <li>Language <a href="#">expand</a>
        <ul> 
            <li>PHP</li> 
            <li>Java                
                 <ul> 
                    <li>Hybernet</li> 
                 </ul>
            </li>
            <li>Web
                <ul> 
                    <li>HTML
                        <ul> 
                            <li>HTML Canvas</li> 
                        </ul> 
                    </li> 
                </ul> 
            </li> 
            <li>Ruby</li> 
        </ul> 
    </li>
    <li>Other menu <a href="#">expand</a>

        <ul> 
            <li>Other submenu</li>
</ul>
    </li>
</ul>
</div>

JS

$(function(){
    $('.tree ul li a').click(function(){

        var a = $(this).next('ul');
        if(a.css('display') == 'block') {
               a.css('display','none');    
               $(this).html('expand');
        } else {
               a.css('display','block');    
               $(this).html('collapse');   
        }    
    });
});

你的 jsfiddle

于 2012-08-07T04:52:07.753 回答
0

使用 TreeMenu.js 并遵循他们的文档。它易于配置：

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

于 2012-08-07T10:04:54.270 回答