Layui的数据表格增删改，后端回传json格式封装

最近有个需求，实现前端页面一个数据表格可编辑，随原页面的表单提交json数据，然后后端回传显示。Layui原来也没怎么用过，记个笔记记录一下。

一、前端录入页面数据表格代码：

<script type="text/javascript">
    layui.use(['table', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;

        table.render({
            elem: '#tb',
            size: 'sm',
            page: true,
            limit: 50,
            limits: [50, 100],
            toolbar: 'default',
            cellMinWidth:135,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: '测试名字1', edit: 'text', align: 'center'},
                {field: 'testName2', title: '测试名字2', edit: 'text', align: 'center'},
                {field: 'testName3', title: '测试名字3', edit: 'text', align: 'center'},
            ]],
            data: [{"id": " ", "testName2": " ", "testName3": " "}]
        });

        //监听头工具栏事件
        table.on('toolbar(tb)', function (obj) {

            var checkStatus = table.checkStatus(obj.config.id),
                checkData = checkStatus.data;//获取选中数据

            switch (obj.event) {
                case 'add':
                    var oldData = table.cache["tb"];
                    var datas = {
                        "id": " ", "testName2": " ", "testName3": " "
                    }
                    oldData.push(datas);
                    table.reload('tb', {data: oldData});
                    layer.msg('添加一行');
                    break;
                case 'delete':
                    var oldData = table.cache["tb"];
                    if (checkData.length === 0) {
                        layer.msg('最少选中一行');
                    } else {
                        var newData = [];
                        for (var i = 0; i < oldData.length; i++) {
                            var datas = oldData[i];
                            if (!datas.LAY_CHECKED) {//非选中的存入数组
                                newData.push(datas);
                            }
                        }
                        table.reload('tb', {data: newData});
                        layer.msg('delete');
                    }
                    break;
            }
        });
    });
</script>

添加行的有个小bug，超过分页行数后，再添加会变成无数据。所以只好初始设置分页为50。
另外，搞了个隐藏的标签随表单一起提交：

        <div><%--数据表格--%>
            <table class="layui-hide" id="tb" lay-filter="tb"></table>
            <input type="text" name="attJSON" id="attJSON" value="" style="display: none" ng-model="processVarMap.attJSON"/>
        </div>

从数据表格的缓存中获取表格内输入的值放入标签：

        var getTbData = layui.table.cache["tb"];
        var jsonTbData= JSON.stringify(getTbData);
        $("#attJSON").val(jsonTbData);
        console.log($("#attJSON").val());

数据显示页面代码：

<table class="layui-hide" id="tb"></table>
<script>
    layui.use('table', function(){

        var table = layui.table;
        table.render({
            elem: '#tb',
            size: 'sm',
            page: true,
            limit: 10,
            limits: [10, 50, 100],
            url:'${ctxPath}/ProcessIDCPriceApproval/listAttachTable.do?id=${attachId}',
            parseData:function (res){
                return{
                    "code":res.code,
                    "msg":res.msg,
                    "count":JSON.parse(res.data).length,
                    "data":JSON.parse(res.data),
                };
            },
            cellMinWidth:135,
            toolbar: 'default',
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: '测试名字1', edit: 'text', align: 'center'},
                {field: 'testName2', title: '测试名字2', edit: 'text', align: 'center'},
                {field: 'testName3', title: '测试名字3', edit: 'text', align: 'center'},

            ]],
        });      
    });

二、后端代码：

这个之前从table的缓存中提取得到提交的json串含有Layui数据表格的索引，回传Layuitable显示的时候不需要，需要去掉。所以后端用了个正则表达式去除。

        String regex = ",\""+"LAY_TABLE_INDEX"+"\":"+"\\d{1,3}";
        String repJSON = recJSON.replaceAll(regex,"");//去除data中"LAY_TABLE_INDEX"

为了满足layui数据表格的返回格式，封装了一下数据格式。

        HashMap<String,Object> resultMap = new HashMap<>();
        resultMap.put("code",0);
        resultMap.put("msg","");
        resultMap.put("count",100);//默认设置100条，实际条数由前端页面解析json获得
        resultMap.put("data",repJSON);//返回code、msg、count、data是layui table数据接口要求
        return resultMap;

实现效果：

1.jpg

2.jpg