layui-数据表格的实现

话不多说，看效果

1. 下载layui的资源包
https://gitee.com/sentsin/layui?_from=gitee_search
2.导入到项目中

3.新建web项目

3.1 项目中layui的引入，主要引入两个东西分别是css和js

css的引入

js的引入

3.2 建立json文件（前端展示不涉及数据库数据）

{
	"code": 0,
	"msg": "",
	"count": 1000,
	"data": [
		{
			"id": 10000,
			"username": "user-0",
			"sex": "男",
			"city": "武汉"
			
		},
		{
			"id": 10001,
			"username": "user-1",
			"sex": "女",
			"city": "兰州"
			
		},
		{
			"id": 10002,
			"username": "user-2",
			"sex": "男",
			"city": "天津"
			
		},
		{
			"id": 10003,
			"username": "user-3",
			"sex": "男",
			"city": "上海"
			
		},
		{
			"id": 10004,
			"username": "user-4",
			"sex": "女",
			"city": "重庆"
			
		}
		]
}

3.2数据表格的实现

注意事项

1.在table标签中id的值必须要和script中elem 的值一致。
2.layui.use([ 'table', 'laydate','jquery','layer','form' ], function() {
			var $=layui.jquery;
			var table = layui.table;
			var form=layui.form;
			var layer=layui.layer;
			var laydate = layui.laydate;
			必须要指定用到的layui的属性。

代码实现

	<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
	<script>
		layui.use([ 'table', 'laydate','jquery','layer','form' ], function() {
			var $=layui.jquery;
			var table = layui.table;
			var form=layui.form;
			var layer=layui.layer;
			var laydate = layui.laydate;
			//数据表格
		var tableIns=table.render({
				elem : '#userTable' //渲染的目标对象（table中id的值）
				,
				url : 'resourse/json/person.json' //数据接口（json的数据的获取）
				,
				title : '数据表格' //数据表格的标题
				,
				page : true //开启分页
				,
				toolbar : '#userToolBar'//表格的工具条
				,
				defaultToolbar : [ 'filter', 'print', 'exports' ],
				cols : [ [ //表头
				{
					type : 'checkbox',
					fixed : 'left'
				} //表格的复选框 LAY_CHECKED 表示是否选中了复选框
				, {
					type : 'numbers'
				} //表格的数据配列
				, {
					field : 'id',
					title : 'ID',
					sort : true //sort 是否排序布尔值
				} 
				, {
					field : 'username',
					title : '用户名'
				}, {
					field : 'sex',
					title : '性别'
				}, {
					field : 'city',
					title : '城市',
					edit : true
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#userBar',
					width : 200,
					align : 'center'
				} ] ]
			});

3.3 layui的表格中的监听事件

3.3.1头部工具栏

input中的id要与表单中的id值一致。
lay-verify="required"验证输入的类型 例如邮件则是lay-verify="required|Emile"
lay-submit=''用于验证输入的值是否为空，若为空则提醒用户输入
头部工具的事件要事先在script中定义好
	var tableIns=table.render({
				elem : '#userTable' //渲染的目标对象
				,
				url : 'resourse/json/person.json' //数据接口
				,
				title : '数据表格' //数据表格的标题
				,
				page : true //开启分页
				,
				toolbar : '#userToolBar'//表格的工具条
				,
				defaultToolbar : [ 'filter', 'print', 'exports' ],

<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px">
		<legend>查询条件</legend>
		<form class="layui-form" action="" method="post">
			<div class="layui-form-item">
				<div class="layui-line">
					<label class="layui-form-label">编号</label>
					<div class="layui-input-inline">
						<input type="text" name="id" placeholder="请输入标题"
							autocomplete="off" class="layui-input">
						<!-- required lay-verify="required"验证 -->
					</div>
				</div>
				<div class="layui-line">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline">
						<input type="text" name="username" placeholder="请输入标题"
							autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<div class="layui-input-block">
					<button
						class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search"
						id="doSearch">查询</button>
					<button type="reset"
						class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
						lay-filter="submit">重置</button>
				</div>
			</div>
		</form>
	</fieldset>

//监听头部事件

			var tableTns = table.on("toolbar(userTable)", function(obj) {
				switch (obj.event) {
				case 'add':
					openAddUser(); //对应的事件
					break;
				case 'delete':
					layer.msg('删除');
					break;
				case 'update':
					layer.msg('编辑');
					break;
				};
			});
			

3.3.2工具条监听事件

工具条中的选项在div中样式中要写style="display: none;"
按钮的类型以及大小
layui-btn-lg大型
layui-btn-sm小型
layui-btn-xs迷你型
layui-btn-warm暖型
layui-btn-danger警告类型
在表格数据中添加
{fixed:'right',title:'操作',toolbar:'#userBar',width:170,align:'center'}

<div id="userBar" style="display: none;">
		<a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
		 <a class="layui-btn layui-btn-xs" lay-event="del">删除</a> 
		 <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="update">修改</a>
	</div>

table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    if(layEvent === 'edit'){ //查看
      layer.msg("修改")
    } else if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === 'update'){ //编辑
    	 layer.msg("修改")
    }
  });

3.4 layui的表格中弹出层

<div style="display: none; padding: 20px;" id="saveOrupdate">
		<form action="" class="layui-form" lay-filter="dateFrm" id="dateFrm">
			<div class="layui-form-item">
				<div class="layui-line">
					<label class="layui-form-label">编号</label>
					<div class="layui-input-inline">
						<input type="text" name="id" lay-verify="required"
							placeholder="请输入标题" autocomplete="off" class="layui-input">
						<!-- required lay-verify="required"验证 -->
					</div>
				</div>
				<div class="layui-line">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline">
						<input type="text" name="username" lay-verify="required"
							placeholder="请输入标题" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-line">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-inline">
						<input type="radio" name="sex" value="男" title="男" checked="checked">
						<input type="radio" name="sex" value="女" title="女">
						<!-- required lay-verify="required"验证 -->
					</div>
				</div>
				<div class="layui-line">
					<label class="layui-form-label">城市</label>
					<div class="layui-input-inline">
						<input type="text" name="city" lay-verify="required"
							placeholder="请输入标题" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<div class="layui-input-block">
					<button
						class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-submit=''
						lay-filter="doSubmit">提交</button>
						<!-- lay-submit=''判断提交的form表单是否为空 -->
					<button type="reset"
						class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
						lay-filter="submit">重置</button>
				</div>
			</div>
		</form>
	</div>

openAddUser在监听事件中写的方法
content:$("#saveOrupdate")中注意必须要在layui的script中定义jquery
修改的弹出层中方法中的data值为传值
success:function(index){
						form.val('dateFrm',data); 
						url='date/update/updateUser';
					}
成功回调后把值放到弹出层的input中，dateFrm为绑定的事件。

var url;
			var mainIndex;
			//弹出层方法 添加页面
			function openAddUser() {
			  mainIndex=layer.open({
					type:1,
					title:'添加用户',
					content:$("#saveOrupdate"),
					area:['700px','300px'],
					success:function(index){
						//清空数据表格
						$('#dateFrm')[0].reset();
						url='da  ta/add/addUser';
					}
				})
			}
			//保存
			form.on("submit(doSubmit)",function(obj){
				//序列化表单数据
				var param=$('#dateFrm').serialize();
				alert(param);
				$.post(url,param,function(obj){
					layer.msg("成功");
					//关闭弹出层
					layer.close(mainIndex);
					//刷新数据表格
					ltableIns.reload(); //回调表格数据
				})
				
			})
			//弹出层方法 修改页面
			function openUpdateUser(data) {
				  mainIndex=layer.open({ 
					type:1,
					title:'修改用户',
					content:$("#saveOrupdate"),
					area:['700px','300px'],
					success:function(index){
						form.val('dateFrm',data); 
						url='date/update/updateUser';
					}
				})
			}

3.5 源码的实现

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table综合案例</title>
<link rel="stylesheet" href="resourse/layui/css/layui.css" media="all">
</head>
<body>
	<!-- 搜索条件 -->
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px">
		<legend>查询条件</legend>
		<form class="layui-form" action="" method="post">
			<div class="layui-form-item">
				<div class="layui-line">
					<label class="layui-form-label">编号</label>
					<div class="layui-input-inline">
						<input type="text" name="id" placeholder="请输入标题"
							autocomplete="off" class="layui-input">
						<!-- required lay-verify="required"验证 -->
					</div>
				</div>
				<div class="layui-line">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline">
						<input type="text" name="username" placeholder="请输入标题"
							autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-line">
					<label class="layui-form-label">开始时间</label>
					<div class="layui-input-inline">
						<input type="text" name="startTime" id="startTime"
							readonly="readonly" placeholder="请输入标题" autocomplete="off"
							class="layui-input">
						<!-- required lay-verify="required"验证 -->
					</div>
				</div>
				<div class="layui-line">
					<label class="layui-form-label">结束时间</label>
					<!--readonly="readonly"时间选择器  -->
					<div class="layui-input-inline">
						<input type="text" name="endTime" id="endTime" readonly="readonly"
							placeholder="请输入标题" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<div class="layui-input-block">
					<button
						class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search"
						id="doSearch">查询</button>
					<button type="reset"
						class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
						lay-filter="submit">重置</button>
				</div>
			</div>
		</form>
	</fieldset>
	<!-- 搜索结束 -->

	<!-- 数据表格开始 -->
	<div class="layui-btn-container" style="display: none;"
		id="userToolBar">
		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
		<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
	</div>
	<div id="userBar" style="display: none;">
		<a class="layui-btn layui-btn-xs" lay-event="edit">查看</a> <a
			class="layui-btn layui-btn-xs" lay-event="del">删除</a> <a
			class="layui-btn layui-btn-xs layui-btn-danger"  lay-event="update">修改</a>
	</div>
	<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
	<!-- 数据表格结束 -->

	<!-- 添加和修改的弹出层代码-->
	<div style="display: none; padding: 20px;" id="saveOrupdate">
		<form action="" class="layui-form" lay-filter="dateFrm" id="dateFrm">
			<div class="layui-form-item">
				<div class="layui-line">
					<label class="layui-form-label">编号</label>
					<div class="layui-input-inline">
						<input type="text" name="id" lay-verify="required"
							placeholder="请输入标题" autocomplete="off" class="layui-input">
						<!-- required lay-verify="required"验证 -->
					</div>
				</div>
				<div class="layui-line">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline">
						<input type="text" name="username" lay-verify="required"
							placeholder="请输入标题" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-line">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-inline">
						<input type="radio" name="sex" value="男" title="男" checked="checked">
						<input type="radio" name="sex" value="女" title="女">
						<!-- required lay-verify="required"验证 -->
					</div>
				</div>
				<div class="layui-line">
					<label class="layui-form-label">城市</label>
					<div class="layui-input-inline">
						<input type="text" name="city" lay-verify="required"
							placeholder="请输入标题" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<div class="layui-input-block">
					<button
						class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-submit=''
						lay-filter="doSubmit">提交</button>
						<!-- lay-submit=''判断提交的form表单是否为空 -->
					<button type="reset"
						class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh "
						lay-filter="submit">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 添加和修改的弹出层代码-->
	<script src="resourse/layui/layui.js"></script>
	<script>
		layui.use([ 'table', 'laydate','jquery','layer','form' ], function() {
			var $=layui.jquery;
			var table = layui.table;
			var form=layui.form;
			var layer=layui.layer;
			var laydate = layui.laydate;

			//绑定时间选择器
			laydate.render({
				elem : '#startTime'
			})
			laydate.render({
				elem : '#endTime'
			})

			//数据表格
		var tableIns=table.render({
				elem : '#userTable' //渲染的目标对象
				,
				url : 'resourse/json/person.json' //数据接口
				,
				title : '数据表格' //数据表格的标题
				,
				page : true //开启分页
				,
				toolbar : '#userToolBar'//表格的工具条
				,
				defaultToolbar : [ 'filter', 'print', 'exports' ],
				cols : [ [ //表头
				{
					type : 'checkbox',
					fixed : 'left'
				} //表格的复选框 LAY_CHECKED 表示是否选中了复选框
				, {
					type : 'numbers'
				} //表格的数据配列
				, {
					field : 'id',
					title : 'ID',
					sort : true
				} //sort 是否排序布尔值
				, {
					field : 'username',
					title : '用户名'
				}, {
					field : 'sex',
					title : '性别'
				}, {
					field : 'city',
					title : '城市',
					edit : true
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#userBar',
					width : 200,
					align : 'center'
				} ] ]
			});
			//监听头部事件
			var tableTns = table.on("toolbar(userTable)", function(obj) {
				switch (obj.event) {
				case 'add':
					openAddUser();
					break;
				case 'delete':
					layer.msg('删除');
					break;
				case 'update':
					layer.msg('编辑');
					break;
				};
			});
			//工具条事件
			table.on('tool(userTable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				if (layEvent === 'edit') { //查看
					layer.msg("修改")
				} else if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function(index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
					});
				} else if (layEvent === 'update') { //编辑
					openUpdateUser(data);
				    console.log(data);
				}
			});
			
			var url;
			var mainIndex;
			//弹出层方法 添加页面
			function openAddUser() {
			  mainIndex=layer.open({
					type:1,
					title:'添加用户',
					content:$("#saveOrupdate"),
					area:['700px','300px'],
					success:function(index){
						//清空数据表格
						$('#dateFrm')[0].reset();
						url='da  ta/add/addUser';
					}
				})
			}
			//保存
			form.on("submit(doSubmit)",function(obj){
				//序列化表单数据
				var param=$('#dateFrm').serialize();
				alert(param);
				$.post(url,param,function(obj){
					layer.msg("成功");
					//关闭弹出层
					layer.close(mainIndex);
					//刷新数据表格
					ltableIns.reload(); //回调表格数据
				})
				
			})
			//弹出层方法 修改页面
			function openUpdateUser(data) {
				  mainIndex=layer.open({ 
					type:1,
					title:'修改用户',
					content:$("#saveOrupdate"),
					area:['700px','300px'],
					success:function(index){
						form.val('dateFrm',data); 
						url='date/update/updateUser';
					}
				})
			}

		});
	</script>
</body>
</html>

好了，今天的分享就到这里了，点赞支持一下吧