LayUI：做页面窗体的参数传递时遇到的坑

已于 2022-03-12 16:54:50 修改
阅读量2.4k 收藏 3
点赞数 1
分类专栏： LayUI 文章标签： layui 前端 javascript
于 2022-03-11 23:42:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dawn0718/article/details/123435447
版权

　　写完一个计算机信息录入的页面后，用户开始使用了。

　　为了方便用户快捷录入，用户如果选择某一类型的计算机比如联想ThinkCentre M7131z的计算机，那么程序应该将这个型号计算机的出厂类型、生产日期、生产商、CPU信息、显卡信息、声卡信息、内存大小、固态硬盘大小、机械硬盘大小等一起提取出来并填入。如果信息有变化（升级或者维修更换），可以修改。

　　想着很简单，以为和C#一样可以快快地实现，昨天晚上给用户说很快就可以让他们用上这个功能。他们觉得挺好，为他们着想了，这样他们省事多了。

　　结果整个白天都在折腾这个破玩意，唉！悲催，苦逼的低端！

踩坑⑴

　　建完字典表，打算使用数据测试一下，就在MS SQL Server里直接编辑了，在录入计算机型号的时候，图省事，直接在网页里拷贝了型号名称，黏贴到MS SQL Server的数据库表的编辑框中，结果数据死活不出来，仙人板板，明明数据都是对的，可就是不出结果，程序也不报错，折腾了半个多小时，后来直接提取原字段内容才发现，复制网页内容时有回车键，可是在MS SQL Server的数据库表的编辑框中看不见。

踩坑⑵

　　写程序我大部分都是复制与黏贴，把写过的代码复制过来，略微改一下，尽快完成工作，改进和提高是后面的事情。

　　我做过父窗体与子窗体的参数传递，比如在做数据修改的时候，需要将原始数据进行保留，在提交修改的时候，与原数据一一进行对比，改动了才提交修改，没有改动的就不用提交修改。

　　在《LayUI⑵：下拉列表的常用操作》中，我记录了这样的做法，是可以正常使用的。

　　今天也是这样做，结果初始化不成功。

　　想法：用户点击某一个标签，弹出相应的窗体选择框，从数据库中提取相应的数值进行选择。

　　我还是像以前那样，在子页面中建一个初始化函数init(selectName)，然后在父页面中调用这个函数进行参数传递，可是结果却不出来，参数传递是正常的，跟踪才发现原来这个函数是在最后才执行，所以导致了从数据库提取不到正确的参数。

　　即在子页面中声明了变量，比如：

	let selectName;
	function init(src){
		selectName=src;
	}

　　　你在父页面里调用：

    window["layui-layer-iframe" + index].init('出厂类型');

　　参数是传递进去了，可是后面的代码是先于这个函数执行的，也就没有得到selectName的传递值。

　　也不想换其他的参数传递方法了，就让从数据库提取数据延迟500ms，这样数据才提取成功。

踩坑⑶

　　界面想做得略微好看一点，就想做下拉框，没找到合适的LayUI下拉框，想用Input框和下拉框组合，有点麻烦，就想在录入框旁边放个按钮，结果界面乱了，无奈，只能使用标签点击，就是标签点击后出现一个窗口让用户选择，我以为还有List组件，没发现，时间紧就使用了表格。

　　后面仔细看一下拉框，是否有替换的方法。

　　实现效果：

　　 蓝色标签可以响应点击事件。

　　点击【出厂类型】，出现选择框。

　　选择 ThinkCentre M720t-NO56，点击【确定】进行数据填充。

 　　父页面代码：

		//给标签出厂类型添加监听事件
		var lbl_CCLX=document.getElementById("lbl_CCLX");	
		lbl_CCLX.addEventListener('click',function(e){
				var index =layer.open({
					type: 2, title: '选择-->出厂类型'
					, closeBtn: 0
					, area: ['600x', '500px']
					, shade: 0.3
					, id: 'Win_CCLX1'
					// , btn: ['关闭']
					, btnAlign: 'c'
					, moveType: 1
					, content: 'EisGetSelectSingleValue.html'
					, success: function (layero,index) {
							var iframe = layero.find('iframe')[0].contentWindow; //得到iframe页的窗口对象
							iframe.layui.form.render(); //页面渲染																				
						    window["layui-layer-iframe" + index].init('出厂类型');														
					}
				});		
		})

　　子页面代码：

　　初始化：

	function init(src){
		document.getElementById("selectName").value=src;
	}

　　页面的表格数据延迟加载：

		setTimeout(function(){
			table.render({
				elem: '#currentTableId',
				url: 'EisGetSelectSingleValue.php',
				cols: [[
					{type: "radio", width: 40},
					{field: 'C02', width: 200, align:'left',title: '选项列表', sort: true}
				]],
				method:'POST',
				where:{"C01":document.getElementById("selectName").value},
				page: false,
				skin: 'line',
				done:function(data){
					$(this.elem).next().find(".layui-table-header").attr('class',"layui-hide layui-table-header");
				}
			});			
			
		},500);

　　监听响应，根据不同参数提取相应的数据进行填充。

        form.on('submit(saveBtn)', function (data) {
			if(document.getElementById("selectName").value=='出厂类型'){
					//出厂类型
					window.parent.layui.jquery('#C04').val(selectItem);
					//CPU
					$.ajax({
						url:'EisGetUniqueValue.php',
						data:{"C01":selectItem,"C02":"CPU"},
						type:'POST',
						dataType: 'text',
						async:false,
						success:function (data) {
							window.parent.layui.jquery('#C06').val(data);							
						}
					});					
					
					//显卡
					$.ajax({
						url:'EisGetUniqueValue.php',
						data:{"C01":selectItem,"C02":"显卡"},
						type:'POST',
						dataType: 'text',						
						async:false,
						success:function (data) {
							window.parent.layui.jquery('#C10').val(data);							
						}
					});										
					//声卡
					$.ajax({
						url:'EisGetUniqueValue.php',
						data:{"C01":selectItem,"C02":"声卡"},
						type:'POST',
						dataType: 'text',						
						async:false,
						success:function (data) {
							window.parent.layui.jquery('#C11').val(data);							
						}
					});															
					//内存大小
					$.ajax({
						url:'EisGetUniqueValue.php',
						data:{"C01":selectItem,"C02":"内存"},
						type:'POST',
						dataType: 'text',						
						async:false,
						success:function (data) {
							window.parent.layui.jquery('#C07').val(parseInt(data));							
						}
					});																				
					//固态硬盘大小
					$.ajax({
						url:'EisGetUniqueValue.php',
						data:{"C01":selectItem,"C02":"固态硬盘"},
						type:'POST',
						dataType: 'text',						
						async:false,
						success:function (data) {
							window.parent.layui.jquery('#C28').val(parseInt(data));							
						}
					});																									
					//机械硬盘大小
					$.ajax({
						url:'EisGetUniqueValue.php',
						data:{"C01":selectItem,"C02":"机械硬盘"},
						type:'POST',
						dataType: 'text',						
						async:false,
						success:function (data) {
							window.parent.layui.jquery('#C08').val(parseInt(data));							
						}
					});																														
					//生产日期
					$.ajax({
						url:'EisGetUniqueValue.php',
						data:{"C01":selectItem,"C02":"生产日期"},
						type:'POST',
						dataType: 'text',						
						async:false,
						success:function (data) {
							window.parent.layui.jquery('#C14').val(data);							
							window.parent.layui.form.render();							
						}
					});																																			
					//生产商
					$.ajax({
						url:'EisGetUniqueValue.php',
						data:{"C01":selectItem,"C02":"生产商"},
						type:'POST',
						dataType: 'text',						
						async:false,
						success:function (data) {
							window.parent.layui.jquery('#C15').val(data);							
							window.parent.layui.form.render();							
						}
					});																																								
			}

			if(document.getElementById("selectName").value=='CPU'){
					window.parent.layui.jquery('#C06').val(selectItem);
			}

			if(document.getElementById("selectName").value=='显卡'){
					window.parent.layui.jquery('#C10').val(selectItem);
			}

			if(document.getElementById("selectName").value=='声卡'){
					window.parent.layui.jquery('#C11').val(selectItem);
			}

			var iframeIndex = parent.layer.getFrameIndex(window.name);
			parent.layer.close(iframeIndex);			
		})

　　PHP代码：

<?php
require 'DawnEisLinkConfig.php';
$C01=!empty($_POST['C01']) ? $_POST['C01'] : '';
$C02=!empty($_POST['C02']) ? $_POST['C02'] : '';

$sql = "select C03 from EisDict where C02='$C02' and C01='$C01'";
$res = $EisConn->query($sql);
$rows=$res->fetchAll(PDO::FETCH_ASSOC);
$return=$rows[0]['C03'];
echo $return;
?>

dawn
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ie使用layui上传参数无法传递,返回变为下载问题
willow的博客
05-24 2305
前台使用layui上传,代码如下layui.use('upload', function(){ var actionUrl = contextPath + '/oa/OAFile' + '/upload'; var upload = layui.upload; //执行实例 var uploadInst = upload.render({ ele...
layer给iframe页面传值
二进制的博客
12-19 7828
最近使用layer的弹窗功能，在传参上遇到了问题。 有两种情况。 1. 父页面给子页面传参；这个可以在url后拼接，比如test.html?a=1 2. 父页面获取子页面操作DOM说明：本文实现了第二种，我看到第一种方案的实现方法是在父页面中用正则表达式去搜索test.html?a=1 这样来达到获取参数参考信息http://blog.csdn.net/ReturningProdigal/ar
Layui的layui.open打开的iframe页面执行form.render()无效的解决办法
taoerchun的专栏
07-12 3191
转载于:https://blog.csdn.net/xunmzy/article/details/83316902 在html代码与引入的layui正确的情况下，layui.open有时候会出现form.render()渲染无效的情况， 这时候可以通过获取新窗口的对象来通过form.render()重新渲染 var indexTpl = layui.layer.open({ ...
Layer之iframe插件传值问题
lanwithyu的博客
07-08 1714
在一个index.html界面，用layer的iframe插件打开一个图片上传界面：upload_index.html，图片上传完毕，需要把图片地址传给index.html。
Layui parent.layui.open弹框之Iframe 传值处理
King_YiDi的博客
07-21 2232
Layui open弹框获取值的方法 介绍：Layui 弹框之Iframe传值处理我的想法解决 子页面 获取 父页面方法以及元素。上代码，看图片原创作品，欢迎来讨论！ 介绍：Layui 弹框之Iframe传值处理 本人在使用到layui的iframe版 ，里面使用到了弹框 。 普通弹框：layui.open(); 像这种传递值都没什么问题 ， 子页面获取父页面值 或者父页面获取子页面值 全屏弹框：parent.layui.open() 但是像这种的话，继续使用官方提供的获取父页面值就没有办法获取了。 因
layui: layer.open加载窗体时出现遮罩层的解决方法
10-16
总结来说，解决 `layui: layer.open` 加载窗体时出现遮罩层的问题，主要可以通过调整 `shade` 参数、分离窗体方法、自定义遮罩层样式或控制遮罩层关闭来实现。在实际项目中，应根据具体需求选择合适的方法，以达到...
Qt 窗体之间的参数传递.rar
07-21
本文档针对于Qt C++代码，包括窗体新建、窗体之间的参数传递等
C#跨窗体参数传递
05-05
C#中两个窗体之间的参数传递，在一个窗体的文本框中输入数据，按确定后在另一个窗体中显示。
C#实现窗体间传递数据实例
09-04
C#窗体间传递数据实例 C#窗体间传递数据实例是指在两个或多个窗体之间传递数据的过程，常见于各种软件系统中。下面将详细介绍C#实现窗体间传递数据实例的方法。 公用变量值传递 公用变量值传递是指在父窗体和子...
iframe里面使用top.layer.open报错
weixin_42588672的博客
02-15 466
这个报错通常是由于在一个iframe中调用了top.layer.open函数，但是在顶层窗口(即父窗口)中没有引入layer库所致。 解决这个问题的方法是在父窗口中引入layer库，确保在iframe中调用top.layer.open函数时可以正确地找到该函数所在的库。你可以在父窗口中添加以下代码来引入layer库： <script src="layer.js"></script...
web客户端开发：使用Layui框架的layer进行跨域（跨iframe）数据传输遇到的问题及解决记录
weixiao的博客
01-06 2427
一、遇到问题简述： 在一个html页面（记为A.html）中，通过layer弹出iframe层，在iframe层（子页面，记为B.html）进行数据修改，然后将修改后的最新数据从子页面（B.html）回传到父页面（A.html）， 在数据回传时，通过控制台调试，发现遇到“Blocked a frame with origin”的错误。 二、解决方法： 通过使用postMessage方法可以安全地跨iframe进行通信。 具体为： 1.在子页面B.html中（iframe弹出层）调用父页面A.
【Layui】getChildFrame父窗口向子窗口传参--小坑（参数无法显示）
qaqcfff的博客
05-17 990
毕设里面遇到了个小坑 父页面layer.open中success代码 let iframeWin = window[layero.find("iframe")[0]["name"]]; console.log(data) var body = layer.getChildFrame('body', index); body.find('.username').val(data.username); 这样成功打开iframe的时候，body.find会找到对应的html并将data赋值进去 然而我一开始按照
layui页面传值
暗夜蝶梦
06-05 1985
A页面跳转至B页面，用iframe传值之后，出现加载顺序的问题，表格加载完了，参数才传过去 把值放到url里传递之后，发现并不会出现延迟的问题，调用加载表格后台数据的时候是能得到参数值的 A页面代码： var i = layer.open({ title:'编辑字典选项', type:2, shade:0.2, maxmix:true, shadeClose:true, area:['1
layui 页面参数传递 layui 父页面 传参 给子页面
最新发布
angelfly2001的专栏
09-06 1339
/ 全局变量，子页面获取父页面传来的参数。content: "../lujing1/yemianname", //子页面路径。url: '/**/**/getData/parentID/'+parentID, //传参。// 给全局变量赋值，需要传递到子页面。//获得当前行数据；// 全局变量，要传给子页面的参数。解决方案，父页面使用全局变量。
layui页面数据交互
m0_46522271的博客
10-27 3428
layui页面简单数据交互
基于Layui的页面传参及获取参数方法二
weixin_43244841的博客
03-11 3463
https://www.cnblogs.com/crush-wyy/p/13236846.html
layui 简单实现 TABLE 分页功能
代码笔记
08-04 2587
开启分页功能: page: true, 当前每页记录数:limit: 15, 记录数可选的集合:limits: [15, 30, 50, 100], 从layui传递给mvc的分页参数:request: { pageName: 'pageNo',limitName: 'pageSize' } 在mvc接收layui传来分页参数:public ActionResult GetJson2(int pageNo, int pageSize) layui接收mvc传来的值: parseData: fu......
使用layui后的button提交，以及向后端传值问题
lxn_1221的博客
03-02 5373
1.在使用layui-form之后我们往往会使用button进行数据的提交，在button中添加lay-submitlay-filter="*" 会绑定提交事件。 lay-submit 无需填写值 绑定触发提交的元素，如button <buttonlay-submitlay-filter="*"class="layui-btnlayui-btn-normalit...
layui 跳转页面时的传参和取值问题
zyt_oneself的博客
03-31 7661
layui 跳转页面时的传参和取值问题前言一、跳转页面1.弹框按钮2.调用弹框方法二、取值1.取值的方法2.调用方法总结 前言 layui 如何在当前页面点击按钮弹框，弹出的框内容为新页面，将值传到该页面中，并进行取值，是本篇文章主要记录的问题。 提示：以下是本篇文章正文内容，下面案例可供参考 一、跳转页面 点击弹框按钮，弹出新页面，用一下方法，layer.open即弹出一个窗口 示例如下： 1.弹框按钮 <button class="layui-btn layui-btn-normal" id=
layui 刷新父窗体
05-31
在子窗体中使用以下代码可以刷新父窗体： ```javascript parent.location.reload(); ``` 这会重新加载父窗体，使其显示更新后的内容。请注意，这只适用于在同一域中的窗体。如果父窗体和子窗体不在同一域，则无法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值