layui学习--表格应用（前后端java）

对于后台系统来说最重要的就是表格的 增删改查
同时要完成增删改查最先的。也就是最重要的就是获取数据，也就是先把数据的列表整出到页面

先贴下效果

jsp的代码（html就不用了）：

<script>
    layui.use(['form', 'table','layuimini','element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layuimini = layui.layuimini;

        table.render({
            elem: '#currentTableId',
            url: '/staffs/getAll',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50, fixed: "left"},
                {field: 'id', width: 80, title: 'ID', sort: true},
                {field: 'deptName', width: 80, title: '部门'},
                {field: 'name', width: 80, title: '用户名'},
                {field: 'sexName', width: 80, title: '性别', sort: true},
                {field: 'age', width: 80, title: '年龄'},
                {field: 'workAge', title: '工龄',width:80},
                {field: 'number', width: 80, title: '身份证'},
                {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
            ]],
            limits: [2, 15, 20, 25, 50, 100],
            limit: 15,
            page: true
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        // 监听添加操作
        $("body").on("click",".data-add-btn", function () {
        // $(".data-add-btn").on("click", function () {

            var content = layuimini.getHrefContent('layuimini-onepage/page/table/add.html');
            var openWH = layuimini.getOpenWidthHeight();

            var index = layer.open({
                title: '添加用户',
                type: 1,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: [openWH[0] + 'px', openWH[1] + 'px'],
                offset: [openWH[2] + 'px', openWH[3] + 'px'],
                content: content,

            });
            $(window).on("resize", function () {
                layer.full(index);
            });

            return false;
        });
        // 监听删除操作
        $("body").on("click",".data-delete-btn", function () {
        // $(".data-delete-btn").on("click", function () {
            var checkStatus = table.checkStatus('currentTableId')
                , data = checkStatus.data;
            layer.alert(JSON.stringify(data));
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {

                var content = layuimini.getHrefContent('layuimini-onepage/page/table/add.html');
                var openWH = layuimini.getOpenWidthHeight();

                var index = layer.open({
                    title: '编辑用户',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function () {
                    console.log(obj)
                    $.ajax({
                        url:"/staffs/del?id="+obj.data.id,
                        success:function(data){
                            if(data){
                                table.reload('currentTableId')
                                layer.msg("删除成功！")
                            }else {
                                layer.msg("删除失败！")
                            }
                        },
                        error:function () {
                            layer.msg("删除失败！")
                        }
                    })


                });
            }
        });

    });

</script>

后端代码（附带增加删除操作）

package cn.edu.controller;

import cn.edu.model.Staff;
import cn.edu.service.StaffDataServiceImpl;
import cn.edu.service.StaffServiceImpl;
import cn.edu.utils.Layui;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/***
 * @date 2020/2/13
 * @author ZZS
 */
@Controller
@RequestMapping("/staffs")
public class StaffJson {
    @Autowired
    private StaffServiceImpl staffService;
    @Autowired
    private StaffDataServiceImpl staffDataService;

    /***
     *
     * @param page 页码
     * @param limit 每页数
     * @return json
     */
    @RequestMapping("/getAll")
    @ResponseBody
    public Layui getAll(Integer page,Integer limit){

        Staff staff = new Staff();
        List<Staff> list = staffService.fine(staff);
        Integer count = list.size();
        //count 总长度
        PageHelper.startPage(page,limit);
        list = staffService.fine(staff);

        return Layui.data(count,list);
    }


    @RequestMapping("/del")
    @ResponseBody
    public Boolean del(Integer id){
        return staffService.delete(id);

    }

    @RequestMapping(value = "/add",method = RequestMethod.POST)
    @ResponseBody
    public Boolean add(Staff staff){

        return staffService.add(staff);

    }




}

后端是不是很简单！！！
这就是使用前端框架的原因，结合一下，可以节省很多工作

下面说一下需要的环境或者可能发生的错误

后端环境需要

    <!--json解析包-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.8</version>
    </dependency>

layui工具

package cn.edu.utils;

import java.util.HashMap;
import java.util.List;

public class Layui  extends HashMap<String, Object> {

    public static Layui data(Integer count, List<?> data){
        Layui r = new Layui();
        r.put("code", 0);
        r.put("msg", "");
        r.put("count", count);
        r.put("data", data);
        return r;
    }
}

以上是为了返回layui所需要的数据格式
分页看你写不写了，我用的是mybatis的插件分页工具

执行操作的时候我都用的layui的表格重载，可能会发生一些点击事件失效的麻烦
可以吧点击事件改成

 // 监听添加操作
        $("body").on("click",".data-add-btn", function () {
        // $(".data-add-btn").on("click", function () {     这个可能会导致表格重载后 add按钮点击失效（没反应）