2011-06-30 7 views
4

私はJStreeを使って最初のアプリケーションを開発しています。ナビゲーションツリーとして必要なものはほとんどすべて処理しています。私は動的にknockoutjsを使用してページのHTMLリスト構造を構築するjavascriptのコードを持っています(ここでは多少の過剰なものですが、ページのどこかでknockoutを使用しています)。私はHTMLにJStreeを添付した後、私のDOMが好きに見える - JStreeを呼び出すJStreeの "initially_open"オプションの問題

<div id="menuTreeList" data-bind="template: "treeMenuTemplate"" class="navtree 
      jstree jstree-0 jstree-focused jstree-default">  
<ul class="jstree-no-dots jstree-no-icons"> 
    <li id="menu_1" class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><span> 
     <a href="#" class=""><ins class="jstree-icon">&nbsp;</ins>CARES Home</a></span> 
    </li> 
    <li id="menu_2" class="jstree-closed"><ins class="jstree-icon">&nbsp;</ins><a href="#"> 
     <ins class="jstree-icon">&nbsp;</ins>Case Management</a> 
     <ul> 
      <li id="menu_3" class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><span class="navtree-spanDefault"> 
       <a href="#"><ins class="jstree-icon">&nbsp;</ins>Search</a></span> </li> 
      <li id="menu_4" class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><span class="navtree-spanDefault"> 
       <a href="#"><ins class="jstree-icon">&nbsp;</ins>Participant Summary</a></span> 
      </li> 
      <li id="menu_5" class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><span class="navtree-spanDefault"> 
       <a href="#"><ins class="jstree-icon">&nbsp;</ins>Transfer WP Office</a></span> 
      </li> 
      <li id="menu_6" class="jstree-last jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><span 
       class="navtree-selected">Update Individual Address</span> </li> 
     </ul> 
    </li> 
    <li id="menu_7" class="jstree-last jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><a 
     href="#"><ins class="jstree-icon">&nbsp;</ins>Tools</a></li> 
</ul> </div> 

マイJavascriptが私の問題は、私が欲しいということです

enter image description here のように表示されるメニューが見えます

$(document).ready(function() { 
     $("#menuTreeList").jstree({ 
       "themes": { 
        "theme": "default", 
        "dots": false, 
        "icons": false 
        }, 
       "plugins": ["themes", "html_data"], 
       "core": { 
        "animation": 0, 
        "open_parents": true, 
        "initially_open": ["menu_5"] 
       } 
      }); 


     }) 

ですメニューは最初にすべてのノードを閉じた後、現在のページが「選択済み」であり、親ノードが開いているノードのみを開きます。 JStree "initially_open"を "menu_5"または "menu_6"に設定しようとすると、最初にメニューが閉じて表示されます。

長期的に見ると、これは非常に複雑な&マルチレベル構造になります。したがって、ユーザーはこのタイプの機能を探しています。提案?

答えて

8

使用initially_selectオプション(代わりにinitially_openの)(UI部):(「init_sel」のような)、リーフ・ノードのためのユニークなidを設定し、jstreeコンストラクタのUI部でこのオプションを設定:

"ui" :{ "initially_select" : ["#init_sel"] } 

プラグインリストに「ui」を追加することを忘れないでください。

json_structureをデータとして使用する場合は、JSON構造を生成するときに親ノードの「状態」オブジェクトを「開く」に設定します。

関連する問題