# Layui 弹出弹出层提交表单_layui弹窗提交表单-程序员宅基地
Layui 弹出弹出层提交表单
Layui官网：表单组件 form - Layui 文档
引入Layiu css、js
CDN的方式引入
<!-- <link rel="stylesheet" href="/../back/layui/css/layui.css" media="all"> -->
<!-- 引入 layui.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.10/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.10/layui.js">
简单使用
- 效果图如下：
- 表单测试
<html>
<head>
<title>教师添加</title>
<link rel="stylesheet" href="/../back/layui/css/layui.css" media="all"></head>
<body>
<form style="margin-top: 20px" class="layui-form" action="/teacher/add" lay-filter="example">
<div class="layui-form-item">
<label class="layui-form-label">教师姓名</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">教师编号</label>
<div class="layui-input-block">
<input type="text" name="account" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<button style="display: none" lay-submit id="tijiao" >立即提交</button>
</form>
</body>
</html>
- 完整表格列表和弹出
form
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 本地 css -->
<!-- <link rel="stylesheet" href="/../back/layui/css/layui.css" media="all"> -->
<!-- 引入 layui.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.10/css/layui.css" rel="stylesheet">
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm " lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
<button class="layui-btn layui-btn-sm toolbar layui-btn-danger" data-type="add"><i class="layui-icon layui-icon-add-1"></i>
添加
</button>
<button class="layui-btn layui-btn-sm toolbar layui-btn-danger" data-type="batchdel"><i
class="layui-icon layui-icon-delete"></i> 批量删除
</button>
<button class="layui-btn layui-btn-sm refresh"><i class="layui-icon"></i>刷新</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
<a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
</script>
<!-- <script src="/../back/layui/layui.js" charset="utf-8"></script> -->
<!-- <script src="/../back/layui/jquery/jquery-3.4.1.js" charset="utf-8"></script> -->
<!-- 引入 layui.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.10/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#test'
, url: '/teacher/list'
, toolbar: '#toolbarDemo'
, title: '用户数据表'
, totalRow: true
, cols: [[
{
type: 'checkbox', fixed: 'left' }
, {
field: 'tId', title: 'ID', width: 250, fixed: 'left', unresize: true, sort: true }
, {
field: 'name', title: '教师名', width: 120 }
, {
field: 'name', title: '性别', width: 120 }
, {
field: 'tno', title: '编号', width: 110, sort: true }
, {
field: 'password', title: '密码', width: 250 }
, {
field: 'pic', title: '头像', width: 200 }
, {
fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200 }
]]
, page: true,
limits: [9, 18, 27, 36, 45],
limit: 9, //默认采用25
loading: true,
autoSort: true
});
//工具栏事件
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：' + data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选' : '未全选')
break;
}
;
});
//表格行的工具栏
table.on('tool(test)', function (obj) {
var data = obj.data;
if (obj.event === 'del') {
layer.confirm('您确定要删除行吗？', function (index) {
$.ajax({
url: '/teacher/del',
data: {
id: data.id
},
success: function (json) {
table.reload('test');
layer.msg('删除成功');
}
});
})
} else if (obj.event === 'edit') {
layer.open({
type: 2, //打开一个iframe
title: '编辑留言',
content: '/teacher/edit' + data.id,
maxmin: true,
area: ['500px', '300px'],
btn: ['确定', '取消'],
yes: function (index, layero) {
//点击确认触发 iframe 内容中的按钮提交
var frm = layero.find('iframe').contents().find("#lay-form-submit");
frm.click();
}
});
} else {
layer.open({
//打开一个iframe
type: 2,
title: '详细信息',
content: '/teacher/detail' + data.id,
maxmin: true,
area: ['500px', '300px'],
btn: ['确定', '取消'],
yes: function (index, layero) {
//点击确认触发 iframe 内容中的按钮提交
var frm = layero.find('iframe').contents().find("#lay-form-submit");
frm.click();
}
});
}
});
// 排序
table.on('sort(test)', function (obj) {
console.log(obj.field);
console.log(obj.type);
console.log(this);
table.reload('test', {
initSort: obj,
where: {
orderBy: obj.field,
orderDir: obj.type
}
});
});
// toolbar工具栏
var active = {
batchdel: function () {
var checkData = table.checkStatus('test').data; //得到选中的数据
if (checkData.length === 0) {
layer.msg('请选择数据');
return false;
}
var idArr = [];
for (var i = 0; i < checkData.length; i++) {
idArr.push(checkData[i].id);
}
layer.confirm('确定删除吗？', function (index) {
$.ajax({
url: '/teacher/deletemore',
data: {
ids: idArr.join(',')
},
success: function (json) {
table.reload('test');
layer.msg('已删除');
}
});
});
},
add: function () {
layer.open({
// type: 2,
type: 1,
title: '增加',
// content: '/page/teacheradd',
content: '<div style="padding: 16px;">' +
'<form style="margin-top: 20px" class="layui-form" action="/teacher/add" lay-filter="example"><div class="layui-form-item"><label class="layui-form-label">教师姓名</label><div class="layui-input-block"><input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">教师编号</label><div class="layui-input-block"><input type="text" name="account" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">密码框</label><div class="layui-input-block"><input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input"></div></div><button style="display: none" lay-submit id="tijiao" >立即提交</button></form>'
+ '</div>',
maxmin: true,
area: ['500px', '300px'],
btn: ['确定', '取消'],
yes: function (index, layero) {
//点击确认触发 iframe 内容中的按钮提交
var frm = layero.find('iframe').contents().find("#tijiao");
frm.click();
layer.close(index)
}
});
}
};
$('.toolbar').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</html>
智能推荐
【Matlab】三次样条插值实现_三次样条插值matlab-程序员宅基地
文章浏览阅读1.9w次，点赞20次，收藏168次。敲了一下午终于把代码敲完了，留念。文章目录题目：三次样条插值程序1：Gauss列主元消去法程序2：三次样条插值程序3：主函数及输入数据题目：三次样条插值程序1：Gauss列主元消去法function [X] = Gauss_elimination(A, Y) %% 参数初始化 matrix = [A, Y]; [n,m] = size(matrix); % 矩阵大小 l = zeros(n,n); % 比例系数矩阵 X =_三次样条插值matlab
（一）Thanos：引入Thanos 架构_thanos 查询慢-程序员宅基地
文章浏览阅读1.3k次，点赞3次，收藏5次。一、问题背景及解决方案问题1、Prometheus 本身只支持单机部署，没有自带支持集群部署，也就不支持高可用以及水平扩容，在大规模场景下，最让人关心的问题是它的存储空间也受限于单机磁盘容量，磁盘容量决定了单个 Prometheus 所能存储的数据量，数据量大小又取决于被采集服务的指标数量、服务数量、采集速率以及数据过期时间。在数据量大的情况下，我们可能就需要做很多取舍，比如丢弃不重要的指标、降低采集速率、设置较短的数据过期时间(默认只保留15天的数据，看不到比较久远的监控数据)。解决方案：①集中数据_thanos 查询慢
python识别图片中数字_Python图像处理之图片验证码识别-程序员宅基地
文章浏览阅读509次。在上一篇博客Python图像处理之图片文字识别（OCR）中我们介绍了在Python中如何利用Tesseract软件来识别图片中的英文与中文，本文将具体介绍如何在Python中利用Tesseract软件来识别验证码（数字加字母）。我们在网上浏览网页或注册账号时，会经常遇到验证码（CAPTCHA）,如下图：本文将具体介绍如何利用Python的图像处理模块pillow和OCR模块pytesseract来..._python识别图片中的字母和数字
8051单片机指令系统有哪几种寻址方式？_8051寻址方式-程序员宅基地
文章浏览阅读5.5k次。8051单片机指令系统有哪几种寻址方式？寄存器寻址、直接寻址、立即寻址、寄存器间接寻址、变址寻址、相对寻址、位寻址。寄存器寻址：以通用寄存器的内容为操作数的寻址方式。通用寄存器为A、B 、DPTR以及R0～R7 。例：CLR A ；A←0INC DPTR ；DPTR←DPTR+1 ADD R5，# 20H ；R5←#20H+R5。在8051单片机中，没有专门的通用硬件寄存器，而是把内部数据RAM区中0_8051寻址方式
Mentor Xpedition 过孔的制做以及如何把孔加入PCB板中_mentor 钻孔设置-程序员宅基地
文章浏览阅读216次。今天我们要讲的课题是Mentor过孔制做及PCB中过孔的加入，我们都知道，一个PCB不可能没有过孔，所以我们在布线前，我们要把过孔设置好。第一、下面我们用Mentor建立10/18的孔，打开Setup》Libraries》Padstack Editor 窗口，我们首先建立Pads，一定要注意单位的选择，下图的单位是mil.过孔做好的，我们直接保存下来，下面我们在mentor PCB中，加入过孔。利用上面做好的盘和孔，制做过孔，下面的是盖绿油的过孔。第二、建立过孔的孔径：选定单位，并调整孔符。_mentor 钻孔设置
实战｜智谱清言：与智能对话，让生活更精彩_智普轻言-程序员宅基地
文章浏览阅读1.8k次，点赞5次，收藏10次。在这个快节奏的时代，我们渴望更高效、便捷的生活。而智谱清言，正是这样一款能满足我们需求的生成式AI助手。它由北京智谱华章科技有限公司倾力打造，基于智谱AI自主研发的中英双语对话模型ChatGLM2，经过万亿字符的文本与代码预训练，并采用有监督微调技术，为用户提供智能化服务。下面，让我们一起探索智谱清言的五大功能特点，感受这款AI助手的魅力。_智普轻言
随便推点
Maven配置本地库加载ojdbc14-10.2.0.4.0.jar文件（公司项目下载时缺失或者自己建项目缺失均可这样做）...-程序员宅基地
文章浏览阅读202次。2019独角兽企业重金招聘Python工程师标准>>> ..._ojdbc14-10.2.0.4.0.jar
pytdx 获取板块指数_能否增加一个通过股票代码，板块指数代码获得中文名称的接口？...-程序员宅基地
文章浏览阅读424次。T0002/hq_cache/shex.tnfT0002/hq_cache/szex.tnf这个解码就是。/***************************************************股票代码列表和股票名称T0002/hq_cache/shex.tnfT0002/hq_cache/szex.tnf**************************************..._pytdx 查看指数
ARMv8/ARMv9架构入门到精通-学习方法_armv8从入门到精通-程序员宅基地
文章浏览阅读173次。想不想一夜暴富？拥有很多很多钱，买很多很多房，工作也不忙，无压力，不用亲自Coding和Debug，还有大把大把的时间在CSDN上挥霍… 如果真有此想法，那么想想就可以了。本博客/视频不会提供实现上述理想的方法，一点点边都不沾。本系列文章和视频重在为初学者指点迷津(大佬请绕行)，让您，尽快地成为行业的大牛，薪资翻个好几。_armv8从入门到精通
技术干货 | 一文弄懂差分隐私原理！-程序员宅基地
文章浏览阅读9.6k次，点赞21次，收藏175次。图1 随机算法在邻近数据集上的概率差分隐私有两个重要的优点：差分隐私假设攻击者能够获得除目标记录以外的所有其他记录信息，这些信息的总和可以理解为攻击者能够掌握的最大背景知识，在这个强大的假设下，差分隐私保护无需考虑攻击者所拥有的任何可能的背景知识。差分隐私建立在严格的数学定义上，提供了可量化评估的方法。因此差分隐私保护技术是一种公认的较为严格和健壮的隐私保护机制。_差分隐私
在myeclipse 中部署自己的第一个jsp成功_应用myeclipse开发工具创建第一个jsp项目在页面输出1~100的偶数和步数运行后-程序员宅基地
文章浏览阅读744次。以一个很简单的 Web 应用来说明使用 MyEclipse 的 Web 服务器配置，应用部署和调试过程。 一、准备开发工具 这里使用 Eclipse 3.1.2 和 MyEclipse4.1.1 ，当然 Java 通常都是用来开发网络应用的，那么 Web 服务器也就少不了了，这里使用tomcat5.0版本,当然如果你没有 J2SDK 那么所有的程序都没法编_应用myeclipse开发工具创建第一个jsp项目在页面输出1~100的偶数和步数运行后
python学习之——字典的遍历_请编程将以下内容创建为字典nc,并分别遍历并输出nc的键、nc的元素、nc的值-程序员宅基地
文章浏览阅读1k次。python学习之——字典的遍历1.例如：建立如下保存五个人，各自喜欢的编程语言的一个字典，我们要遍历这个字典中的每个键值对：favorite_languages={ 'jen':'python', 'sarah':'c', 'edward':'ruby', 'phil':'python', }#使用items（）返回字典中每个键-值对 for name_请编程将以下内容创建为字典nc,并分别遍历并输出nc的键、nc的元素、nc的值