mirror of https://gitee.com/y_project/RuoYi.git
实例演示中增加多层窗口获取值
RuoYi
parent
f51b4f40f1
commit
38f7ecb671
|
|
@ -77,4 +77,22 @@ public class DemoDialogController
|
|||
{
|
||||
return prefix + "/table/parent";
|
||||
}
|
||||
|
||||
/**
|
||||
* 多层窗口frame1
|
||||
*/
|
||||
@GetMapping("/frame1")
|
||||
public String frame1()
|
||||
{
|
||||
return prefix + "/table/frame1";
|
||||
}
|
||||
|
||||
/**
|
||||
* 多层窗口frame2
|
||||
*/
|
||||
@GetMapping("/frame2")
|
||||
public String frame2()
|
||||
{
|
||||
return prefix + "/table/frame2";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,49 +24,97 @@
|
|||
<h5>弹层框</h5>
|
||||
</div>
|
||||
<div class="ibox-content" id="test">
|
||||
<p>弹出复选框表格及单选框表格（点击提交后得到数据并回显到父窗体）。 </p>
|
||||
<button type="button" class="btn btn-info" onclick="selectUsersToParent()">弹出表格（复选框）</button>
|
||||
<button type="button" class="btn btn-warning" onclick="selectUsersToParentCallBack()">弹出表格（复选框）- 回调形式</button>
|
||||
<p>弹出层，点击提交后得到数据并回显到父窗体。 </p>
|
||||
<button type="button" class="btn btn-primary" onclick="selectUsersToParent()">弹出表格（方式一）</button>
|
||||
<button type="button" class="btn btn-success" onclick="selectUsersToParentCallBack2()">弹出表格（方式二）</button>
|
||||
<button type="button" class="btn btn-info" onclick="selectUsersToParentCallBack3()">弹出表格（方式三）</button>
|
||||
<p id="userids"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>弹层框</h5>
|
||||
</div>
|
||||
<div class="ibox-content" id="test">
|
||||
<p>多层弹出，点击提交后得到数据并回显到父窗体。 </p>
|
||||
<button type="button" class="btn btn-primary" onclick="selectUsersToParent4()">弹出窗口（方式四）</button>
|
||||
<p id="username"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "demo/modal";
|
||||
|
||||
|
||||
function selectCheckUser(){
|
||||
$.modal.open("选择用户", prefix + "/check");
|
||||
}
|
||||
|
||||
|
||||
function selectRadioUser(){
|
||||
$.modal.open("选择用户", prefix + "/radio");
|
||||
}
|
||||
|
||||
|
||||
// 根据当前激活的选项卡获取（方式一）
|
||||
function selectUsersToParent(){
|
||||
$.modal.open("选择用户", prefix + "/parent");
|
||||
}
|
||||
|
||||
function selectUsersToParentCallBack(){
|
||||
// callBack获取父窗口方法（方式二）
|
||||
function selectUsersToParentCallBack2(){
|
||||
var options = {
|
||||
title: '选择用户',
|
||||
url: prefix + "/parent",
|
||||
callBack: doSubmit
|
||||
callBack: doSubmit2
|
||||
};
|
||||
$.modal.openOptions(options);
|
||||
}
|
||||
|
||||
// callBack获取父窗口值（方式三）
|
||||
function selectUsersToParentCallBack3(){
|
||||
var options = {
|
||||
title: '选择用户',
|
||||
url: prefix + "/parent",
|
||||
callBack: doSubmit3
|
||||
};
|
||||
$.modal.openOptions(options);
|
||||
}
|
||||
|
||||
function doSubmit(index, layero){
|
||||
// callBack获取父窗口值（方式四）
|
||||
function selectUsersToParent4(){
|
||||
var prefix = ctx + "demo/modal";
|
||||
var options = {
|
||||
title: '多层窗口A',
|
||||
url: prefix + "/frame1",
|
||||
callBack: doSubmit4
|
||||
};
|
||||
$.modal.openOptions(options);
|
||||
}
|
||||
|
||||
function doSubmit2(index, layero){
|
||||
var rows = layero.find("iframe")[0].contentWindow.getSelections();
|
||||
if (rows.length == 0) {
|
||||
$.modal.alertWarning("请至少选择一条记录");
|
||||
return;
|
||||
}
|
||||
$('#userids').html(rows.join())
|
||||
$('#userids').html('我是通过方式二来的：' + rows.join())
|
||||
$.modal.close(index);
|
||||
}
|
||||
|
||||
function doSubmit3(index, layero){
|
||||
var body = $.modal.getChildFrame(index);
|
||||
$("#userids").html('我是通过方式三来的：' + body.find('#rowIds').val());
|
||||
$.modal.close(index);
|
||||
}
|
||||
|
||||
function doSubmit4(index, layero){
|
||||
var body = $.modal.getChildFrame(index);
|
||||
$("#username").html('我是通过方式四来的：' + body.find('#name').val());
|
||||
$.modal.close(index);
|
||||
}
|
||||
|
||||
function selectUsers(){
|
||||
alert(1);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('多层窗口A')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<form id="form-user-add" class="form-horizontal">
|
||||
<div class="row">
|
||||
<div class="col-sm-12" style="margin-top: 50px">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label">用户名称：</label>
|
||||
<div class="col-sm-4">
|
||||
<input id="name" placeholder="请输入用户名称" class="form-control" type="text">
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" onclick="selectUserToParentId()">选择</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
/* 提交 */
|
||||
function submitHandler() {
|
||||
var name = $("#name").val();
|
||||
activeWindow().$('#username').html(name);
|
||||
$.modal.close();
|
||||
}
|
||||
|
||||
// 根据父窗口ID获取
|
||||
function selectUserToParentId(){
|
||||
var prefix = ctx + "demo/modal";
|
||||
var options = {
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
title: '多层窗口B',
|
||||
url: prefix + "/frame2",
|
||||
callBack: doSubmit
|
||||
};
|
||||
$.modal.openOptions(options);
|
||||
}
|
||||
|
||||
function doSubmit(index, layero){
|
||||
var body = $.modal.getChildFrame(index);
|
||||
$("#name").val(body.find('#name').val());
|
||||
$.modal.close(index);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('多层窗口B')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<form id="form-user-add" class="form-horizontal">
|
||||
<div class="row">
|
||||
<div class="col-sm-12" style="margin-top: 20px">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label">用户名称：</label>
|
||||
<div class="col-sm-4">
|
||||
<input id="name" placeholder="请输入用户名称" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
<th:block th:include="include :: header('表格传值给父页面')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<input type="hidden" id="rowIds">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
|
|
@ -81,15 +82,21 @@
|
|||
}
|
||||
$.modal.close();
|
||||
// 父页面的方法
|
||||
// parent.selectUsers();
|
||||
// activeWindow().selectUsers();
|
||||
// 父页面的变量
|
||||
parent.$('#userids').html(rows.join());
|
||||
activeWindow().$('#userids').html('我是通过方式一来的：' + rows.join());
|
||||
}
|
||||
|
||||
/* 添加用户-选择用户-提交(回调形式-父页面调用子页面) */
|
||||
function getSelections() {
|
||||
return $.table.selectFirstColumns();
|
||||
}
|
||||
|
||||
$("#bootstrap-table").on("check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table", function (e, rowsAfter, rowsBefore) {
|
||||
var rows = $.common.equals("uncheck-all", e.type) ? rowsBefore : rowsAfter;
|
||||
var rowIds = $.table.affectedRowIds(rows);
|
||||
$("#rowIds").val(rowIds);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue