【发布时间】：2021-08-28 04:08:12
【问题描述】：
我已经使用 jstree 在单独的 iframe 中准备了 2 个树视图。右树视图应该控制左树视图。当用户在右侧树视图中单击一个列表时，将在左侧树视图中打开并选择相应的项目文件夹。我可以在单页中使用 div 来实现它。我使用右 jstree div var instance = $('#left').jstree(true); 中的左树视图实例控制左树视图。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/themes/default/style.min.css" />
<meta charset="UTF-8">
<title>jstree basic demos</title>
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px; }
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 1px solid black;
}
.flex-child:first-child {
margin-right: 20px;
}
</style>
</head>
<body>
<h1>Tree Menu</h1>
<!-- <button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>-->
<div class="flex-container">
<div class="flex-child magenta">
<div id="left" class="demo">
</div>
</div>
<div class="flex-child green">
<div id="List">
</div>
</div>
</div>
<script>
$('#left')
.jstree({
'core' : {
'multiple' : false,
'data' : [
{
"text":"A","id":"A","children":[
{"text":"Australia","id":"Aus"},
{"text":"America","id":"Ame"}
]
},
{
"text":"B","id":"B","children":[
{"text":"Beirut","id":"Bei"},
{"text":"Brunei","id":"Bru"}
]
}
]
}
});
$('#List')
.on("changed.jstree", function(e,data){
if(data.selected.length)
{
$("#left").jstree("close_all");
//console.log(data.selected);
selected_node=data.selected[0];//list-j2_1
console.log(selected_node);
var tm_id = selected_node.replace("j2_", "");//tree
var instance = $('#left').jstree(true);
instance.deselect_all();
instance.select_node(tm_id);
$("#left").jstree("open_all", tm_id);
}
})
.jstree({
'core':{
'multiple':false,
'data':[{"text":"Australia", "id":"Aus"},
{"text":"America", "id":"Ame"},
{"text":"Beirut","id":"Bei"},
{"text":"Brunei", "id":"Bru"}]
}
})
</script>
</body>
</html>使用 iframe 时，我无法获取左树视图的实例。我想在 index-10_2.html（右 iframe 源）中获取左树视图实例以选择并打开相应的节点。我使用left=$("#1").contents(); 获取iframe 内容，var instance=left.find('#left'); 获取实例，instance.select_node(tm_id); 选择节点。但是，显示错误instance.select_node is not a function。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<iframe src="index-10_1.html" id="1"></iframe>
<iframe src="index-10_2.html" id="2"></iframe>
</body>
</html>
index-10_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<div class="content demo" id="left"></div>
<script>
$('#left')
.jstree({
'core' : {
'multiple' : false,
'data' : [
{
"text":"A","id":"A","children":[
{"text":"Australia","id":"Aus"},
{"text":"America","id":"Ame"}
]
},
{
"text":"B","id":"B","children":[
{"text":"Beirut","id":"Bei"},
{"text":"Brunei","id":"Bru"}
]
}
]
}
});
</script>
</body>
</html>
index-10_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="jquery/jquery-2.2.3.min.js"></script>
<script src="vakata-jstree-4a77e59/dist/jstree.min.js"></script>
<link rel="stylesheet" href="vakata-jstree-4a77e59/dist/themes/default/style.min.css" />
</head>
<body>
<div class="content" id="right"></div>
<script>
$('#right')
.on("changed.jstree", function(e,data){
if(data.selected.length)
{
$("#left").jstree("close_all");
console.log(data.selected);
selected_node=data.selected[0];//list-j2_1
console.log(selected_node);
var tm_id = selected_node.replace("j2_", "");//tree
left=$("#1").contents().find('#left');
instance=left.jstree(true);
instance.select_node(tm_id);
$("#left").jstree("open_all", tm_id);
}
})
.jstree({
'core':{
'multiple':false,
'data':[{"text":"Australia", "id":"Aus"},
{"text":"America", "id":"Ame"},
{"text":"Beirut","id":"Bei"},
{"text":"Brunei", "id":"Bru"}]
}
})
</script>
</body>
</html>
【问题讨论】：
标签： javascript iframe jstree