javascript - 如何让 jstree 自动打开第一个树节点的路径(和触发功能)
问题描述
我正在使用jstree
我构建了一棵树,叶子节点包含一个 href,然后在同一页面上的 iFrame 中打开。这是由每当在 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 自动打开第一个叶节点并触发加载 iFrame 的函数。
我该怎么做呢 ?
解决方案
在树准备好后,您可以使用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
});
推荐阅读
- log4j2 - Citrus Framework 日志记录 - 如何启用/使用
- python - 如何用python删除字母[AZ]
- python-3.x - Discord py 附件
- python - 是否有与 JupyterLab Chrome 应用程序等效的 Firefox 应用程序?
- matlab - 当函数参数依赖于数组时的 ODE45
- sql - SQL 查询以根据表中的日期提取日期范围
- c# - Is there a way to add multiple variables together without implicitly declaration
- sql - 当一个表包含(id,start_date)而另一个包含(id,end_date)时,如何连接两个表以确定日期范围
- r - 根据另一个变量 r 中的值变化生成一个新变量
- flutter - 在颤动中处理未来