1

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関数を使用する必要があると思いますが、残念ながら作成できません。解決策はありますか？

4

2 に答える 2

0

これはバニラHTML/jQueryでサポートされているものではないため、プラグインを作成して処理する必要があります。それは簡単な作業ではありません。をご覧になることをお勧めします。jstreeこれは非常にフル機能で、十分に文書化されています。

編集

子を非表示にするだけの場合はdisplay:none、CSSで子を初期化してみませんか。次に、クリックしたときにそれらを表示します。それ以外の場合は、上記の例を前提として、ステートメントを次のようにラップしてイベントハンドラーをバインドする前に、DOMの準備ができるまで待機してください$(function(){...})。

$(function(){
    $('.collapsableTree').click(function () {
        $(this).parent().children().toggle();
        $(this).toggle();
    });
});
于 2013-03-11T22:02:35.847 に答える
0

CSSを使用して非常に簡単です。要素にいくつかのクラスを追加します。

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

次にcssで：

.tree.branch{display:none}
于 2013-03-11T22:08:45.047 に答える