layui 父子页面传值操作

最新推荐文章于 2023-06-06 16:06:23 发布
最新推荐文章于 2023-06-06 16:06:23 发布
阅读量5.2k 收藏 12
点赞数 3
分类专栏： layui 文章标签： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42575310/article/details/92968719
版权

1、显示效果

A:父页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蔬菜信息</title>
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="../../index.ico" type="image/x-icon" />
   <link rel="shortcut icon" href="${pageContext.request.contextPath}/index.ico" type="image/x-icon" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link href="${pageContext.request.contextPath}/layui-v2.4.5/layui/css/layui.css" rel="stylesheet" media="all">
  <link href="${pageContext.request.contextPath}/layui-v2.4.5/layui/css/modules/layer/default/layer.css" rel="stylesheet" media="all">
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-header layuiadmin-card-header-auto">
        <button class="layui-btn layuiadmin-btn-tags" id="rechar_btn">添加</button>
      </div>
      <div class="layui-card-body">    
        <table class="layui-hide" id="test" lay-filter="test"></table> 
        <script type="text/html" id="barDemo">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
      </div>
    </div>
  </div>


<script type="text/html" id="toolbarDemo">
</script>
<script type="text/html" id="xuhao">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script src="${pageContext.request.contextPath}/layui-v2.4.5/layui/lay/modules/layer.js"></script>
 <script src="${pageContext.request.contextPath}/js/common.js"></script>    
<script src="${pageContext.request.contextPath}/layui-v2.4.5/layui/layui.all.js"></script>
<script>
layui.use(['table','layer','jquery'], function(){
  var table = layui.table;
  var $ = layui.jquery;
  table.render({
    elem: '#test'
    ,url:''
    ,toolbar: '#toolbarDemo'
    ,title: '信息表'
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
   	  ,{field:'rownum', fixed: 'left',templet: '#xuhao',width:50}
      ,{field:'greens_Type_ID', title:'ID', width:200, fixed: 'left', sort: true}
      ,{field:'greens_Type_Name', title:'分类名称'}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:180,align:"center"}
    ]]
    ,page: {
    	layout:['prev','page','next','skip','limit','count',],
    	limits:[10,20,40,60,80,100],curr:1,groups:10,first:'首页',last:'尾页'
    	},request:{
    	pageName:'currentPage',
    	limitName:'size'
    }
  });
  
  
  table.on('tool(test)', function(obj){
    var data = obj.data
    ,layEvent = obj.event;
    var id = obj.data.greens_Type_ID;
    var name = obj.data.greens_Type_Name;
    var data = {
    		name: name
    }
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
        $.ajax({
			type:"post",
			url:"",
			data:{"id":id},
			success:function(data){
				layer.msg('删除成功了哦！');
				table.reload();
			}
			
		});
      });
    } else if(obj.event === 'edit'){
    	  layer.open({
    	      type: 2,
    	      title: "编辑分类",
    	      shadeClose: true,
    	      shade: 0.4,
    	      area: ['30%', '30%'],
    	      content: "$" ,
    	      success: function (layero, index) {
    	            var body = layer.getChildFrame('body', index);
    	            result = JSON.stringify(data);
    	            result = $.parseJSON(result);
    	            $.each(result, function (item) {
    	                body.find('#layuiadmin-app-form-tags' + item).val(result[item]);
    	                if (item == 'name') {
    	                    body.find('#greensType').val(result[item]);
    	                } 
    	            });
    	        },
    	      btn: ['确定'],
    	      yes: function(index,layero){
    	    	  var arr=$(layero).find('iframe')[0].contentWindow.callbackdata();
    	    	  var greenName = arr.greendData;
    	    	  $.ajax({
    	  			type:"post",
    	  			url:"",
    	  			data:{
    	  				"name":greenName,
    	  				"id":id
    	  			},
    	  			success:function(data){
    	  				layer.msg('修改成功了哦！');
    	  				table.reload();
    	  			}
    	  			
    	  		});
    	          layer.close(index);
    	      }
              
    	  });
    	
    	
    	
    	
    }
  });

  $('#rechar_btn').on('click', function(){
	  layer.open({
	      type: 2,
	      title: "添加分类",
	      shadeClose: true,
	      shade: 0.4,
	      area: ['30%', '30%'],
	      content: "" ,
	      btn: ['确定'],
	      yes: function(index,layero){
	    	  var arr=$(layero).find('iframe')[0].contentWindow.callbackdata();
	    	  var greenName = arr.greendData;
	    	  $.ajax({
	  			type:"post",
	  			url:"${pageContext.request.contextPath}/leixinServlet",
	  			data:{"name":greenName},
	  			success:function(data){
	  				layer.msg('添加成功了哦！');
	  				table.reload();
	  			}
	  			
	  		});
	          layer.close(index);
	      }
          
	  });
  });
});
</script>

</body>
</html>

B:子页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分类添加</title>
<link href="${pageContext.request.contextPath}/layui-v2.5.2/layui/css/layui.css" rel="stylesheet" media="all">
<link href="${pageContext.request.contextPath}/layui-v2.5.2/layui/css/modules/layer/default/layer.css" rel="stylesheet" media="all">
</head>
<body>
<script src="${pageContext.request.contextPath}/layui-v2.5.2/layui/layui.all.js"></script>
<div class="layui-form" lay-filter="layuiadmin-form-tags" id="layuiadmin-app-form-tags" style="padding-top: 30px; text-align: center;">
    <div class="layui-form-item">
      <label class="layui-form-label">分类名称</label>
      <div class="layui-input-inline">
        <input type="text" name="greensType" id="greensType" lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
<script>
var callbackdata = function (){
	var greensType = document.getElementById("greensType").value;
	var data = {
			greendData: greensType
	}
	return data;
}
</script>
</body>
</html>

 2、点击编辑子页面回显数据

A:效果图

 B:点击编辑页

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑分类</title>
<link href="${pageContext.request.contextPath}/layui-v2.5.2/layui/css/layui.css" rel="stylesheet" media="all">
<link href="${pageContext.request.contextPath}/layui-v2.5.2/layui/css/modules/layer/default/layer.css" rel="stylesheet" media="all">
</head>
<body>
<script src="${pageContext.request.contextPath}/layui-v2.5.2/layui/layui.all.js"></script>
<div class="layui-form" lay-filter="layuiadmin-form-tags" id="layuiadmin-app-form-tags" style="padding-top: 30px; text-align: center;">
    <div class="layui-form-item">
      <label class="layui-form-label">分类名称</label>
      <div class="layui-input-inline">
        <input type="text" name="greensType" id="greensType" lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
<script>
var callbackdata = function (){
	var greensType = document.getElementById("greensType").value;
	var data = {
			greendData: greensType
	}
	return data;
}
</script>
</body>
</html>

禅悟刂
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layer.open及父子页面传值
weixin_43915509的博客
11-15 4856
layer.open写法： layer.open({ type: 2, //类型 2表示iframe层 1：页面层 icon:2, area: ['1050px','600px'],//弹出页面的宽 高 /*shade: false,*/ //遮罩层透明度,也可以写数字表示透明程度（如：0.1） title: "风机选择", //显示标题 ...
layer子窗口与父窗口传值
weixin_34111819的博客
06-08 488
layer作为优秀的jquery框架，可以用作弹出组件、日历、分页等，而且实现简单，只有几十k的大小。此处给出弹出窗口时子窗口与父窗口的传值。js和css这里不展示引入（以下给出目录结构的图片），仅仅给出我测试的代码：1 . index.html <!DOCTYPE html> <html lang="en"> <head> <meta...
【Layui】子页面向父级页面传递参数
咔咔博客
01-03 6450
author：咔咔 wechat：fangkangfk 案例： 底层是父级页面，上边是子页面，子页面需要将选择的ID传递给父级页面 首先需要在父级页面写open打开子页面 content是子页面地址 var type_id; layui.use(['laypage', 'layer','form'], function() { var la...
使用layer.open由子页面向父页面传递数据
pzz799的博客
12-29 1462
父页面中建立隐藏域 <input type="hidden" class="layui-input" id="test" name="test" > 子页面中传值 var testValue = "aaa"; // 子窗体传值到父窗体 test是父页面的一个dom $("#test",window.parent.document).val(testValue ); ...
layer：子父之间的数据传递
热门推荐
ALLEN的博客
03-14 3万+
layer中有这样的情况，父页面与弹窗（子页面）之间的数据通信。*表单中的表单元素必须有name属性。这边我讲一下两种情况（都是以表单为例子）：1、父页面的数据在弹窗（子页面）中显示。 2、子页面（弹窗）反馈的信息，在父页面显示。先解释一下逻辑： 一、子——>父 1、点击“标记”，弹出弹窗：2、填写表单，并提交，点击提交按钮后，判断是否标记了“黑名单“，如果“是”，则在父页面显示layer.m
Layui实现父子页面之间值传递.zip
03-12
本教程将深入讲解如何使用 `Layui` 实现父子页面之间的值传递。 首先，我们需要了解 `Layui` 的基本用法。`Layui` 提供了一个基于 `JavaScript` 的模块化机制，通过 `layui.use()` 方法加载需要的模块，如 `layui....
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
10-16
在Layui框架中，使用表格模板与layer弹层组件进行父页面和子页面之间的传值交互是一项常见的需求。Layui是一个轻量级的前端UI库，其layer模块提供了丰富的弹窗功能，包括对话框、提示、加载层等，非常适合用于构建...
layer弹出子iframe层父子页面传值的实现方法
10-17
主要介绍了layer弹出子iframe层父子页面传值的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
asp.net 父子页面传值
05-22
通过学习和实践这些案例，开发者可以更好地掌握在ASP.NET中实现父子页面传值的技巧，从而提升Web应用的用户体验和功能完整性。 总的来说，父子页面传值是ASP.NET开发中的一个重要技能，涉及到多种技术和策略。选择...
html父页面向子页面传值(layui获取父页面表格数据填入子页面中)
weixin_51437526的博客
01-22 1010
场景：父页面为第一级栏目的列表展示数据，子页面为父页面对应栏目页下面的详细数据，用户通过点击父页面每一行的“查看详细”按钮触发弹窗， 弹窗进行数据展示，弹窗效果用的layer.open，子页面为一个单独的detail页面，所以父子页面需要传递唯一值来进行数据展示 父页面代码 table.on('tool(test)', function(obj){ if(obj.event === 'edit'){ var data=ob
对layui中的onevent 和event的使用详解
12-11
这是官方文档的说明 layui.onevent(modName, events, callback) 自定义模块事件，属于比较高级的应用。有兴趣的同学可以阅读layui.js源码以及form模块 layui.event(modName, events, params) 执行自定义模块事件，搭配onevent使用 参数1我暂时理解为组，定义子级方法和使用event调用都需要注意这个参数必须一致 参数二是定义父级方法名，如果有需要定义该方法的子方法时候同样使用onevent,但参数二的方法名需要与父级相同并已加上括号 如下面的代码中data方法，定义子方法就是data(1), 如果
layui 模态窗父子组件值传递
laoli815的博客
03-08 375
layui 模态窗父子组件值获取与传递 直接上图实现我们的最终效果
html 父页面获取子页面传值,layui父页面向子页面传参
weixin_42509815的博客
06-09 413
父页面代码layer.open({title:'标题',type:2,skin:'layui-layer-rim',//加上边框area:[window.screen.width/2+'px',window.screen.height/2+'px'],//宽高maxmin:true,//开启最大化最小化按钮content:"taskDetail.html",/...
layui 父页面向弹出框中的子页面form表单进行赋值
weixin_38728273的博客
03-25 7988
1 ，父页面js layer.open({ type: 2, title: '修改数据', shadeClose: false, shade: 0.8, area: ['60%', '60%'], co...
Layui中操作数据表格，给指定单元格添加事件
冷静
07-18 4137
当我们在操作数据表格的时候，并不是一定要点击表格工具栏中的“查看”按钮，来进行查看，而是点击某一特定的列来进行某些数据查看。例如下图这样。 这就涉及到表格的自定义事件。代码如下： <table id='task-list' lay-filter='task-list'></table> // 需要渲染的表格 var tableInit = function (data...
layui.open 使用postMessage父子页面传值 基于jq+layui和vue
weixin_42574985的博客
06-06 556
因为父页面的框架就是使用jq+layui，所以在实现打开子页面时用到了layer.open，在其success回调中使用document.getElementById('Optimize_iframe').contentWindow.postMessage(res,"*")，且一定要加入iframe.onload 避免发送数据和接收数据出现偏差。场景是子页面进行完成操作后，点击提交按钮，接口返回success，执行父页面layer.close()方法关闭子页面。
layui父页面拿到子页面的表格数据
hlvy
09-07 1907
var iframeWindow = window['layui-layer-iframe' + index] //获取弹框页面 , submitID = 'LAY-user-front-submit' //弹框确定按钮 , submit = layero.find('iframe').contents().find('#' + submitID);/...
LayUi子页面数据填充完之后，渲染父页面。
weixin_38109191的博客
06-07 2431
1.最近在公司用springboot写项目，前段框架用的Layui。有一个需求，自己是用的是一个tab，然后每个tab里面用的是table去填充数据，用户在每个table页去进行添加数据，添加完成之后，不能去刷新整个页面，只能去刷新当前的tab。即：我选择了某一个tab页面，当我操作完成之后，就在这个tab页面进行了一个刷新，并且页面也是在这个tab页面。 自己的操作是这样。 var ta...
layer子页面选择表格数据并把值返回给父页面
qq_38114464的博客
05-19 569
1、父页面增加onclick事件 // callBack获取父窗口方法（方式二） function importTable() { var options = { title: '选择房屋', url: prefix + "/importTable", callBack: doSubmit2 }; $.modal.openOptions(options); } function doSubmit2(index, layero){ .
layui父子组件传值具体代码
最新发布
08-23
- *2* [LayUI父子界面传值](https://blog.csdn.net/T_james/article/details/79052971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值