单表单嵌套多个数据源并显示记录，行内编辑（layui）

本文主要是介绍单表单嵌套多个数据源并显示记录，行内编辑（layui），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

layer表格官方 https://www.layui.com/doc/modules/table.html

前后端数据格式以对象数组，其他方式同理

@RequestMapping(value="/show/info",method = RequestMethod.POST)@ResponseBodypublic Page show(HttpServletRequest request) {   int page = Integer.parseInt(request.getParameter("page"));int limit = Integer.parseInt(request.getParameter("limit"));//总数int start = (page-1)*limit;int size = limit;int count = uploadPicMapper.count(start,size);              List<UploadPic> pList = uploadPicMapper.get(start,size);     Page pag = new Page();pag.setCode(0);pag.setCount(count);pag.setMsg("");pag.setData(pList);return pag;  }@RequestMapping(value="/add/jinK/info",method = RequestMethod.POST)public ModelAndView saveJinK(@RequestBody UploadPic[] uploadPic) {int len = uploadPic.length;for(int i =0;i<len;i++) {UploadPic upload = new UploadPic();upload.setId(uploadPic[i].getId());upload.setName(uploadPic[i].getName());upload.setUrl("");uploadPicMapper.insert(upload);}return new ModelAndView(new MappingJackson2JsonView(), new HashMap<String, Object>() {{put("success", true);put("message", "完成");}}); }

数据格式：

[{"id": 16,"name": "50","url": "","LAY_TABLE_INDEX": 0
}, {"id": 17,"name": "35","url": "","LAY_TABLE_INDEX": 1
}, {"id": 18,"name": "8","url": "","LAY_TABLE_INDEX": 2
}]

只根据layer文档，实现基础操作，做参考

<html>
<head>
<title>表单</title>
<style>
#bothForm{min-height:680px;overflow:hidden;
}#jinK{min-height:300px;
}#yuanL{min-height:300px;
}#tieG{min-height:50px;
}#jinZ{min-height:180px;
}
.tg{margin-top:20px;float:right;padding-right:5px;
}
.jz_class{float:left;width:49%;min-height:80px;
}
.footer_qm{min-height:150px;
}
</style>
</head>
<body><p>日期:1</p><div id="bothForm" style="width:805px;border:1px solid black;margin:10px auto;"><div id="jinK" style="width:400px;border-right:1px solid black;float:left;"><span>进库</span>    <table id="jinK_F" lay-filter="test1"></table><button class="layui-btn layui-btn-primary layui-btn-fluid" id="addJinK">新增</button></div><div id="yuanL" style="width:400px;float:left;"><span>原料</span>    <table id="yuanL_F" lay-filter="test2"></table><button class="layui-btn layui-btn-primary layui-btn-fluid" id="addYuanL">新增</button></div><div id="tieG" style="width:100%;border-top:1px solid black;border-bottom:1px solid black;margin-top:5px;float:left;"><span class="tg">铁管数(支):<input type="text" /></span><span class="tg">总重(KG):<input type="text" /></span></div><div id="jinZ" style="width:100%;border-bottom:1px solid black;float:left;">    <div class="jz_class"><span class="tg">型号:<input type="text" style="width:50px;"/>/自重:<input type="text" style="width:50px;"/>/总重:<input type="text" style="width:50px;"/></span></div><div class="jz_class"><span class="tg">型号:<input type="text" style="width:50px;"/>/自重:<input type="text" style="width:50px;"/>/总重:<input type="text" style="width:50px;"/></span></div><hr style="color:black;"/><div class="jz_class"]><span class="tg">型号:<input type="text" style="width:50px;"/>/自重:<input type="text" style="width:50px;"/>/总重:<input type="text" style="width:50px;"/></span></div><div class="jz_class"><span class="tg">型号:<input type="text" style="width:50px;"/>/自重:<input type="text" style="width:50px;"/>/总重:<input type="text" style="width:50px;"/></span></div></div><div class="footer_qm" style="width:100%;float:left;"><button class="layui-btn layui-btn-primary layui-btn-fluid" id="submit" style="margin-top:115px;">保存</button></div></div><script>layui.use('table', function(){var table = layui.table;table.render({elem: '#jinK_F',width:400,url: '${ctx}/layui/show/info',page: false,limit:20,method:'post',cols: [[ {field: 'id', title: '货品类型', width:250,edit:true},{field: 'name', title: '重量(KG)', width:145,edit:true}]],parseData: function(res){ //res 即为原始返回的数据return {"code": res.code, "msg": res.msg, "count": res.count, "data": res.data };}});table.on('row(test1)', function(obj){console.log(obj.tr) //得到当前行元素对象console.log(obj.data) //得到当前行数据});$("#addJinK").click(function(){var dataBak = [];   //定义一个空数组,用来存储之前编辑过的数据已经存放新数据var tableBak = table.cache.jinK_F; //获取之前编辑过的全部数据，前提是编辑数据是要更新缓存，stock_add_table 为表格的idfor (var i = 0; i < tableBak.length; i++) {dataBak.push(tableBak[i]);      //将之前的数组备份}dataBak.push({   "id": "","name": "","url":""});table.reload("jinK_F",{url:'',data:dataBak   // 将新数据重新载入表格})});table.render({elem: '#yuanL_F',width:400,url: '${ctx}/layui/show/info',page: false,limit:20,method:'post',cols: [[ {field: 'id', title: '货品类型', width:250,edit:true},{field: 'name', title: '重量(KG)', width:145,edit:true}]],parseData: function(res){ return {"code": res.code, "msg": res.msg, "count": res.count, "data": res.data };}});$("#addYuanL").click(function(){var dataBak = [];   //定义一个空数组,用来存储之前编辑过的数据已经存放新数据var tableBak = table.cache.yuanL_F; //获取之前编辑过的全部数据，前提是编辑数据是要更新缓存，stock_add_table 为表格的idfor (var i = 0; i < tableBak.length; i++) {dataBak.push(tableBak[i]);      //将之前的数组备份}dataBak.push({   "id": "","name": "","url":""});table.reload("yuanL_F",{url:'',data:dataBak   // 将新数据重新载入表格})});//提交$("#submit").click(function(){$.ajax({type:'post',url:'${ctx}/layui/add/jinK/info',dataType:"json",contentType:"application/json", data:JSON.stringify(layui.table.cache.jinK_F),success:function(data){if (data.success == true) {$.messager.alert("操作提示", data.message);} else {$.messager.alert("操作提示", data.message);}}});})});</script>
</body>
</html>

备注：

table.render({
elem: ‘#demp’
,url: ‘’
,parseData: function(res){ //res 即为原始返回的数据
return {
“code”: res.status, //解析接口状态
“msg”: res.message, //解析提示文本
“count”: res.total, //解析数据长度
“data”: res.data.item //解析数据列表
};
}
//,…… //其他参数
});

该参数非常实用，为 layui 2.4.0 开始新增（官方提示），该参数比较容易与数据绑定，推荐使用