页面效果
主要使用Layui的数据表格 - layui.table
用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
页面代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>院校管理 </title>
<!-- 引入layui的样式 -->
<link href="${pageContext.request.contextPath}/css/layui.css"
rel="stylesheet" />
<script src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>
<!-- 引入layui的js-->
<script src="${pageContext.request.contextPath}/js/layui.js"></script>
</head>
<body>
<div class="layui-row">
<div class="layui-col-md12">
<table id="demo" lay-filter="test"></table>
</div>
</div>
<!-- 编辑弹框 -->
<div class="layui-row" id="update" style="display:none;">
<div class="layui-col-md10" >
<form class="layui-form layui-from-pane" action="" lay-filter="formTest" style="margin-top:20px" >
<input type="hidden" name="did" id="did"/>
<div class="layui-form-item">
<label class="layui-form-label">院系名称：</label>
<div class="layui-input-block">
<input type="text" name="dname" id="dname" required lay-verify="required" autocomplete="off" placeholder="请输入学院名称" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin-top:40px">
<div class="layui-input-block">
<button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="save">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<script type="text/html" id="reloadDemo">
<div class="demoTable">
院系名称：
<div class="layui-inline">
<input class="layui-input" name="search" id="search"
autocomplete="off">
</div>
<button class="layui-btn" data-type="reload" lay-event="search">搜索</button>
<a class="layui-btn layui-btn-normal" lay-event="add">新增</a>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use(['table', 'form'], function() {
var table = layui.table,form=layui.form;
//数据表格
var deptTable = table.render({
elem : '#demo',
url : '../../department.do?method=findAll', //数据接口
height : 'full-5',
page : true,//开启分页
toolbar : '#reloadDemo',//右侧工具栏
defaultToolbar : [ 'filter', 'print', 'exports' ],//左侧工具栏
cols : [ [ //表头
{
field : 'did',
title : '院系ID',
sort : true,
fixed : 'left'
}, {
field : 'dname',
title : '院系名称'
}, {
fixed : 'right',//对齐方式
title : '操作',
toolbar : '#barDemo',
width : 150
} ] ],
id: 'testReload'
});
//监听行工具事件
//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
table.on('tool(test)', function(obj) {
var data = obj.data;
if (obj.event === 'del') {//删除
layer.confirm('确定删除吗？', function(index) {
$.ajax({
type:'post',
url:'/Course-Selection/department.do?method=remove',
data:{"id":data.did},
dataType:'json',
success:function(data){
if(data.code=='ok'){
layer.msg("删除成功",{icon:1});
deptTable.reload();//重新加载数据表格
}else{
layer.msg("删除失败",{icon: 5});
}
}
})
});
} else if (obj.event === 'edit') {//修改
//给表单的input赋值
$("#did").val(data.did);
$("#dname").val(data.dname);
//修改弹框
layer.open({
type: 1,
title: "修改院系信息",
area: ['420px', '200px'],
content: $("#update")//引用的弹出层的页面层的方式加载修改界面表单
});
}
});
//搜索（表格重载）
var $ = layui.$, active = {
reload : function() {
//执行重载
table.reload('testReload', {
page : {
curr : 1//重新从第 1 页开始
},
where : {
search: $('#search').val()//条件
}
}, 'data');
}
};
//监听工具事件
table.on('toolbar(test)', function(obj){
if (obj.event === 'search') {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
} else if (obj.event === 'add') {
//给表单的input赋值
$("#did").val("");
$("#dname").val("");
//修改弹框
layer.open({
type: 1,
title: "新增院系信息",
area: ['420px', '200px'],
content: $("#update")//引用的弹出层的页面层的方式加载修改界面表单
});
}
});
//监听表单提交
//保存（修改、删除）
form.on('submit(save)', function(data){
$.ajax({
url: '/Course-Selection/department.do?method=save',
type: 'POST',
dataType: "json",
data: data.field,
success: function (data) {
if (data.code == 200) {
layer.msg("保存成功", {icon: 1});
setTimeout(function () {
layer.closeAll();//关闭所有的弹出层
deptTable.reload();
}, 500);
} else {
layer.msg("操作失败！", {icon: 5});
}
}
});
return false;
});
});
</script>
</body>
</html>
servlet代码：
@WebServlet(urlPatterns = "/department.do")
public class DepartmentController extends HttpServlet {
private static final long serialVersionUID = 1L;
private DepartmentService departmentService = new DepartmentServiceImpl();
/**
* @see HttpServlet#HttpServlet()
*/
public DepartmentController() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置字符编码
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
// 获取参数
String method = request.getParameter("method");
if (method.equals("findAll")) {
// 分页查询
findAll(request, response);
} else if (method.equals("remove")) {
// 删除
remove(request, response);
}else if (method.equals("save")) {
// 修改
save(request, response);
}
}
/**
* 修改信息
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
private void save(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取参数
String id = request.getParameter("did");
String dname = request.getParameter("dname");
// 创建对象
Department d = new Department();
// 设置参数
d.setDname(dname);
// 调用service层的方法
boolean flag = false;
if(id.equals("")||id==null) {
flag = departmentService.saveDepartment(d);
}else {
int did = Integer.parseInt(id);
// 设置参数
d.setDid(did);
flag = departmentService.modifyToDepartment(d);
}
// 解决json中文乱码
response.setContentType("text/json;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
JSONObject jsonObject =new JSONObject();
// 判断
if (flag == true) {
jsonObject.put("code", 200);
} else {
jsonObject.put("code", "");
}
out.print(jsonObject);
out.flush();
out.close();
}
/**
* 删除信息
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
private void remove(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int did = Integer.parseInt(request.getParameter("id"));
boolean flag = departmentService.delDepartment(did);
// 解决json中文乱码
response.setContentType("text/json;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
JSONObject jsonObject = new JSONObject();
// 判断
if (flag) {
jsonObject.put("code", "ok");
} else {
jsonObject.put("code", "no");
}
out.print(jsonObject);
out.flush();
out.close();
}
/**
* 分页查询信息
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
private void findAll(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 解决json中文乱码
response.setContentType("text/json;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
//获取请求参数
int currentPage = Integer.parseInt(request.getParameter("page"));
int pageSize =Integer.parseInt( request.getParameter("limit"));
String search=request.getParameter("search");
if (search==null) {
search = "";
}
//创建out对象
PrintWriter out = response.getWriter();
//调用service的查询方法
List<Department> list = departmentService.findAllDepartment(search,currentPage,pageSize);
//获取总行数
int count = departmentService.getCount(search);
//创建map
Map<String, Object> map = new HashMap<String, Object>();
map.put("code", 0);
map.put("data", list);
map.put("count",count);
map.put("msg", "");
JSONObject jsonObject = JSONObject.fromObject(map);
out.print(jsonObject);
out.flush();
out.close();
}
}
欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中…
4680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
