Question

我使用php / javascript创建了一个树视图。在页面加载时，我无法弄清楚如何使其预先折叠。

这是代码，带有想法。

<?php 

$query=mysql_query("SELECT tree_entry_lang.entry_id, tree_entry_lang.lang, tree_entry_lang.name, tree_entry.parent_entry_id FROM tree_entry,tree_entry_lang WHERE tree_entry.entry_id=tree_entry_lang.entry_id AND lang='eng'");
$numrows=mysql_num_rows($query);

if($numrows>0){
    echo "<ul >";
    while($row=mysql_fetch_assoc($query)){
        echo "<li><img src='..\images\expand.gif' class='collapsableTree' > ".$row['name'];
        getChildren($row['entry_id']);


    }
    echo "</ul>";


}
else echo "Empty base";

function getChildren($parent_id){

    $query=mysql_query("SELECT tree_entry_lang.entry_id, tree_entry_lang.lang, tree_entry_lang.name, tree_entry.parent_entry_id FROM tree_entry,tree_entry_lang WHERE tree_entry.entry_id=tree_entry_lang.entry_id AND parent_entry_id=".$parent_id);
$numrows=mysql_num_rows($query);

if($numrows>0){
    echo "<ul >";
    while($row=mysql_fetch_assoc($query)){
        echo "<li><img src='..\images\expand.gif' class='collapsableTree' > ".$row['name'];
        getChildren($row['entry_id']);


    }

            echo "</ul>";
            echo "</li>";

        }



}

这是jQuery部分：

$('.collapsableTree').click(function () {

    $(this).parent().children().toggle();
    $(this).toggle();

});

正如我所说，当页面加载时，我需要关闭所有节点。我认为应该使用一些JavaScript函数，但我担心我不能创建一个。任何解决方案？

Answer 1

这不是vanilla HTML / jQuery支持的东西，你需要编写一个插件来处理它。这不是一项微不足道的任务。我建议您查看jstree，它功能齐全且well documented。

修改

如果您要做的只是隐藏孩子，为什么不在CSS中将它们初始化为display:none。然后在点击时显示它们。否则，根据上面的示例，请确保在尝试通过将语句包装在$(function(){...})中来绑定事件处理程序之前等待DOM准备就绪：

$(function(){ $('.collapsableTree').click(function () { $(this).parent().children().toggle(); $(this).toggle(); }); });

Answer 2

使用CSS非常简单。在元素中添加一些类。

<ul class="tree">
   <li class="node">
       <ul class="branch">

然后在css：

.tree.branch{display:none}

如何使用php / javascript制作预折叠的TreeView

2 个答案: