@[toc]
layui-数据表格的实现
话不多说，看效果
1. 下载layui的资源包
2.导入到项目中
3.新建web项目
3.1 项目中layui的引入
主要引入两个东西分别是css和js
css的引入
（前端展示不涉及数据库数据）
{
"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": "重庆"
}
]
}
4 数据表格的实现
4.1注意事项
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的属性。
4.2代码实现
<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'
} ] ]
});
5. layui的表格中的监听事件
5.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;
};
});
5.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("修改")
}
});
6. 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';
}
})
}
7. 源码的实现
<%@ 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>
好了，今天的分享就到这里了，点赞支持一下吧
