使用Jquery Tree插件配置ul li标签

Question

我有以下代码，这些代码使用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进行配置。 我需要帮助。 提前致谢。

Answer 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插件站点阅读文档和示例。

Answer 2

我不知道这是否对您有帮助，但是我为您提供了一个带有展开/折叠类别的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

Answer 3

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

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