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 相关文章推荐
另一个javascript小测验(代码集合)
Jul 27 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
详解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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php实现通过ftp上传文件
2015/06/19 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
javascript函数库-集合框架
2007/04/27 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
志愿者服务感言
2014/02/27 职场文书
高中语文课后反思
2014/04/27 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
Python Socket编程详解
2021/04/25 Python