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

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プラグインサイトからドキュメントと例を必ず読んでください。

于 2012-08-07T04:47:05.503 に答える
0

TreeMenu.js を使用し、そのドキュメントに従ってください。設定が簡単です：

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

于 2012-08-07T10:04:54.270 に答える
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 に答える