数据表格（纯前端）

快速使用

首先需要引入layui的css和js

<link rel="stylesheet" href="../static/layui/css/layui.css">
<script src="../static/layui/layui.js" charset="utf-8"></script>

然后再定义一个table标签，并写入js代码即可快速使用

<table id="demo"></table>
<script>
    layui.use('table',function () {
        var table = layui.table;

        table.render({
            elem: "#demo",//绑定table的id
            url: "../static/layui/user.json",//数据接口
            cols: [[
                {field: 'aa', type: 'numbers'},
                {field: 'bb', type: 'checkbox'},  //  开启复选框
                {field: 'id', title: '用户编号', sort: true, width: 120, hide: true},	// 隐藏该列
                {field: 'username', title: '用户名', width: 100, edit: 'text'},
                {field: 'sex', title: '性别', sort: true, width: 80},
                {field: 'city', title: '城市', sort: true, width: 80},
                {field: 'sign', title: '签名', width: 80, edit: 'text'}

            ]],
            page: true //开启分页

        });
    })
</script>

数据接口的数据格式为：code必须为0

最后的效果

头部工具栏

先定义一个script代码

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
            获取选中行数据
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
            获取选中数目
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">
            验证是否全选
        </button>
    </div>
</script>

lay-event就是后面绑定事件的id

然后在table.render里设置绑定id

        table.render({
            elem: "#demo",//绑定table的id
            url: "../static/layui/user.json",//数据接口
            cols: [[
                {field: 'aa', type: 'numbers'},
                {field: 'bb', type: 'checkbox'},  //  开启复选框
                {field: 'id', title: '用户编号', sort: true, width: 120, hide: true},
                {field: 'username', title: '用户名', width: 100, edit: 'text'},
                {field: 'sex', title: '性别', sort: true, width: 80},
                {field: 'city', title: '城市', sort: true, width: 80},
                {field: 'sign', title: '签名', width: 80, edit: 'text'}

            ]],
            page: true,//开启分页
            // 设置表头工具栏
            toolbar:"#toolbar"
        });

效果

不过这三个按钮点击了都没反应，这是因为我们还没有绑定事件

这时再在table上指定一个lay-filter用于下面绑定

<table id="demo" lay-filter="test"></table>

然后再layui.use中编写事件代码（可以通过console.log(obj)在控制台打印出obj数据查看其中的数据）

 
//头监听事件
        table.on('toolbar(test)',function (obj){
            //console.log(obj);
            // 获取当前表格被选中的记录对象，返回数据
            var checkStatus = table.checkStatus(obj.config.id);
            console.log(checkStatus);
            // 获取事件名，执行对应的代码
            var eventName = obj.event;
            switch (eventName) {
                case "getCheckData":
                    // 获取被选中的数组
                    var arr = checkStatus.data;
                    // 将数组解析成字符串
                    layer.alert(JSON.stringify(arr));
                    break;
                case "getCheckLength":
                    var arr = checkStatus.data;
                    layer.msg("选中了"+arr.length+"条记录");
                    break;
                case "isAll":
                    //通过isall属性判断是否全选
                    var flag = checkStatus.isAll;
                    var str = flag?"全选":"未全选";
                    layer.msg(str);
                    break;
            }
        });

最后的效果就是点击后上述三个选项会完成各自的功能

表格工具栏

先定义一个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>

然后再cols中增加一列来绑定script代码

// 设置表格工具栏
{field: '操作',toolbar:'#barDemo'}

效果

然后再layui.use中编写事件代码

        // 监听行工具栏事件
        table.on('tool(test)',function (obj) {
            //得到当前操作行的相关信息
            var tr = obj.data;
            console.log(tr);
            // 得到事件名，判断执行
            var eventName = obj.event;
            // 删除
            if (eventName == 'del'){
                // 确认框
                layer.confirm('确认删除吗？',function (index) {
                    // 删除指定tr
                    obj.del();
                    //关闭弹出层,index是当前弹出层的的下标
                    layer.close(index);
                });
            }else if (eventName=='edit'){//编辑
                //输出框
                layer.prompt({
                    // 表单元素的类型 0=文本框 1=密码框 2=文本域
                    formType:0,
                    value:tr.username//设置输入框的值
                },function (value,index) {
                    //修改指定单元格的值
                    // value表示输入的值
                    obj.update({
                        username:value
                    });
                    //关闭弹出层
                    layer.close(index);
                });
            }
        });

分页

在后端把所有的数据取出来，然后再在前端进行分页

通过在table.render（{}）中的parseData:function (res) {）方法来对取出的数据进行分页

parseData:function (res) {
                var result;
                console.log(res);
                console.log(this.page.curr);//this.page.curr为当前的页码
                if(this.page.curr){
                    //若为第二页 则curr为2 页面显示的数据就是从res.data集合数组里的 （2-1）*limit（10）=10 到 limit（10）*2=20的数据
                    result = res.data.slice
                    (this.limit*(this.page.curr-1),this.limit*this.page.curr);
                    // string.slice(start, end)，表示截取从start下标到end下标的字符串（左闭右开）
                }
                else {
                    // 一开始就是第一页 则就是 显示的数据就是从res.data集合数组里的0到limit（10）中
                    result = res.data.slice(0, this.limit);
                }
    			// 最后返回规定的数据格式 
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };

            },
limit:5,
limits:[3,5,10]                

最后的效果

如果选择要在后端进行分页的话，要注意layui会在你给的数据接口后面自动传入一个page（当前是第几页）和limit（每页的限制）参数，在后台接收了这两个参数，根据参数编写对应的后台代码

数据表格（java后端）

采用的是前端分页，通过java在后端取出所有数据（把url的地址改成后端的就行了）然后传给前端进行分页

table.render里的规范数据参数

parseData:function (res) {// 对从后端获得的数据进行规范，最后返回四个键值对
                    var result;
                    // console.log(res);
                    // console.log(this.limit);
                    if(this.page.curr){
                        //若为第二页 则curr为2 页面显示的数据就是从res.data集合数组里的 
                        //（2-1）*limit（10）=10 到 limit（10）*2=20的数据
                        
                        //slice（）跟java的substring类似，slice是将键值对的键根据索引
                        //以左闭右开的形式截取
                        result = res.data.slice
                        (this.limit*(this.page.curr-1),this.limit*this.page.curr);
                    }
                    else {
                        // 一开始就是第一页 则就是 显示的数据就是从res.data集合数组里的
                        //0到limit（10）中
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };

增

1、定义一个表头工具栏

<!-- 表头工具栏（新增）-->
<script type="text/html" id="addbook">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            新增
        </button>
    </div>
</script>

2、绑定id

lay-event是后面要绑定事件的id

然后在table.render里设置绑定id

toolbar: "#addbook"//绑定表头工具栏的id

3、编写javascript代码

在layui.use里编写对应的新增事件

        // 表头工具栏（新增）
        table.on('toolbar(bookdata)',function (obj) {
           console.log(obj)
            var eventName = obj.event
            // 新增
            if (eventName=='add'){
                layer.open({
                    type:1,
                    title:"新增",
                    content:layui.$('#addone'),
                    btn:['确定','取消'],
                    yes:function(index, layero){
                        // 取出输入框的内容
                        var bn = layui.$('#bName').val()
                        var bc = layui.$('#bCount').val()
                        var bd = layui.$('#bDetail').val()
                        console.log(bn)
                        console.log(bc)
                        console.log(bd)

                        // 如果有一项数据未填，则弹出提示框
                        if (bn==''||bc==''||bd==''){
                            layer.open({
                                title: '<div style="color:red">错误</div>'
                                ,content: '请填写每个数据'
                            });
                            // 如果书籍数量不是整数，则弹出提示框
                        } else if (bc.length!=String(parseInt(bc)).length||!Number.isInteger(parseInt(bc))){
                            layer.open({
                                title: '<div style="color:red">错误</div>'
                                ,content: '请正确填写数量(数量应为整数)'
                            });
                        } else{
                            //向服务端发送新增指令
                            // '/book/addbook'
                            layui.$.ajax({
                                type: 'post',
                                url: '/book/addbook',
                                data: {'bookName':bn,
                                    'bookCounts':bc,
                                    'detail':bd},
                                success:function (msg) {

                                }
                            })
                            layer.open({
                                title: '<div style="color:#44ff00">完成</div>'
                                ,content: '增加成功'
                            });
                            layer.close(index)

                        }



                    }
                })

            }

        });

上面layer.open里content绑定的id

<!--新增表格的具体内容,display: none表示隐藏（编辑和新增共用的表格）-->
<div style="display: none" id="addone">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">书籍名称</label>
            <div class="layui-input-block">
                <input id="bName" type="text" name="bookName" lay-verify="title" autocomplete="off" placeholder="请输入书名" class="layui-input" required>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">书籍数量</label>
            <div class="layui-input-block">
                <input id="bCount" type="text" name="bookCounts" lay-verify="title" autocomplete="off" placeholder="请输入数量" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">书籍详情</label>
            <div class="layui-input-block">
                <input id="bDetail" type="text" name="detail" lay-verify="title" autocomplete="off" placeholder="请输入备注" class="layui-input">
            </div>
        </div>
    </form>
</div>

4、后端java对应的代码

后端新增的java代码

    // 新增一本书籍
    @RequestMapping("/addbook")
    @ResponseBody
    public String addbook(Books books){
        System.out.println("进入了addbook方法"+books);

        mapper.insertBook(books);
        return "ok";
    }

5、效果

点击新增后，弹出界面，这里对数量和三个数据都不为空作了判断（数据不能为空，数量必须是整数）

如果数据为空，会弹出提示框

如果数据不为整数，会弹出提示框

删+改

1、先定义一个表格工具栏

<!-- 表格工具栏（编辑和删除）-->
<script type="text/html" id="bookbar">
    <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>

2、绑定

然后在table.render里的cols参数中新增一栏绑定表格工具栏

// 设置表格工具栏
{field: '操作',toolbar:'#bookbar'}

3、编写javascript代码

在layui.use里编写对应的删除和编辑事件，弹出层与上面新增共用一个界面

        //表格工具栏（编辑和删除）
        table.on('tool(bookdata)',function (obj) {
            var eventName = obj.event;
            var bookid = obj.data.bookID;
            console.log(bookid)
            //console.log(obj);
            console.log(eventName)
            // 删除
            if (eventName == 'del'){
                // 确认框
                layer.confirm('确认删除吗？',function (index) {
                    // 前端删除指定tr
                    obj.del()

                    //关闭弹出层,index是当前弹出层的的下标
                    layer.close(index);

                    //向服务端发送删除指令
                    // '/book/delbook'
                    layui.$.ajax({
                        type: 'get',
                        url: '/book/delbook',
                        data: {'id':bookid},
                        success:function () {
                            console.log('ok')
                        }
                    })
                });


            }else if (eventName=='edit'){// 修改
                // 将所要编辑的内容先显示出来
                layui.$('#bName').val(obj.data.bookName)
                layui.$('#bCount').val(obj.data.bookCounts)
                layui.$('#bDetail').val(obj.data.detail)

                layer.open({
                    type:1,
                    title:"编辑",
                    content:layui.$('#addone'),
                    btn:['确定','取消'],
                    yes:function(index, layero){
                        // 取出输入框的内容
                        var bn = layui.$('#bName').val()
                        var bc = layui.$('#bCount').val()
                        var bd = layui.$('#bDetail').val()
                        console.log(bn)
                        console.log(bc)
                        console.log(bd)

                        // 如果有一项数据未填，则弹出提示框
                        if (bn==''||bc==''||bd==''){
                            layer.open({
                                title: '<div style="color:red">错误</div>'
                                ,content: '请填写每个数据'
                            });
                            // 如果书籍数量不是整数，则弹出提示框
                        } else if (bc.length!=String(parseInt(bc)).length||!Number.isInteger(parseInt(bc))){
                            layer.open({
                                title: '<div style="color:red">错误</div>'
                                ,content: '请正确填写数量(数量应为整数)'
                            });
                        } else{
                            //向服务端发送修改指令
                            // '/book/updatebook'
                            layui.$.ajax({
                                type: 'post',
                                url: '/book/updatebook',
                                data: {'bookID':bookid,
                                    'bookName':bn,
                                    'bookCounts':bc,
                                    'detail':bd},
                                success:function (msg) {
                                        console.log(msg)
                                }
                            })
                            layer.open({
                                title: '<div style="color:#44ff00">完成</div>'
                                ,content: '修改成功'
                            });
                            // 前端更新数据
                            obj.update({
                                bookID:bookid,
                                bookName:bn,
                                bookCounts:bc,
                                detail:bd
                            })
                           layer.close(index)
                        }
                    }
                })
            }
        });

4、后端java对应的代码

    // 删除书籍
    @RequestMapping("/delbook")
    @ResponseBody
    public String delbook( int id){
        System.out.println("进入了delbook方法"+id);

        int i = mapper.deleteBookById(id);
        return " "+i;
    }
    //修改书籍
    @RequestMapping("/updatebook")
    @ResponseBody
    public String updatebook(Books books){
        System.out.println("进入了updatebook方法"+books);
        int i = mapper.updateBook(books);
        return ""+i;
    }

6、效果

点击删除，出现提示框

点击编辑，会把该行的数据全都显示出来

修改后，点击确定会和上面的新增一样对数据进行判断（都不能为空，数量必须为整数）