2022-05-29 19:06阅读: 150评论: 0推荐: 0

layui 弹出层里面添加表格数据

好文章需要耐心阅读…茶凡—Matrix

请添加图片描述

这里点击添加按钮会弹出一个弹出层，里面可以添加数据并提交。

type - 基本层类型，类型：Number，默认：0

layer官方提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用*layer.open({type: 1})*方式调用，则type为必填项（信息框除外）。

layer弹层组件开发文档 - Layui

这里使用的 iframe 层。

🥫 在页面上添加一个按钮，点击按钮弹出弹出层

🥫定义一个表单页面，把它放在弹出层的 content 里面

1、弹出层事件

注意

本文中采用的是 thymeleaf + springboot + java + layui 来创建的项目，如果单纯写html可能会有一些区别。

 <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{//unpkg.com/layui@2.6.8/dist/css/layui.css}">
</head>
 
<body class="layui-layout-body">
 
<!--头-->
<!--在html的head元素中通过th:replace属性引入，值为模板的路径，
不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)-->
<div th:replace="head :: header"></div>
 
<div class="layui-body layui-container" style="margin:70px 0px 0px 20px; ">
    <div id="layerDemo">
        <button type="button" class="layui-btn layui-btn-sm" data-method="notice">
            <i class="layui-icon layui-icon-add-circle" style="font-size: 10px; color: white;"></i> 新增
        </button>
    </div>
</div>
 
<script type="text/javascript" th:inline="none" th:src="@{//unpkg.com/layui@2.6.8/dist/layui.js}"></script>
<script>
    layui.use(['table', 'layer','laypage','form'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laypage = layui.laypage,
            form = layui.form;
           
 
        //触发事件
        var active = {
            notice: function () {
                //示范一个公告层
                layer.open({
                    type: 2//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
                    , title: false //不显示标题栏
                    , closeBtn: 1
                    , area: ['460px', '200px']//定义宽高
                    , shade: 0.8//遮幕
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    // ,btn: [ '表格','取消']
                    , btnAlign: 'c'//按钮排列：居中对齐
                    , moveType: 1 //拖拽模式，0或者1
                    , resize: true
                    , content: '/userform'//跳转到想要的界面，这里是我自己项目的跳转界面
                    ,
                    success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: '${path}'
                            , target: '_blank'
                        });
                    }
                })
            }
        }
        $('#layerDemo .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    });
    
</script>
</body>
</html>

2、表单组件

🍕 把从表单获取的数据提交给后台，提交成功后就跳转到后台管理系统的主页面。

🍕 这里重点就是监听表单数据 form.on() 方法，监听到数据后请求后端接口实现数据库删除效果。

 <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户表单</title>
	<link rel="stylesheet" th:href="@{//unpkg.com/layui@2.6.8/dist/css/layui.css}">
	<script type="text/javascript" th:src="@{//unpkg.com/layui@2.6.8/dist/layui.js}"></script>
</head>
 
<body >
	
	<form class="layui-form " style="margin:20px 0px 0px 20px;">
		<div class="layui-form-item">
			<label class="layui-form-label">学生姓名</label>
			<div class="layui-input-inline">
				<input type="text" name="studentName" id="studentName" placeholder="请输入学生姓名" autocomplete="off" class="layui-input">
			</div>
		</div>
 
		<div class="layui-form-item">
			<label class="layui-form-label">学生学号</label>
			<div class="layui-input-inline">
				<input type="text" name="personNo" id="personNo"  placeholder="请输入学号" autocomplete="off" class="layui-input">
			</div>
		</div>
	 
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>
	</form>
<script>
    layui.use(['form','jquery'], function(){
      var form = layui.form ,
		  layer = layui.layer,
		  $= layui.jquery;
      
      //监听表单提交
      form.on('submit(formDemo)', function(data){
			var studentName = $.trim($("#studentName").val());
			var personNo = $.trim($("#personNo").val())
			$.ajax({
				url: '/parent/AddParent',
				type: 'POST',
				data:{
					"studentName": studentName,
					"personNo": personNo,
				},
				success:function(data){
					if(data.code == 1){
						layer.msg("提交成功",function() {time:2000})
						window.parent.frames.location.href="/home"
					}
				}
			})
        return false;
      });
    });
 
</script>
</body>
</html>

3、后台接口数据格式

后台的就不贴代码了，文章末尾可以获取

请添加图片描述

茶凡_Matrix仓亏地址：(CommuteRate: 通勤率后台初版 (gitee.com))

本文作者：茶凡_Matrix

本文链接：https://www.cnblogs.com/ChaFan/p/17980218

posted @ 2022-05-29 19:06 茶凡_Matrix 阅读(150) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

茶凡_Matrix

layui 弹出层里面添加表格数据

1、弹出层事件

2、表单组件

3、后台接口数据格式

公告

搜索

常用链接

我的标签

随笔分类 (41)

随笔档案 (39)

相册 (2)

	<!DOCTYPE html>
	<html lang="en" xmlns:th="http://www.thymeleaf.org/">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>首页</title>
	<link rel="stylesheet" th:href="@{//unpkg.com/layui@2.6.8/dist/css/layui.css}">
	</head>

	<body class="layui-layout-body">

	<!--头-->
	<!--在html的head元素中通过th:replace属性引入，值为模板的路径，
	不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)-->
	<div th:replace="head :: header"></div>

	<div class="layui-body layui-container" style="margin:70px 0px 0px 20px; ">
	<div id="layerDemo">
	<button type="button" class="layui-btn layui-btn-sm" data-method="notice">
	<i class="layui-icon layui-icon-add-circle" style="font-size: 10px; color: white;"></i> 新增
	</button>
	</div>
	</div>

	<script type="text/javascript" th:inline="none" th:src="@{//unpkg.com/layui@2.6.8/dist/layui.js}"></script>
	<script>
	layui.use(['table', 'layer','laypage','form'], function () {
	var $ = layui.jquery,
	layer = layui.layer,
	laypage = layui.laypage,
	form = layui.form;


	//触发事件
	var active = {
	notice: function () {
	//示范一个公告层
	layer.open({
	type: 2//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
	, title: false //不显示标题栏
	, closeBtn: 1
	, area: ['460px', '200px']//定义宽高
	, shade: 0.8//遮幕
	, id: 'LAY_layuipro' //设定一个id，防止重复弹出
	// ,btn: [ '表格','取消']
	, btnAlign: 'c'//按钮排列：居中对齐
	, moveType: 1 //拖拽模式，0或者1
	, resize: true
	, content: '/userform'//跳转到想要的界面，这里是我自己项目的跳转界面
	,
	success: function (layero) {
	var btn = layero.find('.layui-layer-btn');
	btn.find('.layui-layer-btn0').attr({
	href: '${path}'
	, target: '_blank'
	});
	}
	})
	}
	}
	$('#layerDemo .layui-btn').on('click', function () {
	var othis = $(this), method = othis.data('method');
	active[method] ? active[method].call(this, othis) : '';
	});
	});

	</script>
	</body>
	</html>