- 添加库依赖
<script src="${base.contextPath}/lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
![13265172-5e07620479dec6ea.png](https://i-blog.csdnimg.cn/blog_migrate/62a5ec1c7c54ac498136b75d67f3d3f4.webp?x-image-process=image/format,png)
image.png
- 修改我们的页面
注意id要相对应,在最后要加一个<div id="scoreWindow"></div>
<div id="page-content">
<!---->
<div class="col-sm-12" style="margin-top: 10px;">
<ul class="nav nav-tabs" id="mytab">
<!--tab1-->
<li class="active"><a href="#tabStudent" data-toggle="tab">tab1</a></li>
<!--tab2---id:lnkScore-->
<li class=""><a id="lnkScore" href="#tabScore" data-toggle="tab">tab2</a></li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane fade in active" id="tabStudent">
<!--tab1 content-->
<div class="pull-left" id="toolbar-btn" style="padding-bottom:10px;">
<span class="btn btn-primary k-grid-add" style="float:left;margin-right:5px;"
data-bind="click:create"><@spring.message "hap.new"/></span>
<span class="btn btn-success k-grid-save-changes" data-bind="click:save"
style="float:left;margin-right:5px;"><@spring.message "hap.save"/></span>
<span data-bind="click:remove" class="btn btn-danger" style="float:left;"><@spring.message "hap.delete"/></span>
</div>
<script>kendo.bind($('#toolbar-btn'), viewModel);</script>
<div class="pull-right" id="query-form" style="padding-bottom:10px;">
<input type="text" data-role="maskedtextbox" style="float:left;width:150px;margin-right:5px;"
placeholder='<@spring.message "Ora20796Student.studentName"/>'
data-bind="value:model.studentName" class="k-textbox">
<span class="btn btn-primary" style="float:left;width:70px" data-bind="click:query" type="submit"><@spring.message "hap.query"/></span>
<div style="clear:both"></div>
</div>
<script>kendo.bind($('#query-form'), viewModel);</script>
<div style="clear:both">
<div id="grid"></div>
</div>
</div>
<!--tab2 content-->
<div id="tabScore" class="tab-pane fade">
<iframe id="iframe-score" src="" height="300" width="100%" frameborder="0" seamless
scrolling="auto">
Login...
</iframe>
</div>
</div>
</div>
<!---->
<!---->
<div id="scoreWindow"></div>
</div>
- 添加切换事件
iframe的src属性的正确拼写
$(document).ready(function () {
//切换tab页面的点击事件处理
$("#lnkScore").on("click", function () {
/* $("#iframe-score").hide();*/
var grid = $("#grid").data("kendoGrid");
console.log("Grid loaded")
//获取所有选中的数据行
var selectItems = grid.selectedDataItems();
console.log("Item loaded")
console.log(selectItems)
for (var i in selectItems) {
console.log(i + ": " + selectItems[i].studentId);
//设置iframe的src属性C
$('#iframe-score').attr("src", "${base.contextPath}/ora20796/student_score.html?studentId=" +selectItems[i].studentId);
}
});
});
实现效果图:
![13265172-fbc5f525b1c9e31d.png](https://i-blog.csdnimg.cn/blog_migrate/b06c358c9195d53977fa62dc5abed012.webp?x-image-process=image/format,png)
image.png
![13265172-bc54a6d03050e56e.png](https://i-blog.csdnimg.cn/blog_migrate/25aa6b254d251a423400762df87ade29.webp?x-image-process=image/format,png)
image.png