easyUI dialog打开对话框，显示列表数据，选取一条数据操作后赋值给父窗口

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
 2 <%@ include file="/jsp/common/commonfile.jsp" %>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 7     <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
 8     <script type="text/javascript" src="jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
 9     <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/black/easyui.css" type="text/css"/>
10     <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" type="text/css"/>
11     <title></title>
12     <script type="application/javascript">
13         /**
14          * 弹出层   可定义宽高  style="overflow:hidden!important;"滚动条不可见
15          */
16         function openModalWindowHW(title, url, height, width) {
17             var content = '<iframe src="' + url + '" width="100%;" height="100%;" frameborder="0" style="overflow:hidden;"></iframe>';
18             var boardDiv = '<div id="win" title="' + title + '" style="overflow:hidden!important;"></div>';
19             $(document.body).append(boardDiv);
20             var win = $('#win').dialog({
21                 content: content,
22                 height: height,
23                 width: width,
24                 title: title,
25                 top:20,
26                 modal: true, //'true',模态框打开父窗口变灰，无法操作
27                 onClose: function () {
28                     $(this).dialog('destroy');//后面可以关闭后的事件
29                 }
30             });
31             win.dialog('open');
32         }
33 
34         //弹出层  宽高跟随系统 fit="true"设置模态框弹出窗口大小跟随系统
35         function openModalWindow(title, url) {
36             var content = '<iframe src="' + url + '" width="100%;" height="100%;" frameborder="0"></iframe>';
37             var boardDiv = '<div id="win" title="' + title + '" fit="true" ></div>';
38             $(document.body).append(boardDiv);
39             var win = $('#win').dialog({
40                 content: content,
41                 title: title,
42                 modal: true,
43                 onClose: function () {
44                     $(this).dialog('destroy');//后面可以关闭后的事件
45                 }
46             });
47             win.dialog('open');
48             win.window('center');
49         }
50     </script>
51 </head>
52 <body>
53     <div>
54         <form id="submitForm" action="saveExtProject.action" method="post" onsubmit="return checkInput()">
55             <input class="btn btn-primary" style="width: 100px;" type="button"value="打开弹出框"  onclick="openModalWindowHW('标题','url},500,810)">/>
56             <input type="text" id="name"/>
57             <input type="text" id="sex"/>
58             <input type="text" id="year"/>
59         </form>       
60     </div>
61 </body>
62 </html>

父页面

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
 2 <%@ include file="/jsp/common/commonfile.jsp" %>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 
 5 <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
 6 <script type="text/javascript" src="jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
 7 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/black/easyui.css" type="text/css"/>
 8 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" type="text/css"/>
 9 <html>
10 <head>
11     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
12     <title></title>
13     <script type="application/javascript">
14         /**
15         * 弹出框列表页选择一条信息操作，赋值给父页面
16         */
17         function select(id) {
18             $.ajax({
19                 type: 'POST',
20                 url: 'select.action',
21                 data: {'id':id},
22                 dataType: 'json',
23                 success: function (data) {
24                     if (data.isSuccess = true) {
25                         //赋值给父页面
26                         $(window.parent.$("#name").val(data.name));
27                         $(window.parent.$("#sex").val(data.sex));
28                         $(window.parent.$("#year").val(data.year));
29                         //父窗口关闭此模态框
30                         parent.$("#win").window("close");
31                     } 
32                 }
33             })
34     </script>
35 </head>
36 <body>
37 <input type="button" value="勾选一条数据" onclick="return select('${id}')"/>
38 <table>
39     <!--列表表头 开始 -->
40     <tr>
41         <th>
42             <input type="checkbox" name="checkbox" id="checkAll"
43                    onclick="checkAll('checkedId','checkAll')"/>编号
44         </th>
45         <th>姓名</th>
46         <th>性别</th>
47         <th>年龄</th>
48     </tr>
49     <!--列表表头 结束 -->
50     <!-- 数据行 开始 -->
51     <c:forEach var="li" items="${resultList}" varStatus="status">
52         <tr>
53             <td><input type="checkbox" name="checkedId" value="${li.Id}" id="${li.Id}"/></td>
54             <td>${li.name}</td>
55             <td>${li.sex}</td>
56             <td>${li.year}</td>   
57         </tr>
58     </c:forEach>
59     <!-- 数据行 结束 -->
60 </table>
61 </body>
62 </html>

子页面

 public String select(){
    Map<String, Object> resultMap = new HashedMap();
    resultMap.put("name", "小明");
    resultMap.put("sex", "男");
    resultMap.put("year",18);
    resultMap.put("isSuccess", "true");
    return SUCCESS;            
}

子页面controller

easyUI dialog打开对话框，显示列表数据，选取一条数据操作后赋值给父窗口

猜你喜欢