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

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

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

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;

}

});

});

添加行的有个小bug，超过分页行数后，再添加会变成无数据。所以只好初始设置分页为50。

另外，搞了个隐藏的标签随表单一起提交：

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

var getTbData = layui.table.cache["tb"];

var jsonTbData= JSON.stringify(getTbData);

$("#attJSON").val(jsonTbData);

console.log($("#attJSON").val());

数据显示页面代码：

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 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