子页面和父页面的传值的实现

页面：样式+a标签和隐藏div+src+iframe页面+js

<#include "/common/head.html"/>
<style>
   .black_overlay{
      display: none;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      /*background-color: black;*/
      z-index:1001;
      -moz-opacity: 0.8;
      /*opacity:.80;*/
      filter: alpha(opacity=88);
   }
   .alert-success {
      color: #3c763d;
      background-color: #dff0d8;
      border-color: #d6e9c6;
   }
   .alert{
      border: 1px solid transparent;
      font-size: 14px;
      border-radius: 0;
   }
</style>


<div class="easyui-panel addPage" data-options="fit:true,border:false,novalidate:true">

    <div id ="unseal_title" style="margin-top:20px;margin-bottom:5px;font-size:20px;color: #00bbee;font-family: Arial, 'Hiragino Sans GB', '微软雅黑', '黑体-简', Helvetica, sans-serif">
       添加职员
    </div>
    <hr>

    <form class="easyui-form" id="ff" method="post" data-options="novalidate:true">

      <div style="display: none">
         <input  class="easyui-textbox" type="text" name="department_id" id="department_id" value="" data-options="fit: true"></input>
         <input  class="easyui-textbox" type="text" name="station_id" id="station_id" value="" data-options="fit: true"></input>
      </div>
        <table class="table1">
            <tr>
                  <th><span id="clerka_num_label"><span style="color: red;display:inline;">*</span>职员编号:</span></th>
                   <td>
                      <div class="wrap_input"><input class="easyui-textbox" type="text" name="clerka_num" id="clerka_num" value="" data-options="fit: true"></input></div>
                  </td>
            <tr>
                  <th><span id="clerka_worknum_label"><span style="color: red;display:inline;">*</span>职员工号:</span></th>
                   <td>
                      <div class="wrap_input"><input class="easyui-textbox" type="text" name="clerka_worknum" id="clerka_worknum" value="" data-options="fit: true,required:true"></input></div>
                  </td>
            </tr>
         <tr>
            <th><span id="login_pwd_label"><span style="color: red;display:inline;">*</span>登录密码:</span></th>
            <td>
               <!--<div class="wrap_input">-->
                  <span>默认密码为</span></span><span name="login_pwd" id="login_pwd" data-options="fit: true">123456</span>
               <!--</div>-->
            </td>
         </tr>
            <tr>
                  <th><span id="clearka_name_label"><span style="color: red;display:inline;">*</span>职员姓名:</span></th>
                   <td>
                      <div class="wrap_input"><input class="easyui-textbox" type="text" name="clearka_name" id="clearka_name" value="" data-options="fit: true,required:true"></input></div>
                  </td>
            </tr>
            <tr>
                  <th><span id="sex_label"><span style="color: red;display:inline;">*</span>性别:</span></th>
                   <td>
               <div class="wrap_input" style="display: inline-block;float:left;height: 10px;">
                  <input style="width: 10px;" class="easyui-radio" type="radio" checked="true" name="sex" id="sex1" value="男"/>
                  <span>男</span>
                  <input style="width: 10px;" class="easyui-radio" type="radio" name="sex" id="sex2" value="女"/>
                  <span>女</span>
               </div>
                  </td>
            </tr>
            <tr>
                  <th><span id="entrytime_label">入职日期:</span></th>
                   <td>
                      <div class="wrap_input"><input class="easyui-datebox" type="text" name="entrytime" id="entrytime" value="" data-options="fit: true"></input></div>
                  </td>
            </tr>
            <tr>
                  <th><span id="email_label">邮箱:</span></th>
                   <td>
                      <div class="wrap_input"><input class="easyui-textbox" type="text" name="email" id="email" value="" data-options="fit: true"></input></div>
                  </td>
            </tr>
            <tr>
                  <th><span id="phone_label">手机:</span></th>
                   <td>
                      <div class="wrap_input"><input class="easyui-textbox" type="text" name="phone" id="phone" value="" data-options="fit: true"></input></div>
                  </td>
            </tr>
            <tr>
                  <th><span id="contact_info_label">联系方式:</span></th>
                   <td>
                      <div class="wrap_input"><input class="easyui-textbox" type="text" name="contact_info" id="contact_info" value="" data-options="fit: true"></input></div>
                  </td>
            </tr>
         <tr>
            <th><span id="enclosure_label">个人照片:</span></th>
            <td>
               <div class="wrap_input">
                  <input class="easyui-filebox" type="text" name="enclosure" id="enclosure" data-options="fit: true,buttonText: '点击上传照片', accept1: 'image/*', onChange: function(){uploadFile('enclosure')}"></input></div>
               <div class="image_pre">
                  <img id="enclosureImg" src=""></div>
            </td>
         </tr>
         <!--<tr>
            <th><span id="role_id_label">职员角色</span></th>
            <td>
               <div class="wrap_input"><input class="easyui-numberspinner" type="text" name="role_id" id="role_id" value="" data-options="fit: true"></input></div>
            </td>
         </tr>-->
            <tr>
                  <th><span id="clerka_state_label">职员状态:</span></th>
                   <td>
               <div class="wrap_input" style="display: inline-block;float:left;height: 10px;">
                  <input style="width: 10px;" class="easyui-radio" type="radio" checked="true" name="clerka_state" id="clerka_state1" value="在职"/>
                  <span>在职</span>
                  <input style="width: 10px;" class="easyui-radio" type="radio" name="clerka_state" id="clerka_state2" value="离职"/>
                  <span>离职</span>
               </div>
            </td>
            </tr>
         <tr>
            <th><span id="account_state_label">账号状态:</span></th>
            <td>
               <div class="wrap_input" style="display: inline-block;float:left;height: 10px;">
                  <input style="width: 10px;" class="easyui-radio" type="radio" checked="true" name="account_state" id="account_state1" value="在职"/>
                  <span>启用</span>
                  <input style="width: 10px;" class="easyui-radio" type="radio" name="account_state" id="account_state2" value="离职"/>
                  <span>冻结</span>
               </div>
            </td>
         </tr>
            <tr>
                  <th><span id="department_id_label">选择部门:</span></th>
                   <td>
                      <div class="wrap_input" style="height: 16px;">

                  <a href = "javascript:void(0)" onclick = "document.getElementById('fade').style.display='block'" style="color: blue;">
                     <sapn id="department_name">请选择部门</sapn>
                  </a>

                  <div id="fade" class="black_overlay" style="display: none;" onclick="document.getElementById('fade').style.display='none'">
                     <iframe onclick="document.getElementById('fade').style.display='none'" style="width: 800px;height:400px;margin: 50px;" src="/clerka/eList">
                     </iframe>
                  </div>

               </div>
                  </td>
            </tr>
         <tr>
                  <th><span id="station_id_label">选择岗位:</span></th>
                   <td>
               <div id="station_names" class="wrap_input" style="height: 16px;">

                  <div id="pin"></div>

                  <!--需要拼接-->
                  <!--<div  style="width: 100px;" class="alert alert-block alert-success" style="margin-bottom: 5px; width: 250px;">
                     <input type="hidden" name="zxrid" class="zxridsele" value="350">
                     <span id="station_name" >糖一车间操作工1</span>
                     <a onclick="del(id)" class="easyui-linkbutton" iconCls="glyphicon-remove" plain="true">删除</a>
                  </div>-->

                  <a href="javascript:void(0)" onclick = "document.getElementById('fade1').style.display='block'" class="easyui-linkbutton color1" iconCls="glyphicon-plus" plain="true" >添加</a>

                  <div id="fade1" class="black_overlay" style="display: none;" onclick="document.getElementById('fade1').style.display='none'">
                     <iframe onclick="document.getElementById('fade1').style.display='none'" style="width: 800px;height:400px;margin: 50px;" src="/clerka/eList1">
                     </iframe>
                  </div>



                  </div>

               </div>
                  </td>
            </tr>
        </table>
    </form>
</div>
<script>
top.window.subPage.save = save;
function save() {
   if($("#ff").form('enableValidation').form('validate')) {
      $.post("add", getParam(), function(data) {
         if(data.result == "success") {
            top.window.closeWindow();
            top.window.subPage.loadCurrDatagrid();
         }
      });
   }
}
function getParam() {
    var param = {

        "model.clerka_num": getInputValue("clerka_num"),
        "model.clerka_worknum": getInputValue("clerka_worknum"),
        "model.clearka_name": getInputValue("clearka_name"),
        "model.sex": getInputValue("sex"),
        "model.entrytime": getInputValue("entrytime"),
        "model.email": getInputValue("email"),
        "model.phone": getInputValue("phone"),
        "model.contact_info": getInputValue("contact_info"),
        "model.enclosure": getInputValue("enclosure"),
        "model.account_state": getInputValue("account_state"),
        "model.clerka_state": getInputValue("clerka_state"),
        "model.login_pwd": getInputValue("login_pwd"),
        "model.station_id": getInputValue("station_id"),
        "model.role_id": getInputValue("role_id"),
        "model.department_id": getInputValue("department_id"),
    }
    for(key in param) {
        if(!param[key]) {
            delete param[key];
        }
    }
    return param;
}


//扩展js
</script>
<#include "/common/foot.html"/>

<#include "/common/head.html"/>
<script language="javascript" type="text/javascript">
</script>
   <table id="dg" style="border-color: #00ee00" onclick="document.getElementById('fade').style.display='none'">

   </table>
<script type="text/javascript">
    var datagrid = $("#dg");
    var dgOptions = {
        rownumbers:true,
        fit:true,
        border:false,
        rownumbers:true,
        url:'${basePath}/check/eListData',
        method:'post',
        //toolbar:'#tb',
        pageSize: 20,
        pagination:true,
        multiSort:true,
        sortName: getInitParam().sort,
        sortOrder: getInitParam().order,
        queryParams: getInitParam(),

        columns: [[

            {field: 'num', title: '设备编号', width: 100, sortable: true},
            {field: 'equipment_name', title: '设备名称', width: 100, sortable: true},
            {field: 'factory', title: '生产厂家', width: 100, sortable: true},
            {field: 'equipment_model', title: '设备型号', width: 100, sortable: true},
            {field: 'section_id', title: '所属工段', width: 100, sortable: true},
            {field: 'state', title: '状态', width: 100, sortable: true},
            /* {field: 'id', checkbox:true},*/
            {
                field: "id", title: '操作', width: 120, sortable: true, formatter: function (value, rowData, rowIndex) {
                    return "<a onClick='returnValue("+rowData.id+",\" "+rowData.equipment_name+" \")' style='color:blue;'>查看</a>";
                },
            }
        ]],
        loadFilter: function(data) {
            if(data.result && data.result == 'fail') { //失败时，错误消息提示
                showWarnMsg(data.msg);
                return { };
            }else {
                return data;
            }
        }
    };
    $(function() {
        handleAuthDataRule();
        datagrid.datagrid(dgOptions);
    });

    function tspaceSearch() {
        var param = tspaceGetParam();
        datagrid.datagrid("load", {
            queryParams: param
        })
    }

    function tspaceGetParam() {
        var param = {};
        $("#tb :input[name]").each(function(i, item) {
            if($(item).val()) {
                param[$(item).attr("name")] = $(item).val();
            }
        });
        return param;
    }

    function getInitParam() {
        var param = {};
        $("#tb :input[name]").each(function(i, item) {
            if($(item).val()) {
                param["queryParams[" + $(item).attr("name") + "]"] = $(item).val();
            }
        });
        if("") {
            param.sort = "";
            param.order = "asc";
        }
        return param;
    }

    //按钮事件


    /**
     * 打开子页
     */
    var _openSubPageFlag = false;
    function _openSubPage(pageUrl) {
        if(!_openSubPageFlag) {
            $("#subLayout").layout("expand", "east");
            setTimeout(function() {
                $("#subIframe").attr("src", pageUrl);
            }, 600);
            _openSubPageFlag = true;
        }else {
            $("#subIframe").attr("src", pageUrl);
        }
    }

    //页面之间传值
    function returnValue(id,name){
      //获取id和name回显到父页面
      parent.window.$("#department_id").html(id);
        parent.window.$("#department_name").html(name);
        //获取父页面中的div
        parent.window.$("#fade").css("display","none");
    }


    //扩展js
</script>
<#include "/common/foot.html"/>