使用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"]
                }
            });


        })

结果菜单看起来像

我的问题是我希望菜单最初关闭所有节点,然后只打开代表当前页面"选定"的节点,并打开它的父节点.当我尝试将JStree"initial_open"设置为"menu_5"或"menu_6"时,菜单最初显示为关闭.

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

Answer 1

使用initially_select(而不是initially_open)选项(ui部分):id为叶节点设置唯一(如'init_sel'),然后在jstree构造函数的ui部分设置此选项:

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

不要忘记在插件列表中添加"ui".

如果使用json_structureas数据,请在生成JSON结构时将父节点上的"state"对象设置为"open".