layer父页获取弹出层输入框里面的值方法


Posted in Javascript onSeptember 02, 2019

主要是因为修改功能,原来页面填写数据如图

layer父页获取弹出层输入框里面的值方法

改为

layer父页获取弹出层输入框里面的值方法

其中点击填写明细弹出框

layer父页获取弹出层输入框里面的值方法

填写完毕后点击确认返回,同事这里因为她是存的多表,所以点击确认就直接保存数据了,改的这个功能原本保存是整体保存,我就不想改原来的逻辑,只想把填写的值带回去用隐藏控件存一下,到时候按照原来的逻辑整体存,所以没办法参考她的,最后搜索很多,解决了问题,具体代码如下:

父页面:

<div class="row">
<div class="col-md-6">
<div class="form-group PadTB10">
<label class="LabelW150">
经费来源总计(元)</label>
<input type="text" readonly="readonly" class="form-control" id="AmountSum" name="AmountSum" onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="填写来源明细" value="@pro.AmountSum"/>
<input type="button" value="填写来源明细" onclick="ShowAmountDetail()" />
<input type="hidden" name="CenterAmount" id="CenterAmount" value="@pro.CenterAmount" />
<input type="hidden" name="CityAmount" id="CityAmount" value="@pro.CityAmount" />
<input type="hidden" name="DisAmount" id="DisAmount" value="@pro.DisAmount" />
<input type="hidden" name="StreetAmount" id="StreetAmount" value="@pro.StreetAmount" />
<input type="hidden" name="OtherAmount" id="OtherAmount" value="@pro.OtherAmount" />
</div>
</div>
</div>

js:

//弹出经费来源明细
function ShowAmountDetail() {
var index = layer.open({
type: 2,
title: '填写经费明细',
shadeClose: false,
skin: 'layui-layer-rim',
area: ['50%', '50%'],
maxmin: true,
content: '/Project/AmountDetail?ProjectCode=' + "@ProjectCode",
btn: ['确定', '关闭'],
yes: function (index, layero) {
debugger;
var body = layer.getChildFrame('body', index); //得到iframe页的body内容
var CenterAmount = body.find("#CenterAmount").val();
var CityAmount = body.find("#CityAmount").val();
var DisAmount = body.find("#DisAmount").val();
var StreetAmount = body.find("#StreetAmount").val();
var OtherAmount = body.find("#OtherAmount").val();
if (CenterAmount == null || CenterAmount == "") CenterAmount = 0;
if (CityAmount == null || CityAmount == "") CityAmount = 0;
if (DisAmount == null || DisAmount == "") DisAmount = 0;
if (StreetAmount == null || StreetAmount == "") StreetAmount = 0;
if (OtherAmount == null || OtherAmount == "") OtherAmount = 0;
sum = Number(CenterAmount) + Number(CityAmount) + Number(DisAmount)
+ Number(StreetAmount) + Number(OtherAmount);
document.getElementById("CenterAmount").value = CenterAmount;
document.getElementById("CityAmount").value = CityAmount;
document.getElementById("DisAmount").value = DisAmount;
document.getElementById("StreetAmount").value = StreetAmount;
document.getElementById("OtherAmount").value = OtherAmount;
document.getElementById("AmountSum").value = sum;

//最后关闭弹出层
layer.close(index);
},
cancel: function () {
//右上角关闭回调
}
});
// layer.full(index);
}

子页面:

<!DOCTYPE html>

<html>

<head>
<meta name="viewport" content="width=device-width" />
<title>AmountDetail</title>
</head>
<body>
<div>
<table class="table table-bordered ">
<tr><td rowspan="5" style="text-align: center; vertical-align: middle;">经济来源明细</td><td>中央拨款(元)</td>
<td>
<input id="CenterAmount" class="form-control" onkeyup="value=value.replace(/[^\d.]/g,'')" name="CenterAmount" type="text" />
</td></tr>
<tr><td>市级专款(元)</td>
<td>
<input id="CityAmount" class="form-control" onkeyup="value=value.replace(/[^\d.]/g,'')" name="CityAmount" type="text" />
</td></tr>
<tr><td>区级资金(元)</td>

<td>

<input id="DisAmount" class="form-control" onkeyup="value=value.replace(/[^\d.]/g,'')" name="DisAmount" type="text" />
</td></tr>
<tr><td>街镇配套(元)</td>
<td>
<input id="StreetAmount" class="form-control" onkeyup="value=value.replace(/[^\d.]/g,'')" name="StreetAmount" type="text" "/>
</td></tr>
<tr><td>其他(元)</td>
<td>
<input id="OtherAmount" class="form-control" onkeyup="value=value.replace(/[^\d.]/g,'')" name="OtherAmount" type="text" />
</td></tr>
</table> 
</div>
</body>
</html>

以上这篇layer父页获取弹出层输入框里面的值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 #Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 #Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 #Javascript
Vue内部渲染视图的方法
Sep 02 #Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 #Javascript
Layui多选只有最后一个值的解决方法
Sep 02 #Javascript
解决layui checkbox 提交多个值的问题
Sep 02 #Javascript
You might like
php分页代码学习示例分享
2014/02/20 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python2与Python3的区别点整理
2019/12/12 Python
python中Django文件上传方法详解
2020/08/05 Python
面向对象编程的优势是什么
2015/12/17 面试题
一份Java笔试题
2012/02/21 面试题
高中生毕业自我鉴定范文
2013/12/22 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
电工技术比武方案
2014/05/11 职场文书
解除劳动合同证明书
2014/09/26 职场文书
停课通知书
2015/04/24 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android