如何让 jstree 自动打开第一个树节点的路径（和触发功能）

Question

我正在使用jstree

我构建了一棵树，叶节点包含一个 href，然后在同一页面上的 iFrame 中打开。 这是由 function 完成的，只要在 jstree 中选择一个节点，它就会绑定到该节点，检查该节点是否具有真实的 href，然后相应地修改 iFrame，否则它会打开该节点。

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <div id='songchanges'>
               <ul>
                   <li id='phtml_1'>
                       <a href='#'>E:\Melco\TestMusic\TestMusic\TestMusic\WAV\Music\Dead Inside\No.4\</a>
                       <ul>
                           <li id="phtml_2">
                                <a href="FixSongsReport00440_body_aBE9p7eQo0baClCFB6BhPQ==.html" 
                                   target="_blank">
        Flower
                                </a>
                           </li>
                       </ul>
                   </li>
               </ul>
            </div>
        </div>
        <div class="col-8">
           <iframe id="processingResults" name="processingResults" 
                 style="border:none; width:100%;height:500px">
            </iframe>
        </div>
    </div>
</div>




<script>
      $(function ()
        {
            $('#songchanges')
                .jstree
                (
                    {
                    'plugins' : ['themes','html_data','ui','cookie'],
                    'core' : { 'initially_open' : [ 'phtml_1' ] }
                    }
                )
                .bind('select_node.jstree',
                    function (e, data)
                    {
                        var href    = data.node.a_attr.href;
                        var iframe  = document.getElementById("processingResults");
                        if(href!='#')
                        {
                            iframe.src = href;
                        }
                        else
                        {
                            $(this).jstree('toggle_node', data.node);
                        }
                    }
                );
            }
        );
</script>

这很好用，但是当页面首次显示时我不希望 iframe 为空所以我希望 jstree 自动打开第一个叶节点并触发 function 加载 iFrame。

我该怎么做呢？

Answer 1

您可以使用ready.jstree事件处理程序在树准备就绪后选择节点。 树实例上的select_node函数将触发select_node事件。

$('#songchanges').jstree(
    {
        'plugins': ['themes', 'html_data', 'ui', 'cookie'],
        'core': { 'initially_open': ['phtml_1'] }
    }
).on('select_node.jstree',
    function (e, data) {
        var href = data.node.a_attr.href;
        var iframe = document.getElementById("processingResults");
        if (href != '#') {iframe.src = href; }
        else { $(this).jstree('toggle_node', data.node); }
    }
).on('ready.jstree', function (e, data) {
    var leaf = null;
    var getFirstLeaf = function (id) {
        var node = data.instance.get_node(id); 
        if(node.children.length > 0){
            return getFirstLeaf(node.children[0]);
        }
        return data.instance.select_node(id); //Triggers select_node event
    };
    getFirstLeaf('phtml_1'); // Start from the root node id
});

Answer 2

这对我有用：

on('loaded.jstree', function (e, data) {
                data.instance.open_node('.jstree-last');

})