Layui父页面和子页面直接互相传值

最新推荐文章于 2023-12-08 10:59:39 发布

小彩虹冲鸭

最新推荐文章于 2023-12-08 10:59:39 发布

阅读量1.1w

点赞数 12

分类专栏： # Layui 文章标签： layui 父子页面传值前端

本文链接：https://blog.csdn.net/qq_25844803/article/details/112240068

版权

Layui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

概述

实现效果：
①将父页面的数据表格的指定行数据，传递到子页面。
（点击父页面按钮，打开子页面，并在子页面显示指定行的数据）。
②先通过父页面打开子页面，然后在子页面输入指定值，将值传回到父页面。
注意：只打开子页面，父页面没开的时候，效果②无法实现。
补充：以下代码建议在开发工具中如（HBulider、Eclipse等）中编辑运行。
如果直接把所有东西放在一个文件夹里，然后用浏览器打开某个页面，是不能实现效果的。

最后：以下代码资源，可在这里下载https://download.csdn.net/download/qq_25844803/15739622

后端

为了在前端动态展示一个数据表格，需要一个后端接口向前端传递数据。
传给前端的数据格式如下所示（仅参考）

{
    "code": 0,
    "data": [
        { 
            "sendName": "张三",
            "sendPhone": "17812341234"
        },
        {
            "sendName": "楼兰王",
            "sendPhone": "18748785478"
        },
        {
            "sendName": "默克尔",
            "sendPhone": "18748785478"
        },
        ......
        {
            "sendName": "特朗普",
            "sendPhone": "12385647589"
        }
    ],
    "msg": "已查询到数据！",
    "count": 24
}

前端

父页面样式

父页面样式如下所示
在这里插入图片描述

父页面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父页面</title>
		<link rel="stylesheet" href="../static/css/layui.css">
	</head>
	<body>
		<!-- ↓↓ 展示后端传来的数据 ↓↓ -->
		<table id="tb_deliver_list" lay-filter="filter_deliver_list"></table>

		<!-- 找地方显示 子页面传回来的值 -->
		用来显示子页面传回父页面的值 <input id="input_dad" />
		
		<!-- 右侧工具栏 -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">打开子页面, 将发货人和电话传递过去</a>
		</script>
		 
		<script type="text/javascript" src="../static/layui.js"></script>
		<script type="text/javascript" >
		  layui.use(['layer', 'form', 'table'], function(){
		 	$ = layui.jquery;
		    var layer = layui.layer
		       ,form = layui.form
			   ,table = layui.table;
		    
			//初始化数据列表
			table.render({
			  elem: '#tb_deliver_list'
			  ,height: 490
			  ,url: 'http://localhost:8080/data/list' //数据接口
			  ,page: true //开启分页
			  ,cols: [[ //表头
					   {field: 'sendName', title: '发货人', width:180, fixed: 'left'}
					   ,{field: 'sendPhone', title: '发货人电话', width:180, fixed: 'left'}
					   ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:250}
			  ]]
			});
			
			// 打开子页面 并传值
			table.on('tool(filter_deliver_list)', function (obj) {
				//获取对应行的数据，
			    var data = obj.data;
				//打开子页面，将行数据传递过去
				layer.open({
					type: 2,
					title: '打开子页面',
					skin: 'layui-layer-lan', //样式类名，即子页面边框样式
					closeBtn: 1, //要显示关闭按钮
					anim: 2,
					shadeClose: false, //开启遮罩
					moveOut: false,
					area: ['500px', '300px'],
					content: 'son.html'
					,resize:false
					,maxmin: false //开启最大化最小化按钮
					,success:function (layero, index) {
						// 获取子页面的iframe
						var iframe = window['layui-layer-iframe'+index];
						// 向子页面的全局函数child传参
						iframe.child(data);
					}
				});
			});
			
			//准备接收子页面传来的参数
			window.ppp = function(a){
		        if (a != "") {
					//alert(v);
					//将子页面传来的值赋值到指定输入框
		            $('#input_dad').val(a);
		        }
		    }
			
		  });
		</script>
	</body>
</html>

子页面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子页面</title>
		<link rel="stylesheet" href="../static/css/layui.css">
		<script type="text/javascript" src="../static/layui.js"></script>
		<script type="text/javascript" src="../static/lay/modules/jquery.js"></script>
	</head>
	<body>
		<form class="layui-form" action="" method="post" onsubmit="return false" lay-filter="deliver_edit_form">
		  <div class="layui-form-item">
		    <label class="layui-form-label">发货人</label>
		    <div class="layui-input-block">
		      <input type="text" name="send"  maxlength="12" placeholder="请输入发货人姓名" autocomplete="off" class="layui-input" disabled  >
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">发货人电话</label>
		    <div class="layui-input-block">
		      <input type="text" name="sendPhone"    lay-verify="phone" placeholder="请输入发货人电话" autocomplete="off" class="layui-input" disabled>
		    </div>
		  </div> 
		  <div class="layui-form-item">
		    <label class="layui-form-label">子页面的值</label>
		    <div class="layui-input-block">
		      <input type="text" name="sondata" id="sondata"  maxlength="12" placeholder="这里输入的任意值,将传到父页面" autocomplete="off" class="layui-input"  >
		    </div>
		  </div>
		  <div class="layui-form-item">
		  </div>
		  <button id="sontodad" class="layui-btn"   lay-filter="filter_test_send">向父页面传值，并关闭子页面</button>
		</form>
		
		<script type="text/javascript" >
			// 向子页面的表格赋值，也可向父页面传值
			function child(dataFromFather) {
				layui.use(['form', 'layer'],function (){
					$ = layui.jquery;
				    var form = layui.form
				       ,layer = layui.layer;
					 
					// 表格赋值 
					form.val('deliver_edit_form', {
						"send": dataFromFather.sendName,
						"sendPhone": dataFromFather.sendPhone,
					});
					
				//监听 向父页面传值
				$(document).on('click',"#sontodad",function(){
					var aa = document.getElementById("sondata").value;
					//调用父页面函数，并把刚刚输入的值传递到子页面
					parent.ppp(aa); 
					//关闭 子页面
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
				});
			  });
			}
		</script>
	</body>
</html>

父页面->子页面

如下图所示，点击了第一行右侧的按钮之后，打开子页面，第一行的数据也传输到了子页面，并进行展示。
在这里插入图片描述

子页面->父页面

在子页面的输入框中输入任意值，点击传值按钮后，子页面会自动关闭，并把值传到父页面，在指定的输入框显示出来，如下面2个图所示。
在这里插入图片描述

可能产生的疑问

在父页面中，用来接收子页面值的方法，我用方式① window.ppp = function(a){ 进行定义。

有人可能会问为什么不写成 方式② function ppp(a) {
在这里插入图片描述

事实上，一开始我用方式②写，但这样接收不到子页面传来的值。所以用了方式①。

(当然，也有可能是因为我的父页面写的有问题。如果有高人看出问题所在，还请指点一二，感激不尽。)

小彩虹冲鸭

关注

12
点赞
踩
47

收藏

觉得还不错? 一键收藏
4
评论
Layui父页面和子页面直接互相传值

目录后端前端父页面样式父页面代码子页面代码父页面->子页面子页面->父页面可能产生的疑问后端为了在前端动态展示一个数据表格，需要一个后端接口向前端传递数据。传给前端的数据格式如下所示（仅参考）{ "code": 0, "data": [ { "sendName": "张三", "sendPhone": "17812341234" }, { "sendN
复制链接

扫一扫

专栏目录