layui开发文档
https://www.layui.com/doc/modules/layer.html
其中,数据表格的快速使用
添加一个表格,和layui的js文件和js代码实现
<table id="demo" lay-filter="test"></table>
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: '/demo/table/user/' //数据接口 需要换成自己写的servlet数据接口
,page: true //开启分页
,cols: [[ //表头 field属性字段对应查询到书库内容的属性字段,title是标签名,fixed,设置左右固定,sort添加排序功能
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
});
</script>
加到之前的ajax增删改查中:
list.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/layui/css/layui.css">
</head>
<body>
<a id="insert" href="" onclick="return false">新增</a>
<table id="demo" lay-filter="test"></table>
</body>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/layer/layer.js"></script>
<!-- layui组件需要放在最下面,覆盖上面的要不然会出现功能不显示 -->
<script src="${pageContext.request.contextPath }/layui/layui.js"></script>
<script type="text/javascript">
$(function() {
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo' //元素,html中的元素,绑定的数据表id选择器
,height: 312 //高度,表格高度
//url:第一点要做的事情就是要有自己的请求地址,第二要知道前端接受的数据格式。
//异步接口:返回数据
/* {
"code": 0,
"msg": "",
"count": 1000,
"data": [{}, {}]
} */
,url: '${pageContext.request.contextPath }/LgUserServlet?method=getTable' //数据接口,就算修改为自己数据接口,你知道数据格式的封装吗(就是后台要返回什么数据格式给前端,前端表格的数据格式是固定的,不然是渲染不出来的。)
,page: true //开启分页 //并没有发送分页数据到后台,所以查询回来的数据是没有分页的 page/limit
,toolbar:'default',
width:500
,cols: [[ //表头
{type:'checkbox',fixed:'left'}
,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:120, sort: true}
,{field: 'starttime', title: '开始时间', width:160}
,{field: 'stoptime', title: '结束时间', width:160}
,{field: 'jifen', title: '积分', width: 80, sort: true}
,{field: 'touxiang', title: '头像', width: 140,fixed:'right'}]]
});
});
</script>
</html>
后台添加的接口gettable:
// FastJson包使用注解
private void getTable(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException,
ClassNotFoundException, InstantiationException, IllegalAccessException, SQLException {
List list = lgUserDao.selectAll();
// 把所有和数据都查询出来,然后封装数据。
// {}:大括号代表 map/对象
// []:数组/list有序集合
/*
* { "code": 0, "msg": "", "count": 1000, "data": [{}, {}] }
*/
Map map = new HashMap();
map.put("code", 0);
map.put("msg", "");
String sql = "select count(*) from lguser";
Integer integer = lgUserDao.selectCount(sql);
map.put("count", integer);// 数据总数:数据表中的数据总数
map.put("data", list);
PrintWriter printWriter = resp.getWriter();
printWriter.append(JSON.toJSONString(map));
}
完成数据表格的分页功能和toolbar:
在table.render中设置:开启分页功能和工具按钮,支持新增修改删除,下载数据表格,数据显示设置,打印功能。
page: true //开启分页 //并没有发送分页数据到后台,所以查询回来的数据是没有分页的 page/limit
,toolbar:'default'
修改后台的gettable方法:
private void getTable(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException,
ClassNotFoundException, InstantiationException, IllegalAccessException, SQLException {
// 完成分页查询
// layui.table开启分页功能,就会携带2个默认的参数请求,page=1&limit=10 参数是要计算出来的,公式:page-1的差 * 10
String pageStr = req.getParameter("page");
String limitStr = req.getParameter("limit");
// 第二:计算出值(page-1)*limit
Integer page = Integer.parseInt(pageStr);
Integer limit = Integer.parseInt(limitStr);
Integer xh = (page - 1) * limit;
List listParm = new ArrayList();
String sqlf = "select * from lguser where 1=1 ";
// 拼接查询条件
sqlf += " limit ?,?";
listParm.add(xh);
listParm.add(limit);
List<LgUser> list = lgUserDao.selectSome(sqlf, listParm.toArray());
// List list = lgUserDao.selectAll();
// 把所有和数据都查询出来,然后封装数据。
// {}:大括号代表 map/对象
// []:数组/list有序集合
/*
* { "code": 0, "msg": "", "count": 1000, "data": [{}, {}] }
*/
Map map = new HashMap();
map.put("code", 0);
map.put("msg", "");
String sql = "select count(*) from lguser";
Integer integer = lgUserDao.selectCount(sql);
map.put("count", integer);// 数据总数:数据表中的数据总数
map.put("data", list);
PrintWriter printWriter = resp.getWriter();
printWriter.append(JSON.toJSONString(map));
}
BaseDao中添加selectsome方法:
public List<T> selectSome(String sql, Object... objects)
throws ClassNotFoundException, SQLException, InstantiationException, IllegalAccessException {
ResultSet resultSet = query(connection, sql, objects);
// ResultSet结果集,迭代结果集,获取结果集中的数据,把所有的结果集封装到 一个集合中
List<T> list = new ArrayList<T>();
// 也是使用user对象
Class class1 = getPojoClass();
while (resultSet.next()) {// 查看一下是否还有下一个数据
Object object = autoSetter(resultSet, class1);
list.add((T) object);
}
return list;
}
工具栏按钮新增修改删除(多删除)具体实现:
list.jsp:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/layui/css/layui.css">
</head>
<body>
<a id="insert" href="" onclick="return false">新增</a>
<table id="demo" lay-filter="test"></table>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.1.min.js"></script>
<script src="${pageContext.request.contextPath }/layui/layui.js"></script>
<script type="text/javascript">
$(function() {
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo' //元素,html中的元素,绑定的数据表id选择器
,height: 312 //高度,表格高度
//url:第一点要做的事情就是要有自己的请求地址,第二要知道前端接受的数据格式。
//异步接口:返回数据
/* {
"code": 0,
"msg": "",
"count": 1000,
"data": [{}, {}]
} */
,url: '${pageContext.request.contextPath }/LgUserServlet?method=getTable' //数据接口,就算修改为自己数据接口,你知道数据格式的封装吗(就是后台要返回什么数据格式给前端,前端表格的数据格式是固定的,不然是渲染不出来的。)
,page: true //开启分页 //并没有发送分页数据到后台,所以查询回来的数据是没有分页的 page/limit
,toolbar:'default',
width:500
,cols: [[ //表头
{type:'checkbox',fixed:'left'}
,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:120, sort: true}
,{field: 'starttime', title: '开始时间', width:160}
,{field: 'stoptime', title: '结束时间', width:160}
,{field: 'jifen', title: '积分', width: 80, sort: true}
,{field: 'touxiang', title: '头像', width: 140,fixed:'right'}]]
});
//tool监听工具条 操作栏右边的增删改查
//toolbar头部工具栏
//监听头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id)
,data = checkStatus.data; //获取选中的数据
switch(obj.event){
case 'add':
layer.open({
type:2,
content:'${pageContext.request.contextPath }/LgUserServlet?method=toinsert',
area:['300px','300px'],
end:function(){
//销毁后回调函数
//刷新当前页面
//使用上table之后就不需要直接刷新页面了
// location.replace(location.href);
//table有一个方法,可以重新加载table
}
});
break;
case 'update':
if(data.length === 0){
layer.msg('请选择一行');
} else if(data.length > 1){
layer.msg('只能同时编辑一个');
} else {
// layer.alert('编辑 [id]:'+ checkStatus.data[0].id);
layer.open({
type:2,
content:'${pageContext.request.contextPath }/LgUserServlet?method=toupdate&id='+checkStatus.data[0].id,
area:['300px','300px'],
end:function(){
//销毁后回调函数
//刷新当前页面
// location.replace(location.href);
table.reload('demo');
}
});
}
break;
case 'delete':
if(data.length === 0){
layer.msg('请选择一行');
} else {
// layer.msg('删除');
//选中的对象信息,是数组,所以要在数组中,获取id。遍历
//checkStatus.data
var ids=0;
for ( var index in checkStatus.data) {
ids+=checkStatus.data[index].id;
ids+=",";
}
console.log(ids);
layer.confirm("是否删除?",{icon:3,title:"提示"},function(index){
//确认删除
//ajax请求后台删除数据
//接受响应,提示信息,刷新页面
$.ajax({
//为什么不能使用this直接获取呢,因为this指向的是ajax。
url:'${pageContext.request.contextPath }/LgUserServlet?method=delete&id='+ids,
dataType:'json',
success:function(data){
if(data.code==1000){
layer.msg(data.msg,{icon:1,time:500},function(){
layer.close(index);
// location.replace(location.href);
table.reload('demo');
})
}else{
layer.msg(data.msg,{icon:2},function(){
layer.close(index);
});
}
}
})
});
}
break;
};
});
});
</script>
</html>
edit.jsp:新增修改弹出的小框框:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<h4>编辑页面、整合validate</h4>
<form action="">
<c:if test="${user.id==null }">
<input type="hidden" name="method" value="insert">
</c:if>
<c:if test="${user.id!=null }">
<input type="hidden" name="method" value="update">
<input type="hidden" name="id" value="${user.id }">
</c:if>
用户名:<input type="text" name="username" value="${user.username }"><br>
开始时间:<input id="st" type="date" name="starttime" value="${user.starttime }"><br>
结束时间:<input id="stot" type="date" name="stoptime" value="${user.stoptime }"><br>
积分:<input type="text" name="jifen" value="${user.jifen }"><br>
头像:<input type="text" name="touxiang" value="${user.touxiang }"><br>
<input type="submit" value="提交"> <!-- 取消submit默认提交表单的功能,自己使用ajax提交,提交之后关闭刷新页面-->
</form>
</body>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery.validate.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/layer/layer.js"></script>
<script type="text/javascript">
$(function(){
console.log($("#st").val())
$("form").submit(function(){
return false;
})
$("form").validate({
rules:{
username:{
required:true
},
starttime:{
required:true
},
stoptime:{
required:true
},
jifen:{
required:true,
digits:true,
rangelength:[2,5]
},
touxiang:{
required:true
}
},messages:{
username:{
required:"必填"
},
starttime:{
required:"必填"
},
stoptime:{
required:"必填"
},
jifen:{
required:"必填",
digits:"必须是整数",
rangelength:"范围在2-5"
},
touxiang:{
required:"必填"
}
},
submitHandler:function(form){//提交的处理事件
//使用了load 和 shade对提交按钮进行点击限制,点击一次之后就不能点击防止多次点击多次触发提交
var index = layer.load(1,{
shade:[0.1,'#fff']
});
//ajax提交form表单,提交表单后,提示成功信息,并且关闭弹窗,刷新列表
$.ajax({
url:'${pageContext.request.contextPath }/LgUserServlet',
data:$("form").serialize(),//jq种有一个方法可以获取整个form表单数据的,获取到form表单的数据
dataType:'json',
success:function(data){
//请求成功之后就可以关闭load了
//提示成功信息,并且关闭弹窗,刷新列表
//["code":1000,"msg":"成功"]
if(data.code==1000){
layer.msg(data.msg,{icon:1,time:500,shade:[0.3,'#393D49']},
function(){
//关闭弹框
var index = parent.layer.getFrameIndex(window.name);//当得到当前ifrmae层的索引
parent.layer.close(index);//再执行关闭
})
}else{
layer.msg(data.msg,{icon:2});
}
}
});
}
})
})
</script>
</html>
BaseDao新增的deletesome方法:
public boolean deleteSome(Object[] id) throws ClassNotFoundException, SQLException {
// 通过方法 获取泛型的类型
Class class1 = getPojoClass();
Field[] fields = class1.getDeclaredFields();
String primary = "";
for (Field field : fields) {
Id id1 = field.getAnnotation(Id.class);
if (id1 != null) {
primary = field.getName();
}
}
String idString = "";
for (int i = 0; i < id.length; i++) {
idString += "?";
if (i != id.length - 1) {
idString += ",";
}
}
String sql = "delete from " + class1.getSimpleName() + " where " + primary + " in ( " + idString + " );";
System.out.println(sql);
return merger(sql, id);
}
后台servlet实现:
package com.test.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import com.test.lguserdao.LgUserDao;
import com.test.pojo.LgUser;
@WebServlet("/LgUserServlet")
public class LgUserServlet extends HttpServlet {
LgUserDao lgUserDao = new LgUserDao();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
try {
String method = req.getParameter("method");
if ("tolist".equals(method)) {
tolist(req, resp);
} else if ("toinsert".equals(method)) {
toinsert(req, resp);
} else if ("insert".equals(method)) {
insert(req, resp);
} else if ("toupdate".equals(method)) {
toupdate(req, resp);
} else if ("update".equals(method)) {
update(req, resp);
} else if ("delete".equals(method)) {
delete(req, resp);
} else if ("getTable".equals(method)) {
getTable(req, resp);
}
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
private void tolist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException,
ClassNotFoundException, InstantiationException, IllegalAccessException, SQLException {
String sql = "select * from lguser where 1=1 ";
List<LgUser> user = lgUserDao.selectSome(sql);
req.setAttribute("user", user);
req.getRequestDispatcher("/WEB-INF/page/lguser/list.jsp").forward(req, resp);
}
private void toupdate(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException,
ClassNotFoundException, InstantiationException, IllegalAccessException, SQLException {
String id = req.getParameter("id");
LgUser lgUser = lgUserDao.selectById(Integer.parseInt(id));
req.setAttribute("user", lgUser);
req.getRequestDispatcher("/WEB-INF/page/lguser/edit.jsp").forward(req, resp);
}
private void update(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException,
ClassNotFoundException, InstantiationException, IllegalAccessException, SQLException, ParseException {
String id = req.getParameter("id");
String name = req.getParameter("username");
String starttime = req.getParameter("starttime");
String stoptime = req.getParameter("stoptime");
String jifen = req.getParameter("jifen");
String touxiang = req.getParameter("touxiang");
LgUser lgUser = new LgUser();
lgUser.setId(Integer.parseInt(id));
lgUser.setUsername(name);
SimpleDateFormat dateFormat = new SimpleDateFormat("yy-MM-dd");
lgUser.setStarttime(dateFormat.parse(starttime));
lgUser.setStoptime(dateFormat.parse(stoptime));
lgUser.setJifen(Integer.parseInt(jifen));
lgUser.setTouxiang(touxiang);
Map map = new HashMap();
if (lgUserDao.updateById(lgUser)) {
map.put("code", 1000);
map.put("msg", "修改成功");
} else {
map.put("code", 1001);
map.put("msg", "修改失败");
}
PrintWriter printWriter = resp.getWriter();
System.out.println(lgUser.getStarttime());
System.out.println(lgUser.getStoptime());
printWriter.append(JSON.toJSONString(map));
}
private void toinsert(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException,
ClassNotFoundException, InstantiationException, IllegalAccessException, SQLException {
req.getRequestDispatcher("/WEB-INF/page/lguser/edit.jsp").forward(req, resp);
}
private void insert(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException,
ClassNotFoundException, InstantiationException, IllegalAccessException, SQLException, ParseException {
String name = req.getParameter("username");
String starttime = req.getParameter("starttime");
String stoptime = req.getParameter("stoptime");
String jifen = req.getParameter("jifen");
String touxiang = req.getParameter("touxiang");
LgUser lgUser = new LgUser();
lgUser.setUsername(name);
SimpleDateFormat dateFormat = new SimpleDateFormat("yy-MM-dd");
lgUser.setStarttime(dateFormat.parse(starttime));
lgUser.setStoptime(dateFormat.parse(stoptime));
lgUser.setJifen(Integer.parseInt(jifen));
lgUser.setTouxiang(touxiang);
Map map = new HashMap();
if (lgUserDao.insert(lgUser)) {
// 处理编号 //1000代表成功,1001代表失败
// 处理信息
// 前端根据处理编号判断是否请求成功
// 可以使用map封装["code":1000,"msg":"成功"]
map.put("code", 1000);
map.put("msg", "新增成功");
} else {
map.put("code", 1001);
map.put("msg", "新增失败");
}
PrintWriter printWriter = resp.getWriter();
printWriter.append(JSON.toJSONString(map));
}
private void delete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException,
ClassNotFoundException, InstantiationException, IllegalAccessException, SQLException {
// 根据id删除数据
String id = req.getParameter("id");
//需要转换成数组,来获取每个id 的内容
String[] idStrings = id.split(",");
Map map = new HashMap();
if (lgUserDao.deleteSome(idStrings)) {
// 处理编号 //1000代表成功,1001代表失败
// 处理信息
// 前端根据处理编号判断是否请求成功
// 可以使用map封装["code":1000,"msg":"成功"]
map.put("code", 1000);
map.put("msg", "删除成功");
} else {
map.put("code", 1001);
map.put("msg", "删除失败");
}
PrintWriter printWriter = resp.getWriter();
printWriter.append(JSON.toJSONString(map));
}
// FastJson包使用注解
private void getTable(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException,
ClassNotFoundException, InstantiationException, IllegalAccessException, SQLException {
// 完成分页查询
// layui.table开启分页功能,就会携带2个默认的参数请求,page=1&limit=10 参数是要计算出来的,公式:page-1的差 * 10
String pageStr = req.getParameter("page");
String limitStr = req.getParameter("limit");
// 第二:计算出值(page-1)*limit
Integer page = Integer.parseInt(pageStr);
Integer limit = Integer.parseInt(limitStr);
Integer xh = (page - 1) * limit;
List listParm = new ArrayList();
String sqlf = "select * from lguser where 1=1 ";
// 拼接查询条件
sqlf += " limit ?,?";
listParm.add(xh);
listParm.add(limit);
List<LgUser> list = lgUserDao.selectSome(sqlf, listParm.toArray());
// List list = lgUserDao.selectAll();
// 把所有和数据都查询出来,然后封装数据。
// {}:大括号代表 map/对象
// []:数组/list有序集合
/*
* { "code": 0, "msg": "", "count": 1000, "data": [{}, {}] }
*/
Map map = new HashMap();
map.put("code", 0);
map.put("msg", "");
String sql = "select count(*) from lguser";
Integer integer = lgUserDao.selectCount(sql);
map.put("count", integer);// 数据总数:数据表中的数据总数
map.put("data", list);
PrintWriter printWriter = resp.getWriter();
printWriter.append(JSON.toJSONString(map));
}
}