1.全查功能
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md9 layui-col-md-offset2">
<table id="demo" lay-filter="test"></table>
<button class="layui-btn" lay-event="add" id="addUserBtn">添加</button>
</div>
</div>
</div>
交互
<script>
var table;
var $ ;
var layer;
var form;
layui.use(["table","layer","jquery","form"],function (){
table = layui.table;
layer = layui.layer;
$ = layui.jquery;
form = layui.form;
//zhanshi
table.render({
elem: '#demo'
,height: 312
,url: "/user/findall" //数据接口
,page:true
,limit:5
,limits:[5,10,15,20]
,cols: [[ //表头
{field: 'id', title: 'ID', sort: true},
{field: 'username', title: '用户名'},
{field: 'password', title: '密码'},
{field: 'phone', title: '电话'},
{field: 'createTime', title: '日期'},
{field:"sex",title:"性别",templet:function (d){
return d.sex==1?"男":"女"
}},
{title:"操作", templet:function (d){
let str="<a lay-event=\"entir\" class=\"layui-btn layui-btn-xs layui-btn-warm\">编辑</a>";
str+="<a lay-event=\"delete\" class=\"layui-btn layui-btn-xs layui-btn-danger\">删除</a>";
return str;
}
},
]]
});
</script>
2.添加
$("#addUserBtn").click(function (){
layer.open({
type:2,
title:"tianjia",
area:['400px','500px'],
content:"user-add.html",
end:function (){
// 弹出层销毁时,重新加载表格数据
// js方法
// location.reload()
// layui方法
// 官方文档:https://layuion.com/docs/modules/table.html#reload
table.reload("demo")
}
})
})
user-add.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/layui/jquery-2.1.0.js"></script>
<script src="/layui/layui.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md8 layui-col-md-offset2">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-inline">
<input type="text" name="username" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">shuojihao</label>
<div class="layui-input-inline">
<input type="text" name="phone" placeholder="请输入shuojihao"class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">注册时间</label>
<div class="layui-input-inline">
<input type="text" name="createTime" class="layui-input" id="createTime">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">money</label>
<div class="layui-input-inline">
<input type="text" name="money" placeholder="请输入"class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-inline">
<input type="radio" name="sex" value="1" title="男">
<input type="radio" name="sex" value="2" title="女" checked>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-inline">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
layui.use(["laydate","table","layer","jquery","form"] ,function(){
var table = layui.table;
var layer = layui.layer;
var $ = layui.jquery;
var form = layui.form;
let laydate=layui.laydate;
laydate.render({
elem:'#createTime'
})
form.on("submit(formDemo)",function (obj){
console.log(obj.field)
console.log(obj.field.sex)
$.ajax({
url:"/user/add",
type:"POST",
data:obj.field,
date:obj.field,
success:function (ret) {
// console.log("ret ==>",ret)
if (ret.code == 0) {
// 把弹出层关闭
// 官方文档: https://layuion.com/docs/modules/layer.html#layer.getFrameIndex
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
} else {
layer.msg("添加失败")
}
},
error:function (){
layer.msg("服务器正忙!")
}
})
})
});
</script>
</body>
</html>
3.删除
table.on("tool(test)",function (obj) {
console.log("obj", obj);
console.log("delete11",obj.event)
if(obj.event=="delete"){
console.log("delete222",obj.event)
layer.confirm("确定删除吗？",{icon:3,title:'提示'},function (index){
//layui.confirm("确认删除吗"),function (index){
layer.msg("确认")
layer.close(index);
console.log("id",obj.data.id)
$.get("/user/delete",{id:obj.data.id},function (ret){
layer.close(index)
layer.close("demo")
})
},function (index){
layer.msg("取消")
layer.close(index)
})
}......
4.编辑
else if (obj.event=="entir"){
layer.open({
type:2,
content:"user-entir.html",
area: ['400px','500px'],
// success: function(layero, index){
// console.log(layero, index);
// },
success:function(layero, index){
// 弹出层提供一个方法,可以获得弹出的那个层的dom对象
// 官方文档: https://layuion.com/docs/modules/layer.html#layer.getChildFrame
let body = layer.getChildFrame("body", index);
// body是user-edit.html页面的内容
let userData = obj.data;
body.find("input[name=id]").val(userData.id)
body.find("input[name=username]").val(userData.username)
body.find("input[name=password]").val(userData.password)
body.find("input[name=phone]").val(userData.phone)
body.find("input[name=money]").val(userData.money)
let date = new Date(userData.createTime);
let year = date.getFullYear();
let month = date.getMonth() + 1;
if (month < 10) {
month = "0"+month;
}
let day = date.getDate();
if (day < 10) {
day = "0"+day;
}
let createTime = year+"-"+month+"-"+day;
body.find("input[name=createTime]").val(createTime)
// 根据性别判断,给标签添加checked属性
// checked=true,默认选中
// console.log("sex = ",userData.sex)
/**
* 以下代码,并没有给form中radio设置上选择效果,为什么?
* 表单中，select、checkbox、radio需要layui来渲染完成,即页面加载完,渲染效果已经完成
* 所以后续再去改动效果,没有直接生效,怎么解决?
* 设置定时,等这边回显完,user-edit再渲染
*/
body.find('input[name=sex][value=1]').attr('checked',userData.sex == 1 ? true : false);
body.find('input[name=sex][value=2]').attr('checked',userData.sex == 2 ? true : false);
},
end:function (){
// 弹出层销毁时,重新加载表格数据
// js方法
// location.reload()
// layui方法
// 官方文档:https://layuion.com/docs/modules/table.html#reload
table.reload("demo")
}
})
合删除和编辑
//(表格点击事件)响应
table.on("tool(tableUser)",function (obj){
console.log("obj",obj);
if (obj.event=="delete"){
layer.confirm("确定删除吗？",{icon:3,title:'提示'},function (index){
layer.msg("删除成功")
layer.close(index);
//获得数据，进行交互
console.log("id",obj.data.id)
$.get("/user/delete",{id:obj.data.id},function (ret){
layer.close(index);
layer.close("findall")
})
},function (index){
layer.msg("取消删除")
layer.close(index);
})
}else if (obj.event=="entir"){
layer.open({
type:2,
content:"user-entir.html",
area: ['400px','500px'],
// success: function(layero, index){
// console.log(layero, index);
// },
success:function(layero, index){
// 弹出层提供一个方法,可以获得弹出的那个层的dom对象
// 官方文档: https://layuion.com/docs/modules/layer.html#layer.getChildFrame
let body = layer.getChildFrame("body", index);
// body是user-edit.html页面的内容
let userData = obj.data;
body.find("input[name=id]").val(userData.id)
body.find("input[name=username]").val(userData.username)
body.find("input[name=password]").val(userData.password)
body.find("input[name=phone]").val(userData.phone)
body.find("input[name=money]").val(userData.money)
let date = new Date(userData.createTime);
let year = date.getFullYear();
let month = date.getMonth() + 1;
if (month < 10) {
month = "0"+month;
}
let day = date.getDate();
if (day < 10) {
day = "0"+day;
}
let createTime = year+"-"+month+"-"+day;
body.find("input[name=createTime]").val(createTime)
// 根据性别判断,给标签添加checked属性
// checked=true,默认选中
// console.log("sex = ",userData.sex)
/**
* 以下代码,并没有给form中radio设置上选择效果,为什么?
* 表单中，select、checkbox、radio需要layui来渲染完成,即页面加载完,渲染效果已经完成
* 所以后续再去改动效果,没有直接生效,怎么解决?
* 设置定时,等这边回显完,user-edit再渲染
*/
body.find('input[name=sex][value=1]').attr('checked',userData.sex == 1 ? true : false);
body.find('input[name=sex][value=2]').attr('checked',userData.sex == 2 ? true : false);
},
end:function (){
// 弹出层销毁时,重新加载表格数据
// js方法
// location.reload()
// layui方法
// 官方文档:https://layuion.com/docs/modules/table.html#reload
table.reload("demo")
}
})
}
})
时间格式设置
index.html
entir.html
check单选框不显示数据，回到entir.html中重新加载数据50ms
4.分页功能
前端
后端
在userdaoimpl中，返回查询总条数
@Override
public int count() {
Connection conn = DBUtil.getConnection( );
PreparedStatement ps = null;
ResultSet rs = null;
int count = 0;
try {
ps = conn.prepareStatement("select count(*) count from tb_user");
rs = ps.executeQuery( );
if (rs.next()){
count = rs.getInt("count");
}
} catch (SQLException throwables) {
throwables.printStackTrace( );
} finally {
DBUtil.closeAll(conn,ps,rs);
}
return count;
}
5.模糊查询
<div class="layui-row">
<div class="layui-col-md9 layui-col-md-offset2">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-input-inline">
<select name="field">
<option value="">---请选择---</option>
<option value="username">用户名</option>
<option value="phone">手机号</option>
</select>
</div>
<div class="layui-input-inline">
<input type="text" name="keyword" placeholder="请输入搜索关键词" class="layui-input">
</div>
<div class="layui-input-inline">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="search">搜索</button>
<button class="layui-btn layui-btn-warm" lay-submit lay-filter="findAll">查询全部</button>
</div>
</div>
</form>
</div>
</div>
模糊查询后端findall方法存入的数据变成4个，page，limit，field（查询条件），keyvalue（查询值）
@WebServlet("/user/list")
public class MyServlet extends HttpServlet {
private ServiceUserFindAll userFindAll = new ServiceUserFindAllImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String pageNo1 = req.getParameter("page");
String pageSize1 = req.getParameter("limit");
String field = req.getParameter("field");
String keyword = req.getParameter("keyword");
System.out.println("field:>>"+field);
int pageNo = Integer.parseInt(pageNo1);
int pageSize = Integer.parseInt(pageSize1);
HashMap<String, Object> map = new HashMap<>();
map.put("pageNo",pageNo);
map.put("pageSize",pageSize);
map.put("field",field);
map.put("keyword",keyword);
ResultData resultData = userFindAll.SelectAll(map);
System.out.println(resultData);
resp.setContentType("application/json;charset=utf-8");
//resp.setContentType("application/json;charset=utf-8");
PrintWriter writer= resp.getWriter();
String jsonStr = JSON.toJSONString(resultData);
writer.write(jsonStr);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}
userdaoipml
@Override
public List<User> SelectAll(HashMap<String, Object> map) {
int pageNo = (int)map.get("pageNo");
int pageSize = (int) map.get("pageSize");
String field=(String) map.get("field");
String keyword = (String)map.get("keyword");
int x=(pageNo-1)*pageSize;
int y=pageSize;
String sql = "select * from tb_user ";
if (field != null && !"".equals(field) && keyword != null && !"".equals(keyword)) {
sql += " where "+field+" like '%"+keyword+"%' ";
}
sql += "limit "+x+" , " + y;
System.out.println("sql ===>" +sql );
List<User> list = DBUtil.selectAll(sql, User.class);
return list;
}
模糊查询数据总数不对
@Override
public int count(HashMap<String, Object> map) {
String field = (String) map.get("field");
String keyword = (String) map.get("keyword");
String sql = "select count(*) count from tb_user";
if (field != null && !"".equals(field) && keyword != null && !"".equals(keyword)) {
sql += " where "+field+" like '%"+keyword+"%' ";
}
Connection conn = DBUtil.getConnection( );
PreparedStatement ps = null;
ResultSet rs = null;
int count = 0;
try {
ps = conn.prepareStatement(sql);
rs = ps.executeQuery( );
if (rs.next()){
count = rs.getInt("count");
}
} catch (SQLException throwables) {
throwables.printStackTrace( );
} finally {
DBUtil.closeAll(conn,ps,rs);
}
return count;
}
4796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
