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

在您的UL上输入id =“tree”

假设您正在使用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');   
        }    
    });
});

Your jsfiddle

Answer 3

使用TreeMenu.js并按照他们的文档操作。它易于配置：

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

使用Jquery Tree Plugin配置ul li标签

3 个答案: