实例演示中增加多层窗口获取值

ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoDialogController.java

@@ -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";
+    }
 }

ruoyi-admin/src/main/resources/templates/demo/modal/table.html

@@ -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: doSubmit2
+             };
+             $.modal.openOptions(options);
+        }
+
+		// callBack获取父窗口值（方式三）
+		function selectUsersToParentCallBack3(){
             var options = {
                 title: '选择用户',
                 url: prefix + "/parent",
-                callBack: doSubmit
+                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);

ruoyi-admin/src/main/resources/templates/demo/modal/table/frame1.html

@@ -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>

ruoyi-admin/src/main/resources/templates/demo/modal/table/frame2.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>

ruoyi-admin/src/main/resources/templates/demo/modal/table/parent.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>