layui表格

最新推荐文章于 2024-04-16 04:57:58 发布
最新推荐文章于 2024-04-16 04:57:58 发布
阅读量181 收藏 1
点赞数 1
分类专栏： layui学习 文章标签： layui layui表格 layui添加修改 layui删除批量删除 layui模糊查询
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38752165/article/details/84889019
版权

layui前端页面的一个实现,下述除查看功能均已实现
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述




<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">

		<script type="text/javascript" src="../../js/jquery-3.0.0.min.js"></script>
		<link rel="stylesheet" href="../../layui/layui/css/layui.css" />
		<script type="text/javascript" src="../../layui/layui/layui.all.js"></script>
		<script type="text/javascript" src="../../layui/layui/lay/modules/laypage.js"></script>
		<style type="text/css">
			.layui-table-cell {
				height: auto;
				line-height: 28px;
			}
		</style>
		<script>
			$(function() {

				layui.use('table', function() {
					var table = layui.table;

					//方法级渲染
					tableIns = table.render({
						elem: '#demo',
						url: 'http://localhost:8090/Product/queryProduct', //数据接口
						page: true, //开启分页
						cols: [
							[{
									checkbox: true,
									unresize: true, //自定义托拽列宽
								}, {
									field: 'productId',

									title: '商品id',
									width: 150,
								}, {
									field: 'productName',
									title: '商品名称',
									width: 150
								}, {
									field: 'prodectSell',
									title: '商品售价',
									width: 150,
									sort: true
								}, {
									field: 'prodectdRemark',
									title: '商品备注',
									width: 150
								}, {
									field: 'typeDataId',
									title: '商品分类',
									width: 177
								}, {
									field: 'recipeId',
									title: '原料表中配方id',
									width: 150,
									sort: true
								}, {
									field: 'prodectState',
									title: '是否下架',
									width: 150,
									sort: true
								}, {
									field: 'right',
									title: '操作',
									width: 300,
									toolbar: "#barDemo"
								}

							]
						]
					});
					//分页

				})

			})

			$(document).on('click', '#earsy', function() {
				/*reload: function() {*/
				var demoReload = $('#demoReload').val();
				console.log(demoReload);
				tableIns.reload({
					where: { //设定异步数据接口的额外参数，任意设
						materialName: demoReload
					},
					page: {
						curr: 1 //重新从第 1 页开始
					}
				});

				//}
			})
			var table = layui.table;

			function addMetrail() {
				/*	sessionStorage.clear();*/
				sessionStorage.removeItem("Metrailurlid");
				sessionStorage.removeItem("addwhthupdateMetrailurl");
				sessionStorage.setItem("addwhthupdateMetrailurl", "http://localhost:8090/Product/AddProduct");

				layui.use('layer', function() {
					var layer = layui.layer;

					layer.open({
						type: 1,
						title: '添加原材料信息',
						area: ['400px', '500px'],
						content: $('#divwin'),
						success: function(layero) {
							form.val("dateupadd", {
								"productId": "",
							})
						},
						cancel: function(index, layero) {
							/*layer.closeAll();*/
							$("#divwin").hide();
						}
					});

				});
			}

			function ads(data) {
				var ids = [];
				data.forEach(function(n, i) {
					ids.push(n.productId);
				});
				sessionStorage.setItem("ids", ids);
			}

			var table = layui.table;
			table.on('checkbox(demome)', function(obj) {
				var checkStatus = table.checkStatus('demo');
				data = checkStatus.data;
				ads(data);
				var ids = sessionStorage.getItem("ids");
				$(document).on('click', '#deletemes', function() {
					if(ids != null) {
						layer.confirm('确定要删除选中的用户吗？', function(index) {
							url = 'http://localhost:8090/Product/deleteproduct',
								$.post(url, {
										eventids: ids
									},
									function(r) {
										if(r > 0) {
											layer.msg("成功")
											tableIns.reload({});
											sessionStorage.removeItem("ids");
										} else {
											sessionStorage.removeItem("ids");
											layer.msg("失败")
										}
									}, "json");
						});

					}

				})

			});
			var form = layui.form;
			var table = layui.table;
			table.on('tool(demome)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"

				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if(layEvent === 'detail') { //查看

				} else if(layEvent === 'edit') {
					console.log(data.productId)
					sessionStorage.removeItem("addwhthupdateMetrailurl");
					sessionStorage.setItem("addwhthupdateMetrailurl", "http://localhost:8090/Product/AddProduct");
					$("#meterialId").val(data.productId);
					layui.use('layer', function() {
						var layer = layui.layer;
						layer.open({
							type: 1,
							title: '修改原材料信息',
							area: ['400px', '500px'],
							content: $('#divwin'),
							success: function(layero) {
								form.val("dateupadd", {
									"productId": data.productId,
									"productName": data.productName, // "name": "value"
									"prodectSell": data.prodectSell,
									"prodectdRemark": data.prodectdRemark,
									"typeDataId": data.typeDataId,
									"recipeId": data.recipeId,
									"prodectState": data.prodectState,
								})
							},
							cancel: function(index, layero) {
								/*layer.closeAll();*/
								$("#divwin").hide();
							}
						});

					});

				} else if(layEvent === 'del') {
					url = "http://localhost:8090/Product/deleteproduct"
					var layer = layui.layer;
					$.post(url, {
							productId: data.productId
						},
						function(r) {
							if(r > 0) {
								layer.msg("成功")
								tableIns.reload({});
							} else {
								layer.msg("失败")
							}
						}, "json");

				}
			});

			layui.use('form', function() {
				var form = layui.form;
				//监听提交
				var url = sessionStorage.getItem("addwhthupdateMetrailurl");

				form.on('submit(formDemo)', function(data) {
					let Met = $("#dateupadd").serialize();
					url: url
					$.post(url,
						Met,
						function(r) {
							if(r > 0) {
								layer.msg("成功")
								var index = layer.getFrameIndex(name); //获取窗口索引
								layer.closeAll();
								$("#divwin").hide();
								tableIns.reload({});
								//	window.parent.location.reload(); //刷新父页面
							} else {
								layer.msg("失败")
							}
						}, "json");
					return false;
				});
			});
		</script>
	</head>

	<body>
		<div class="demoTable">
			&nbsp; 搜索材料：
			<div class="layui-inline">
				<input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
			</div>
			<button class="layui-btn" data-type="reload" id="earsy">搜索</button>

			<button class="layui-btn layui-btn-normal layui-btn-radius" onclick="addMetrail()">添加</button>
			<button class="layui-btn layui-btn-normal layui-btn-radius" data-type="getCheckData" id="deletemes">批量删除</button>
		</div>

		<table class="layui-hide" id="demo" lay-filter="demome"></table>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
			<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
		</script>
		<div style="width: 400px; display: none;" id="divwin">
			<form class="layui-form" id="dateupadd" lay-filter="dateupadd">

				<div class="layui-form-item">
					<label class="layui-form-label">商品名称</label>
					<div class="layui-input-block">
						<input type="hidden" name="productId" id="meterialId" />
						<input id="hhh" style="width: 200px;" type="text" name="productName" required 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-block"><input style="width: 200px;" type="text" name="prodectSell" required 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-block"><input style="width: 200px;" type="text" name="prodectdRemark" required 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-block"><input style="width: 200px;" type="text" name="typeDataId" required lay-verify="required" placeholder="请输入商品分类" autocomplete="off" class="layui-input"></div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">原料表中配方id</label>
					<div class="layui-input-block"><input style="width: 200px;" type="text" name="recipeId" required lay-verify="required" placeholder="原料表中配方id" autocomplete="off" class="layui-input"></div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">是否下架</label>
					<div class="layui-input-block">
						<input type="checkbox" name="prodectState" title="是" value="1" checked>
						<!--<input style="width: 200px;" type="text" name="prodectState" required lay-verify="required" placeholder="是否下架" autocomplete="off" class="layui-input"></div>-->
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input type="hidden" value="0" name="isdelete" />
					</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>
	</body>

</html>
缺个萝莉对象，，，要niu一个吗
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Layui快速入门之第七节 表格
qq_61313896的博客
09-14 1488
Layui快速入门之第七节 表格
Layui-数据表格
chen2745213271的博客
12-09 3394
这次介绍layui的数据表格table，首先要使用数据表格需要加载table模块，其次数据表格有三种渲染使用方式，下面我将一一介绍 首先是方法渲染，使用layui配置的js方法进行参数的配置完成渲染，代码如下图 自动渲染，该渲染方式与方法渲染正好相反，方法渲染只需要在HTML里面写上一个容器然后在js里使用方法将参数配置好即可，而自动渲染则是在HTML写入参数配置之后在js里面加载table模块即可，下面使用图片展示代码 最后的渲染方式，转换静态表格，该渲染方式是在页面加载完成后中途如果需要.
LayUI数据表格的使用指南
最新发布
2401_84048586的博客
04-16 838
外链图片转存中…(img-GHsmSNtm-1713214664478)][外链图片转存中…(img-5pEPXpsS-1713214664478)][外链图片转存中…(img-ck32CslZ-1713214664478)]
前端框架Layui实现动态表格效果用户管理实例（对表格进行CRUD操作-附源码）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-14 5226
利用Layui搭建一个用户的管理系统实例完成CRUD操作，十分钟完成案例还不点进来看看嘛!!
LayUI---数据表格
Han0221的博客
06-18 1577
table表格数据
layui的数据表格，自定义添加按钮且可实现动态切换
L_Augety的博客
01-25 2044
layui的数据表格，自定义添加按钮且可实现动态切换，实现不同按钮替换操作
layui表格动态添加|layui表格可编辑
08-24
layui表格动态添加|layui表格可编辑动态添加
layui表格 可搜索过滤 可分页
03-25
layui表格是一款基于layui框架的前端组件，用于展示数据并提供搜索、过滤和分页功能。layui是中国流行的前端UI框架，以其简洁、优雅的代码风格和强大的功能受到开发者的喜爱。在“layui表格 可搜索过滤 可分页”这个...
解决layui表格的表头不滚动的问题
10-16
在网页开发中，Layui 是一款非常流行的前端框架，它提供了丰富的组件，包括表格（Table）等。然而，在实际应用中，用户可能会遇到表格在数据过多时表头不滚动的问题，这使得用户在浏览长表格时无法清晰地看到表头...
layui表格内容溢出的解决方法
10-16
今天小编就为大家分享一篇layui表格内容溢出的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui表格数据重载
12-29
本文实例为大家分享了layui表格数据重载，供大家参考，具体内容如下 html代码 <form class=layui-form action=> <div class=layui-form-item xss=removed> <div class=layui-inline> <input type=...
layui的表格table选中数据后更改本行的颜色
10-17
在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。
【前端】Layui动态数据表格拖动排序
qq_25285531的博客
09-01 5370
目的：使用Layui的数据表格，拖动行进行排序。使用插件：layui-soul-table 和 Layui结合Layui并参看官方教程，写的比较详细页比较简单。实现效果：可以拖动行进行排序，可以搜索。
layui数据表格多选框改为按顺序多选，记录选择的先后顺序
小范的技术博客
11-24 363
最近有一个需要让数据表格中的选中项按照选择的先后顺序进行选择，以便操作。因为数据表格使用的是layui的，就去网上取查阅资料看看有没有相关的案例，但找了一圈下来发现没有 就准备自己动手写实现一下。时间仓促，毕竟今天过后就放假了。先做一个第一版草草了事 节后具体再进行优化。
layui框架学习（38：数据表格_自定义单元格样式）
gc_2299的博客
08-23 1919
基于layui官网示例，学习数据表格模块中单元格样式的自定义方式
使用Layui制作的简单数据表格
Pcccy的博客
06-18 1279
目录1、创建2、后台编写3、前端编写成果图：表格和分页模板来自Layui前端框架文档。先使用MybatisPlusGenerator 自动生成实体类、mapper、service、controller类。一些注解解释： @NoArgsConstructor：无参构造方法 @AllArgsConstructor：有参构造方法 @Data：get，set方法 @Accessors(chain = true)：链式访问 @SuppressWarnings("all")：错误信息
【前端】Layui的表格常用功能，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件
小5聊的博客
03-27 4942
最近在维护老系统，尽量使用过layui，但是时间久了，总会忘记一些方法的使用。 因此通过本篇文章大概记录常用的功能方法，比如，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件等
layui-数据表格的使用
dropLin的博客
05-30 1564
表格数据分动态和静态的layui提供了个模块组件，可以快速开发表格数据显示beforeparseDatadone。
layui框架学习（39：数据表格_主要基础参数）
gc_2299的博客
08-24 613
学习layui的数据表格模块中主要基础参数的用法
layui表格宽度自适应
09-19
在Layui表格中，如果需要实现宽度自适应，可以使用两种方式进行设置。 一种是通过设置表格容器的宽度为百分比，比如设置宽度为100%。这样表格容器会根据父容器的宽度进行自适应调整，从而实现表格宽度自适应的效果。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值