直接上代码吧！
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>数据表格</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title"
style="margin-top: 20px;">
<legend>查询</legend>
</fieldset>
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">编号</label>
<div class="layui-input-inline">
<input name="id" class="layui-input" type="text" autocomplete="off">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input name="username" class="layui-input" type="text"
autocomplete="off">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input name="email" class="layui-input" type="text"
autocomplete="off">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input name="startTime" id="startTime" class="layui-input"
type="text" autocomplete="off" readonly="readonly">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间</label>
<div class="layui-input-inline">
<input name="endTime" id="endTime" class="layui-input" type="text"
autocomplete="off" readonly="readonly">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input name="sex" title="男" type="radio" checked="" value="1">
<input name="sex" title="女" type="radio" value="0">
</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"
type="button" lay-filter="demo1" id="doSearch">查询</button>
<button
class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh"
type="reset">重置</button>
</div>
</div>
</form>
<!-- 搜索条件结束 -->
<!-- 数据表格开始 -->
<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
<div style="display: none;" id="userToolBar">
<button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
<button type="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"
lay-filter="doSearch" lay-submit="">编辑</a> <a
class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
<!-- 数据表格结束 -->
<!-- 添加和修改的弹出层开始 -->
<div style="display: none; padding: 20px" id="saveOrUpadteDiv">
<form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm">
<div class="layui-inline">
<label class="layui-form-label">编号</label>
<div class="layui-input-inline">
<input name="id" class="layui-input" type="text" autocomplete="off"
lay-verify="required">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input name="username" class="layui-input" type="text"
autocomplete="off">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<input name="city" class="layui-input" type="text"
autocomplete="off" lay-verify="required">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input name="email" class="layui-input" type="text"
autocomplete="off" lay-verify="required|email">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input name="sex" title="男" type="radio" checked="" value="1">
<input name="sex" title="女" type="radio" value="0">
</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-heart-fill"
type="button" lay-filter="doSearch" lay-submit="">保存</button>
<button
class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-heart"
type="reset">重置</button>
</div>
</div>
</form>
</div>
<!-- 添加和修改的弹出层结束 -->
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use([ 'table', 'jquery', 'layer', 'form', 'laydate' ],
function() {
var table = layui.table;
var $ = layui.jquery;
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 : 'resources/json/persions.json' //数据接口
,
title : '用户数据表' //数据导出时的标题
/* ,toolbar:"<div>hsy</div>" */
,
toolbar : "#userToolBar" //表头工具条
,
defaultToolbar : [ 'filter', 'print', 'exports' ]
/* ,width:500 */
/* ,height:300 *//* 容器的宽高，自己试一试 */
,
height : 'full-300'
//,cellMinWidth:100 //设置 列的最小的默认宽度
,
done : function(res, curr, count) {
/* alert(res);//后台url返回的json字符串
alert(curr);//当前页
alert(count);//数据总条数 */
},
page : true //是否启用分页
,
cols : [ [ //列表数据
{
type : 'checkbox',
fixed : 'left'
}, {
field : 'id',
title : 'ID',
sort : true,
align : 'center'
}, {
field : 'username',
title : '用户名',
edit : true,
align : 'center'
}, {
field : 'email',
title : '邮箱',
align : 'center',
templet : function(res) {
return '<em>' + res.email + '</em>'
}
}, {
field : 'sex',
title : '性别',
sort : true,
align : 'center',
templet : function(d) {
return d.sex == '1' ? '男' : '女';
}
}, {
field : 'city',
title : '城市',
align : 'center'
}, {
fixed : 'right',
title : '操作',
toolbar : '#userBar',
align : 'center'
} ] ]
});
table.on('toolbar(userTable)', function(obj) {
switch (obj.event) {
case 'add':
openAddUser();
break;
case 'delete':
layer.msg('删除');
break;
}
;
});
var url;
var mainIndex;
//打开添加页面
function openAddUser() {
mainIndex = layer.open({
type : 1,
title : "添加用户",
content : $("#saveOrUpadteDiv"),
area : [ '500px', '400px' ],
/* btnAlign:'c',
btn : [ '<div class="layui-icon layui-icon-heart-fill">保存</div>', '<div class="layui-icon layui-icon-heart">关闭</div>' ],
yes:function(index,layero){
layer.msg("保存");
},
btn2:function(index,layero){
layer.msg("关闭");
} */
success : function(index) {
$('#dataFrm')[0].reset();
url = "user/addUser.action";
}
});
}
//打开修改页面
function openUpadteAddUser(data) {
mainIndex = layer.open({
type : 1,
title : "修改用户",
content : $("#saveOrUpadteDiv"),
area : [ '500px', '400px' ],
success : function(index) {
form.val("dataFrm", data);
url = "user/updateUser.action";
}
});
}
;
//保存
form.on("submit(doSearch)", function(obj) {
//alert(url);
//序列号表单数据
var params = $("#dataFrm").serialize();
alert(params);
$.post("NewFile.jsp", params, function(obj) {
layer.msg(obj);
//关闭弹出层
layer.close(mainIndex);
//刷新数据表格
tableIns.reload();
})
});
//监听工具条
table.on('tool(userTable)', function(obj) {
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
if (layEvent === 'del') { //删除
layer.msg("删除");
layer.confirm('真的删除行么', function(index) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if (layEvent === 'edit') { //编辑
openUpadteAddUser(data);
}
});
});
</script>
</body>
</html>
