zoukankan      html  css  js  c++  java
  • 00022-layui 显示表单,iframe父子页面传值

    showRec:function (obj) {
       window.formData = null;
       var dialog = layer.open({
          type: 2
          ,title: '订单支付'
          ,content: 'orderPayShow.jsp'
          ,maxmin: true
          ,area: layui.setter.area
          ,btn: ['关闭']
          ,btnAlign: 'c'
          ,success:function(layero,index){
             window.formData = obj.data;
          }
       });
       layer.full(dialog)
    },
    

    orderPayShow.jsp:

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ include file="/common/taglibs.jsp"%><%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
    <!DOCTYPE html>
    <html >
    <head>
       <meta charset="utf-8">
       <title>订单支付</title>
       <meta name="renderer" content="webkit">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
       <link rel="stylesheet" href="${ctxLayui}/layuiadmin/layui/css/layui.css" media="all">
       <link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/myStyle.css" media="all">
    </head>
    <body>
    <div class="layui-form" lay-filter="orderPayForm" id="orderPayForm" style="padding: 20px 10px 0 0;">
       <script id="formTpl" type="text/html">
    
         
          <div class="layui-form-item-45" >
             <label class="layui-form-label">公司ID</label>
             <div class="layui-input-block">
                <div class="layui-form-mid">{{d.companyId}}</div>
             </div>
          </div>
          <div class="layui-form-item-45" >
             <label class="layui-form-label">订单ID</label>
             <div class="layui-input-block">
                <div class="layui-form-mid">{{d.orderId}}</div>
             </div>
          </div>
          <div class="layui-form-item-45" >
             <label class="layui-form-label">金额</label>
             <div class="layui-input-block">
                <div class="layui-form-mid">{{d.amount}}</div>
             </div>
          </div>
          <div class="layui-form-item-45" >
             <label class="layui-form-label">付款类型;1-线上;2-转帐;3-汇款</label>
             <div class="layui-input-block">
                <div class="layui-form-mid">{{d.payTypeStr}}</div>
             </div>
          </div>
          <div class="layui-form-item-45" >
             <label class="layui-form-label">付款时间</label>
             <div class="layui-input-block">
                <div class="layui-form-mid">{{d.payTimeStr}}</div>
             </div>
          </div>
          <div class="layui-form-item-45" >
             <label class="layui-form-label">商户订单号</label>
             <div class="layui-input-block">
                <div class="layui-form-mid">{{d.outTradeNo}}</div>
             </div>
          </div>
          <div class="layui-form-item-45" >
             <label class="layui-form-label">交易流水号</label>
             <div class="layui-input-block">
                <div class="layui-form-mid">{{d.transactionId}}</div>
             </div>
          </div>
          <div class="layui-form-item-45" >
             <label class="layui-form-label">支付状态,1-未支付;2-支付成功;3-支付失败</label>
             <div class="layui-input-block">
                <div class="layui-form-mid">{{d.payStatusStr}}</div>
             </div>
          </div>
         
          <div class="layui-form-item-45" >
             <label class="layui-form-label">备注</label>
             <div class="layui-input-block">
                <div class="layui-form-mid">{{d.remark}}</div>
             </div>
          </div>
          <div class="layui-form-item-45" >
             <label class="layui-form-label">状态</label>
             <div class="layui-input-block">
                <div class="layui-form-mid">{{d.statusStr}}</div>
             </div>
          </div>
          <div class="layui-form-item-45" >
             <label class="layui-form-label">创建时间</label>
             <div class="layui-input-block">
                <div class="layui-form-mid">{{d.createTimeStr}}</div>
             </div>
          </div>
          <div class="layui-form-item-45" >
             <label class="layui-form-label">修改时间</label>
             <div class="layui-input-block">
                <div class="layui-form-mid">{{d.modifyTimeStr}}</div>
             </div>
          </div>
       </script>
       <div id="form_view"></div>
    
    </div>
    
    <script src="${ctxLayui}/layuiadmin/layui/layui.js"></script>
    <script>
       layui.config({
          base: '${ctxLayui}/layuiadmin/'
       }).extend({
          index: 'lib/index'
       }).use(['index', 'form','dict','laytpl','util'], function(){
          var $ = layui.$ ,form = layui.form;
          var dict = layui.dict;
          var laytpl = layui.laytpl;
          var util = layui.util;
          var formData = window.parent.formData;
          formData.payTypeStr = formData.payType?dict.showName("payType",formData?formData.payType:1):'';
          formData.payTimeStr = formData.payTime?util.toDateString(formData.payTime,'yyyy-MM-dd'):'';
          formData.payStatusStr = formData.payStatus?dict.showName("payStatus",formData?formData.payStatus:1):'';
          formData.confirmTimeStr = formData.confirmTime?util.toDateString(formData.confirmTime,'yyyy-MM-dd'):'';
          formData.statusStr = formData.status?dict.showName("status",formData?formData.status:1):'';
          formData.createTimeStr = formData.createTime?util.toDateString(formData.createTime,'yyyy-MM-dd'):'';
          formData.modifyTimeStr = formData.modifyTime?util.toDateString(formData.modifyTime,'yyyy-MM-dd'):'';
          var data = formData;
            $.each(data,function(item){
                if(!data[item]){
                    data[item] = '';
             }
            });
          var getTpl = formTpl.innerHTML,view = document.getElementById('form_view');
          laytpl(getTpl).render(data, function(html){
             view.innerHTML = html;
          });
       })
    </script>
    </body>
    </html>
    

    其中:
    window.formData = obj.data;
    将行记录赋值给window.formData
    子页面获取:
    var formData = window.parent.formData;
    模板显示表单值:

          var getTpl = formTpl.innerHTML,view = document.getElementById('form_view');
          laytpl(getTpl).render(data, function(html){
             view.innerHTML = html;
          });
    
  • 相关阅读:
    css3的clip-path方法剪裁实现
    vue-cli3.0之vue.config.js的配置项(注解)
    用Canvas实现一些简单的图片滤镜
    转《图像处理之表面滤波》
    vue-axios的application/x-www-form-urlencod的post请求无法解析参数
    如何在linux中执行一个脚本
    列表、字典、元组小练习
    开发脚本自动部署及监控
    固化命令的方式、sed文本处理工具
    nginx服务、nginx反向代理和nfs共享服务
  • 原文地址:https://www.cnblogs.com/jianquan100/p/13040601.html
Copyright © 2011-2022 走看看