layui-form+open+table

最新推荐文章于 2024-02-29 16:16:31 发布
最新推荐文章于 2024-02-29 16:16:31 发布
阅读量385 收藏
点赞数
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44342481/article/details/114834678
版权

重点在于把open的提交按钮变为与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">
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<form id="form" class="layui-form" action="" lay-filter="example" style="display: none;">
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-inline">
					<input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入姓名" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">账户</label>
				<div class="layui-inline">
					<input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入姓名" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-inline">
					<input type="text" name="password" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
				</div>
			</div>



			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-inline">
					<input type="radio" name="sex" value="1" title="男" checked="">
					<div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i>
					</div>
					<input type="radio" name="sex" value="0" title="女">
					<div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">出生日期</label>
				<div class="layui-input-inline">
					<input type="text" name="birthday" readonly="readonly" id="birthday" lay-verify="date" placeholder="yyyy-MM-dd" 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="createTime" readonly="readonly" id="createTime" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off"
					 class="layui-input">
				</div>
			</div>

<!-- 			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn  " lay-submit="" lay-filter="demo1">立即提交</button>
				</div>
			</div> -->
		</form>



		<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>
  </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>
</script>


		<script src="layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

		<script>
			layui.use(['table', 'layer', 'jquery', 'laydate', 'form'], function() {
				var table = layui.table;
				var layer = layui.layer;
				var $ = layui.jquery;
				var laydate = layui.laydate;
				var form = layui.form;
				//日期
				laydate.render({
					elem: '#birthday'
				});
				laydate.render({
					elem: '#createTime'
				});
				//温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
				//详见：https://www.layui.com/doc/modules/table.html#totalRow
				table.render({
					elem: '#test',
					url: 'data.json',
					toolbar: '#toolbarDemo',
					title: '用户数据表',
					totalRow: true,
					cols: [
						[{
							type: 'checkbox',
							fixed: 'left'
						}, {
							field: 'id',
							title: 'ID',
							fixed: 'left',
							unresize: true,
							sort: true,
							totalRowText: '合计'
						}, {
							field: 'name',
							title: '用户名',
							edit: 'text'
						}, {
							field: 'username',
							title: '账户',
							edit: 'text'
						}, {
							field: 'password',
							title: '密码',
							sort: true
						}, {
							field: 'sex',
							title: '性别',
							width: 80,
							edit: 'text',
							sort: true,
							templet: function(d) {
								return d.sex == 1 ? "男" : "女"
							}
						}, {
							field: 'age',
							title: '年龄',
							sort: true,
							totalRow: true
						}, {
							field: 'birthday',
							title: '生日',
						}, {
							field: 'createTime',
							title: '创建时间',
						}, {
							fixed: 'right',
							title: '操作',
							toolbar: '#barDemo',
						}]
					],
					page: 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;
					//console.log(obj)
					if (obj.event === 'del') {
						layer.confirm('真的删除行么', function(index) {
							obj.del();
							layer.close(index);
						});
					} else if (obj.event === 'edit') {
						layer.open({
							title: "用户信息编辑",
							type: 1,
							content: $("#form"),
							area: ['400px', '450px'],
							btn: ["提交", "取消"],
							success: function(layeror, index) {
								indexaa = index;
								form.val("example", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
									name: data.name, // "name": "value"
									username: data.username,
									password: data.password,
									sex: data.sex,
									age: data.age,
									birthday: data.birthday,
									createTime: data.createTime
								});
								//添加样式，与要提交的form表单的样式一样。
								layeror.addClass("layui-form")
								//添加lay-submit属性才能对提交事件进行处理
								layeror.find(".layui-layer-btn0").attr("lay-filter", "demo1").attr("lay-submit", "");
							},
							yes: function(index, layeror) {
								//对那个按钮进行提交
								form.on("submit(demo1)", function(data) {
									obj.update({
										name: data.field.name,
										username: data.field.username,
										password: data.field.password,
										sex: data.field.sex,
										age: data.field.age,
										birthday: data.field.birthday,
										creatTime: data.field.creatTime
									})
									layer.close(indexaa);
									return false;
								})
							}
						})
					}
				});
			});
		</script>

	</body>
</html>
爱窦
关注
专栏目录
layui 弹出层中显示table 表格
qq_43303896的博客
04-28 1万+
html: html渲染的table <table id="JobTable" lay-filter="JobTable"></table> layui弹框渲染的table <#-- 弹框的table--> <div id="openProductBox" style="displa...
bootstrap-table+bootstrap+font-awesome+layui+jquery+popper+sweetalert2+layer综合应用+图+代码
userzhaopan的博客
06-10 453
前端综合应用 bootstrap-table 表格神器 bootstrap.min.js 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。 font-awesome.min.css 基于css框架的网页字体图标库。 layui.css 国产开源前端UI，简单易上手，简洁美观。 jquery-3.4.1.min.js 轻量级的、兼容多浏览器的JavaScript库。 popper.min.js 轻量级的提示插件(弹层（框）)。 sweeta
LayUi中如何将Table单条数据展示到Open里面，进行编辑
guochao6531的博客
08-17 747
1、先在父页，也就是展示Table的页面 在这边直接粘贴layui.open代码，现在的问题就是渲染问题，在子页form.render()没有起效，后续看下。 table.on('tool(这边加下控件ID)', function(obj){ var data = obj.data; if(obj.event === 'edit'){ ayer.ope...
layui open 打开弹出层 ，加载form表单
yyd6976的博客
04-19 2214
你的时间选择器肯定是在弹层之前初始化的！ 所以 在 layer.open() 之前初始化 laydate.render({ elem: '#executionDeadline' ,range: true ,done: function(value, date){} ...
layui表格（table）操作与form操作
陪你度过漫长的岁月
04-24 2万+
layui表格操作与form表单操作（layui-v2.2.45 ） table表格操作 html代码(注意里面的lay-filter) 有兴趣的朋友可以看看我之前写的layui前后台交互 &lt;link rel="stylesheet" href="static/layui/css/layui.css" media="all" /&gt; &lt;script type="text/...
Layui open()弹窗中的表单实现Layui自带的验证功能
程序就是世界
04-02 321
【代码】Layui open()弹窗中的表单实现Layui自带的验证功能。
LayUi-----------用户管理
qq_62331938的博客
07-21 1243
上一次我们分享了layui的动态添加选项卡，这次要分享的内容是基于上一次的动态选项卡，在选项卡中使用layui完成用户管理功能。
layui使用form表单实现post请求页面跳转的方法
10-16
本文将详细介绍如何使用layui的form表单实现POST请求并进行页面跳转，以确保数据安全且避免信息泄露。 通常，通过`window.location.href`的方式添加参数进行页面跳转会将数据暴露在URL中，这可能带来安全风险。为了...
layui列表分页+添加修改！！！
05-13
var index = layui.layer.open({ type: 2 //layer内置的iframe层类型 ,title: '添加信息' ,content: 'add.html' //假设这是添加表单的页面 ,area: ['400px', '300px'] ,success: function(layero, index){ ...
layui layer select 选择被遮挡的解决方法
01-21
在编程的时候, layer弹窗中的select 经常会遇到被遮挡的情况： 解决方法：在页面里面找到...$(“.layui-table-body”).css(‘overflow’,’visible’); $(“.layui-table-box”).css(‘overflow’,’visible’); $(“.
layer.open提交子页面的form和layedit文本编辑内容的方法
12-13
主要 用到layer 自带的取子页面dom的方法 layer.getChildFrame(),在父页面对子页面dom进行操作 js代码:在layer.open 中 btn yes function(index, layero){ }中 获取子页面的dom 进行操作： $("a[name='editNews']").click(function() { layer.open({ type: 2, title: '编辑', shadeClose: true, shade: 0.8, area: ['99%', '99%'], offset
layui的使用（table/form）——layui踩坑记录
yehaocheng520的博客
03-31 1810
公司之前的老系统是前后端不分离的MVC模式，是基于Layui开发的。 1.引入layui 引入文件的具体路径需要根据实际项目来。 <link href="~/Content/plugins/layui-v2.4.3/layui/css/layui.css" rel="stylesheet" /> <script src="~/Content/plugins/layui-v2.4.3/layui/layui.js"></script> 2. 页面功能分析 页面结构如上图
layui的使用（table/form）——layui踩坑记录2
yehaocheng520的博客
03-31 466
表格的重载 //搜索表格 这个是接着上一篇文章写的 function searchTable() { console.log(111); var index = layer.load(1); table.reload('demoId', { //这个地方的demoId就是table.render时定义的id page: { curr: 1 //重新从第 1 页开始 } , loading: true
layui 中open、 table等配置--jquery事件绑定方式
joan_yb的博客
05-10 1997
layui open配置及jquery绑定
form表单嵌表格
m0_67216770的博客
06-24 2873
form嵌套表单 做数据填写 动态校验 添加行 删除行 需求是做一个表单嵌套表格，动态添加行，字段进行校验，能拖拽，能删除行
layui 结合form,table实现全选,反选
qq_26282869的博客
06-25 3941
&lt;div class="layui-form"&gt; &lt;table class="layui-table"&gt; &lt;thead&gt; &lt;tr&gt; &lt;td&gt; &lt;input type="checkbox" name="&quo
Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染，不可点击的解决办法
热门推荐
飞起来的小猪的博客
12-05 3万+
Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染，不可点击的解决办法
layUI中table和form,及layer的综合应用(备份)
最新发布
weixin_46630678的博客
02-29 477
【代码】layUI中table和form,及layer的综合应用(备份)
原生JS+layui项目笔记（一）【layer弹出框与form、table】
sinat_38011533的博客
08-09 1556
一、准备文件 1. html文件引入 <script type="text/javascript" src="./layui/layui.js"></script> <script type="text/javascript" src="./xxx/xxxx.js"></script> 2.js文件引入layui的各种组件 layui.use(['jquery',layer','table','form','laytpl','laydate'].
springboot+fullcalendar+layui增删改查完整案例
05-16
以下是基于Spring Boot、FullCalendar和Layui的增删改查完整案例。 1. 创建Spring Boot项目 首先，我们需要创建一个Spring Boot项目。你可以使用Spring Initializr，也可以手动创建项目。 2. 添加依赖 在pom.xml文件中添加以下依赖： ``` <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.6.0</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>fullcalendar</artifactId> <version>3.10.2</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>layui</artifactId> <version>2.5.7</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> </dependencies> ``` 3. 创建实体类 创建一个实体类Event，用于表示日历事件： ``` @Entity @Table(name = "event") public class Event { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String title; private Date start; private Date end; private String color; private String description; // getter and setter } ``` 4. 创建Repository 创建一个Repository类EventRepository，用于与数据库进行交互： ``` @Repository public interface EventRepository extends JpaRepository<Event, Long> { } ``` 5. 创建Controller 创建一个Controller类EventController，用于处理HTTP请求： ``` @Controller public class EventController { @Autowired private EventRepository eventRepository; @GetMapping("/") public String index() { return "index"; } @GetMapping("/events") @ResponseBody public List<Event> getEvents() { return eventRepository.findAll(); } @PostMapping("/events") @ResponseBody public Event addEvent(@RequestBody Event event) { return eventRepository.save(event); } @PutMapping("/events/{id}") @ResponseBody public Event updateEvent(@PathVariable Long id, @RequestBody Event event) { event.setId(id); return eventRepository.save(event); } @DeleteMapping("/events/{id}") @ResponseBody public void deleteEvent(@PathVariable Long id) { eventRepository.deleteById(id); } } ``` 6. 创建Thymeleaf模板 创建一个Thymeleaf模板index.html，用于显示日历和表单： ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>FullCalendar + Layui Demo</title> <link href="/webjars/fullcalendar/3.10.2/fullcalendar.min.css" rel="stylesheet"/> <link href="/webjars/layui/2.5.7/css/layui.css" rel="stylesheet"/> <script src="/webjars/jquery/3.6.0/jquery.min.js"></script> <script src="/webjars/fullcalendar/3.10.2/fullcalendar.min.js"></script> <script src="/webjars/layui/2.5.7/layui.all.js"></script> <script th:inline="javascript"> $(document).ready(function () { var calendar = $('#calendar').fullCalendar({ height: 600, editable: true, eventLimit: true, events: { url: '/events', error: function () { alert('there was an error while fetching events!'); } }, eventDrop: function (event, delta, revertFunc) { updateEvent(event); }, eventResize: function (event, delta, revertFunc) { updateEvent(event); }, eventClick: function (event, jsEvent, view) { layer.open({ type: 1, area: ['500px', '400px'], title: '编辑事件', content: $('#eventForm'), btn: ['保存', '取消'], yes: function (index, layero) { var title = $('#title').val(); var start = $('#start').val(); var end = $('#end').val(); var color = $('#color').val(); var description = $('#description').val(); var eventData; if (title) { eventData = { title: title, start: start, end: end, color: color, description: description }; updateEvent(eventData, event.id); calendar.fullCalendar('renderEvent', eventData, true); } else { alert('请填写标题'); return false; } layer.close(index); } }); $('#title').val(event.title); $('#start').val(moment(event.start).format('YYYY-MM-DD HH:mm:ss')); $('#end').val(moment(event.end).format('YYYY-MM-DD HH:mm:ss')); $('#color').val(event.color); $('#description').val(event.description); } }); $('#addEvent').on('click', function () { layer.open({ type: 1, area: ['500px', '400px'], title: '添加事件', content: $('#eventForm'), btn: ['保存', '取消'], yes: function (index, layero) { var title = $('#title').val(); var start = $('#start').val(); var end = $('#end').val(); var color = $('#color').val(); var description = $('#description').val(); var eventData; if (title) { eventData = { title: title, start: start, end: end, color: color, description: description }; $.ajax({ url: '/events', type: 'POST', contentType: 'application/json', data: JSON.stringify(eventData), success: function (event) { eventData.id = event.id; calendar.fullCalendar('renderEvent', eventData, true); } }); } else { alert('请填写标题'); return false; } layer.close(index); } }); }); function updateEvent(eventData, eventId) { if (eventId) { $.ajax({ url: '/events/' + eventId, type: 'PUT', contentType: 'application/json', data: JSON.stringify(eventData), success: function () { calendar.fullCalendar('refetchEvents'); } }); } else { $.ajax({ url: '/events', type: 'POST', contentType: 'application/json', data: JSON.stringify(eventData), success: function (event) { eventData.id = event.id; calendar.fullCalendar('renderEvent', eventData, true); } }); } } }); </script> </head> <body> <div id="calendar"></div> <div id="eventForm" style="display: none;"> <div class="layui-form-item"> <label class="layui-form-label">标题</label> <div class="layui-input-inline"> <input type="text" id="title" name="title" lay-verify="required" 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" id="start" name="start" lay-verify="required" 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" id="end" name="end" lay-verify="required" 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="color" id="color" name="color" value="#3788d8" class="layui-input"/> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">备注</label> <div class="layui-input-block"> <textarea id="description" name="description" placeholder="请输入备注" class="layui-textarea"></textarea> </div> </div> </div> <div class="layui-btn-group"> <button class="layui-btn" id="addEvent">添加事件</button> </div> </body> </html> ``` 7. 运行项目 运行项目，访问http://localhost:8080，即可看到一个包含日历和表单的页面。 现在，你可以添加、编辑和删除日历事件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值