在若依开发中,经常需要将子页面的表格中勾选内容传回父页面,本文将具体说明实现方式。 1、父页面中存在一个按钮,点击即打开子页面(一个模态窗口,会阻塞父页面的行为):
2、在父页面中,需要完成打开子页面和回调给父页面的方法。而且此方法可在若依样例中找到。
<a class="btn btn-success" id="addOneMember" onclick="addMembers()">
<i class="fa fa-plus"></i> 新增成员
</a>
// 打开子页面
function addMembers(){
var options = {
title: '新增成员',
url: prefix + "/addMember",
callBack: getMember
};
$.modal.openOptions(options);
}
// 回调,将子页面用户选择的成员返回父页面
function getMember(index, layero){
var Members = layero.find("iframe")[0].contentWindow.getSelections();
if (Members.length == 0) {
$.modal.alertWarning("请至少选择一条记录");
return;
}
// 这里已经拿到了Members,即子页面返回的表格勾选的内容
mergeMembers(Members);//其他业务代码等
$.modal.close(index);
$.modal.closeLoading();
}
3、子页面mapping
/**
* 编辑->新增成员对话框
*/
@GetMapping("/edit/addMember")
public String addMember()
{
return prefix + "/addMember";
}
4、开发子页面,需要注意的是要在子页面中给出getSelections()方法,子页面勾选完,点击“确定”按钮,即可返回
/* 添加用户-选择用户-提交(回调形式-父页面调用子页面) */
function getSelections() {
return $("#bootstrap-table").bootstrapTable('getSelections');
}