easyUI dialog打开对话框，显示列表数据，选取一条数据操作后赋值给父窗口 resultMap声明为全局，生成getset方法

时间：2020-12-04 17:32:04
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>

<%@ include file="/jsp/common/commonfile.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>

    <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/black/easyui.css" type="text/css"/>

    <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" type="text/css"/>

    <title></title>

    <script type="application/javascript">

        /**

         * 弹出层   可定义宽高  style="overflow:hidden!important;"滚动条不可见

         */

        function openModalWindowHW(title, url, height, width) {

            var content = '<iframe src="' + url + '" width="100%;" height="100%;" frameborder="0" style="overflow:hidden;"></iframe>';

            var boardDiv = '<div id="win" title="' + title + '" style="overflow:hidden!important;"></div>';

            $(document.body).append(boardDiv);

            var win = $('#win').dialog({

                content: content,

                height: height,

                width: width,

                title: title,

                top:20,

                modal: true, //'true',模态框打开父窗口变灰，无法操作

                onClose: function () {

                    $(this).dialog('destroy');//后面可以关闭后的事件

                }

            });

            win.dialog('open');

        }

        //弹出层  宽高跟随系统 fit="true"设置模态框弹出窗口大小跟随系统

        function openModalWindow(title, url) {

            var content = '<iframe src="' + url + '" width="100%;" height="100%;" frameborder="0"></iframe>';

            var boardDiv = '<div id="win" title="' + title + '" fit="true" ></div>';

            $(document.body).append(boardDiv);

            var win = $('#win').dialog({

                content: content,

                title: title,

                modal: true,

                onClose: function () {

                    $(this).dialog('destroy');//后面可以关闭后的事件

                }

            });

            win.dialog('open');

            win.window('center');

        }

    </script>

</head>

<body>

    <div>

        <form id="submitForm" action="saveExtProject.action" method="post" onsubmit="return checkInput()">

            <input class="btn btn-primary" style="width: 100px;" type="button"value="打开弹出框"  onclick="openModalWindowHW('标题','url},500,810)">/>

            <input type="text" id="name"/>

            <input type="text" id="sex"/>

            <input type="text" id="year"/>

        </form>

    </div>

</body>

</html>

父页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>

<%@ include file="/jsp/common/commonfile.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

<script type="text/javascript" src="jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>

<link rel="stylesheet" href="jquery-easyui-1.3.5/themes/black/easyui.css" type="text/css"/>

<link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" type="text/css"/>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="application/javascript">

        /**

        * 弹出框列表页选择一条信息操作，赋值给父页面

        */

        function select(id) {

            $.ajax({

                type: 'POST',

                url: 'select.action',

                data: {'id':id},

                dataType: 'json',

                success: function (data) {

                    if (data.isSuccess = true) {

                        //赋值给父页面

                        $(window.parent.$("#name").val(data.name));

                        $(window.parent.$("#sex").val(data.sex));

                        $(window.parent.$("#year").val(data.year));

                        //父窗口关闭此模态框

                        parent.$("#win").window("close");

                    }

                }

            })

    </script>

</head>

<body>

<input type="button" value="勾选一条数据" onclick="return select('${id}')"/>

<table>

    <!--列表表头 开始 -->

    <tr>

        <th>

            <input type="checkbox" name="checkbox" id="checkAll"

                   onclick="checkAll('checkedId','checkAll')"/>编号

        </th>

        <th>姓名</th>

        <th>性别</th>

        <th>年龄</th>

    </tr>

    <!--列表表头 结束 -->

    <!-- 数据行 开始 -->

    <c:forEach var="li" items="${resultList}" varStatus="status">

        <tr>

            <td><input type="checkbox" name="checkedId" value="${li.Id}" id="${li.Id}"/></td>

            <td>${li.name}</td>

            <td>${li.sex}</td>

            <td>${li.year}</td>

        </tr>

    </c:forEach>

    <!-- 数据行 结束 -->

</table>

</body>

</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.java

<action name="associateProject" class="extProjectInfoManagerAction" method="associateProject">

    <result name="success" type="json">        <!--这是常用配置，resultMap表示返回的json对象，root表示返回对象的层级为根部，因为一般对象可以直接获得更多的对象，比如xx.getParent()          程序会默认以为你要返回的json类型为该对象下的所有属性及对象，以及对象的对象，对象的属性，一直下去。

            所以如果不指定name="root" 这就会导致死循环，内存溢出-->

    <param name="root">resultMap</param>

    </result>

</action>

子页面struts.xml

相关文章