使用layui表格进行数据渲染

最新推荐文章于 2024-03-22 09:38:28 发布

SinceThenLater

最新推荐文章于 2024-03-22 09:38:28 发布

阅读量2.5k

点赞数 1

分类专栏：项目实战文章标签： servlet java

本文链接：https://blog.csdn.net/qq_42739776/article/details/108341012

版权

项目实战专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章目录

1.效果：

1.分页：
第一页
在这里插入图片描述
第二页

将每页的信息数改为20条后：
在这里插入图片描述

2.点击信息即可修改内容，修改完成后点击"编辑"按钮，即可向后台发送请求

在这里插入图片描述

3.按钮：设置员工状态，点击后会向后台发送请求，根据返回信息，修改按钮状态

在这里插入图片描述

4.删除功能：

在这里插入图片描述

5.页面代码：

user.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="layui/layui.js"></script>
    <script src="layui/lay/modules/jquery.js"></script>
    <script src="layui/lay/modules/table.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
${user.name}
<a href="pages/addEmp.jsp">添加用户</a>
<table id="demo" class="layui-table" lay-filter="test"></table>

<script type="text/html" id="action">
    <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 id="userState" type="text/html">
    <input type="checkbox"  value ={{d.state}} lay-skin="switch" lay-text="在职|离职" lay-filter="state" {{d.state=='1'?'checked':''}}>
</script>
<script id="userGender" type="text/html">
   {{# if(d.gender=='0'){ }}
    男
   {{# }else{ }}
    女
   {{# } }}
</script>
<script>
    var tableData;
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;

        //第一个实例
        var tableInstance = table.render({
            elem: '#demo'
            ,id:'tableIns'
            ,height: 500
            ,width:1200
            ,url: '/emp_war_exploded/emp2' //数据接口
            ,page: true //开启分页
            ,done:function () {
              tableData = table.cache.tableIns;
            }
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, hide:true}
                ,{field: 'name', title: '用户名', width:150,edit:'text'}
                ,{field:'birth',title:'生日',width:150,edit:'text'}
                ,{field:'phone',title:'电话',width:150,edit:'text'}
                ,{field:'email',title:'邮箱',width:150,edit:'text'}
                ,{field:'address',title:'地址',width:150,edit:'text'}
                ,{field:'departmentid',title:'部门',width:60,edit:'text'}
                ,{field:'state',title:'用户状态',templet:'#userState',width:120}
                ,{field:'gender',title:'性别',templet:'#userGender',width:60}
                ,{fixed:"right",title:'操作',toolbar:'#action',width:180}
            ]]
        });
        //监听table中的工具栏
        table.on('tool(test)',function(obj) {
            console.log(obj);
            console.log(obj.data)
            var data = obj.data;
            switch (obj.event) {
                case 'edit':
                    var id = data.id;
                    var name = data.name;
                    var birth = data.birth;
                    var phone = data.phone;
                    var email = data.email;
                    var address = data.address;
                    var departmentid = data.departmentid;
                    var gender = data.gender;
                    var state = data.state;
                    $.ajax({
                         url:"http://localhost/emp_war_exploded/emp3",
                        type:"post",
                        data :{"method":"update","id":id,"name":name,"birth":birth,"phone":phone,"email":email,"address":address,"departmentid":departmentid,"gender":gender,"state":state},
                        success:function (msg) {
                          layer.msg(msg);
                        }
                    })

                    break;

                case  'del':
                    layer.confirm("确定要删除该用户吗?"+obj.data.name,function (index) {
                        $.ajax({
                         url:"http://localhost/emp_war_exploded/emp3",
                         type:"post",
                         dataType:"json",
                         data:{"id":data.id,"method":"delete"},
                         success:function (msg) {
                             console.log("删除数据"+msg);
                             layer.close(index);
                           if(msg=="OK"){
                               obj.del();
                               layer.msg("删除成功！");
                           }else {
                               layer.msg("删除失败");
                           }
                         }
                        })
                    })
                    break;
            }
        });
        form.on('switch(state)',function (data){
            var flag = data.elem.checked;
            var switchState = data.elem.checked?1:0;
            var index  = data.othis.parents('tr').attr("data-index");
            var id = tableData[index].id;
            $.post({
                url:"http://localhost/emp_war_exploded/emp3",
                type:"post",
                dataType:"json",
                data:{"method":"setState","state":switchState,"id":id},
                success:function (msg) {
                   layer.msg(msg);
                   if(msg=="ok"){
                       data.elem.checked = flag;
                   }else{
                       data.elem.checked = !flag;
                   }
                }
            })

        })
    })

</script>
</body>
</html>

6.后端代码：

BaseServlet：你想，如果每个请求我们都要写一个Servlet，请求那么多，我们难道每个Servlet都要写吗。既然学习过反射了，那这里是不是也可以用反射来简化呢？
步骤：前端传请求，设置一个方法参数method,我们可以根据方法的值来具体确定要调用哪个方法，既然有了方法名了，那我们是不是就可以用对象.invoke(methodName,可变参数)的方式来调用方法了吗？于是就有了如下的一个Servlet

/**
 * @Description:
 * @Author one world
 * @Date 2020/8/31 0031 17:27
 */
@WebServlet(name = "BaseServlet")
public abstract class BaseServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        resp.setHeader("Content-type", "text/html;charset=UTF-8");
        String methodName = req.getParameter("method");
        System.out.println("方法名为"+methodName);
        if(methodName==null||methodName.trim().isEmpty()){
            System.out.println("方法名为空");
        }
        Method method = null;
        Class clazz = this.getClass();
        try {
            method = clazz.getMethod(methodName, HttpServletRequest.class,HttpServletResponse.class);
            //这里的result为方法返回的需要重定向或者转发的url
            String result = (String) method.invoke(this, req,resp);
            if(result==null||result.trim().isEmpty()){
                return;
            }
            if(result.contains(":")){
                int index = result.indexOf(":");
                //获取前缀,通过前缀名区分是转发还是重定向
                String pre = result.substring(0,index);
                //获取后缀
                String after = result.substring(index+1);
                System.out.println("前缀为："+pre+"后缀为："+after);
                if(pre.equals("forward")){
                    req.getRequestDispatcher(after).forward(req, resp);
                }else if(pre.equalsIgnoreCase("sendRedirect")){
                    resp.sendRedirect(after);
                }else{
                    System.out.println("方法错误");
                    return;
                }
            }
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
    }
}

具体EmpServlet3

/**
 * @Description:
 * @Author one world
 * @Date 2020/8/31 0031 17:54
 */
@WebServlet("/emp3")
public class EmpServlet3 extends BaseServlet {
    private EmployeeService service = new EmployeeServiceImpl();
    public void delete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String idStr = req.getParameter("id");
        System.out.println("idStr"+idStr);
       Integer id = Integer.parseInt(req.getParameter("id"));
       Gson gson = new Gson();
        if(service.delById(id)){
         resp.getWriter().write(gson.toJson("OK"));
         resp.getWriter().close();
        }

    }
    public String add(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
        Employee e = new Employee();
        String name = req.getParameter("name");
        String phone = req.getParameter("phone");
        String email = req.getParameter("email");
        String address = req.getParameter("address");
        Date birth = new Date();
        Integer departmentId = Integer.parseInt(req.getParameter("departmentid"));
        Integer gender = Integer.parseInt(req.getParameter("gender"));
        Integer state = Integer.parseInt(req.getParameter("state"));
        e.setAddress(address);
        e.setBirth(birth);
        e.setDepartmentid(departmentId);
        e.setEmail(email);
        e.setName(name);
        e.setPhone(phone);
        e.setState(state);
        e.setGender(gender);
        service.add(e);
        return "forward:/emp3?method=findAll";
    }
    public String findAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
        List<Employee> emps = service.findAll();
        User user = (User)req.getAttribute("user");
        String pageStr = req.getParameter("page");
        String pageLimit = req.getParameter("limit");
        if(pageStr==null||"".equals("")){
           pageStr = "1";
        }
        if(pageLimit==null||"".equals("")){
            pageLimit = "10";
        }
        Integer page = Integer.parseInt(pageStr);
        Integer limit = Integer.parseInt(pageLimit);
        List<Employee> result = new ArrayList<Employee>(limit);
        int count = (page-1)*limit;
        int num=0;
        for(int i=count;i<emps.size();i++){
            result.add(emps.get(i));
            if(num==limit-1){
                break;
            }
            num++;
        }
        Map map = new HashMap();
        map.put("code", 0);
        map.put("msg", "");
        map.put("count", emps.size());
        map.put("data", result);
        Gson gson = new Gson();
        String str = gson.toJson(map);
        System.out.println(str);
        resp.getWriter().write(str);
        return "forward:/pages/user.jsp";
    }
    public void update(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
        Employee e = new Employee();
        Integer id = Integer.parseInt(req.getParameter("id"));
        String name = req.getParameter("name");
        String phone = req.getParameter("phone");
        String email = req.getParameter("email");
        String address = req.getParameter("address");
        Date birth = new Date(req.getParameter("birth"));
        Integer departmentId = Integer.parseInt(req.getParameter("departmentid"));
        Integer gender = Integer.parseInt(req.getParameter("gender"));
        Integer state = Integer.parseInt(req.getParameter("state"));
        e.setId(id);
        e.setAddress(address);
        e.setBirth(birth);
        e.setDepartmentid(departmentId);
        e.setEmail(email);
        e.setName(name);
        e.setPhone(phone);
        e.setState(state);
        e.setGender(gender);
        System.out.println("修改后的信息为"+e);
        String msg = "修改失败";
        if(service.update(e)){
           msg = "修改成功";
        }
        Gson gson = new Gson();
        resp.getWriter().write(gson.toJson(msg));
        resp.getWriter().close();
    }
    public void setState(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
        Integer id = Integer.parseInt(req.getParameter("id"));
        Integer state = Integer.parseInt(req.getParameter("state"));
        String msg = "err";
        if(service.setState(id,state)){
           msg = "ok";
        }
        Gson gson = new Gson();
        resp.getWriter().write(gson.toJson(msg));
        resp.getWriter().close();
    }
}