使用JStree的“initial_open”选项出现问题

Question

我正在使用JStree处理我的第一个应用程序，并且我做了几乎所有我需要的导航树。我有javascript代码工作，使用knockoutjs动态构建页面的html列表结构（这里有点过分，但我在页面的其他地方使用knockout）。将JStree附加到HTML后，我的DOM看起来像 -

<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>

我调用JStree的Javascript是

  $(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"]
                }
            });


        })

结果菜单看起来像

我的问题是我希望菜单最初关闭所有节点，然后只打开代表当前页面的节点＆＃34;选择＆＃34;并且它的父节点已打开。当我尝试设置JStree＆＃34; initial_open＆＃34;到＆＃34; menu_5＆＃34;或者＆＃34; menu_6＆＃34;，然后菜单最初显示已关闭。

从长远来看，这将是一个非常复杂的＆amp;多层次结构。因此用户正在寻找这种类型的功能。建议？

Answer 1

使用initially_select（而非initially_open）选项（ui部分）：为叶节点设置唯一的id（如'init_sel'），然后在此设置此选项jstree构造函数的ui部分：

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

不要忘记在插件列表中添加“ui”。

如果使用json_structure作为数据，请在生成JSON结构时将父节点上的“state”对象设置为“open”。