Layui 弹出弹出层提交表单
Layui
官网:表单组件 form - Layui 文档
引入Layiu css、js
<link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.10/css/layui.css" rel="stylesheet">
<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>
<!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">
<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="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,
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,
title: '编辑留言',
content: '/teacher/edit' + data.id,
maxmin: true,
area: ['500px', '300px'],
btn: ['确定', '取消'],
yes: function (index, layero) {
var frm = layero.find('iframe').contents().find("#lay-form-submit");
frm.click();
}
});
} else {
layer.open({
type: 2,
title: '详细信息',
content: '/teacher/detail' + data.id,
maxmin: true,
area: ['500px', '300px'],
btn: ['确定', '取消'],
yes: function (index, layero) {
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
}
});
});
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: 1,
title: '增加',
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) {
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>