单表单嵌套多个数据源并显示记录，行内编辑（layui）
前后端数据格式以对象数组，其他方式同理
@RequestMapping(value="/show/info",method = RequestMethod.POST)
@ResponseBody
public 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 为表格的id
for (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 为表格的id
for (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 开始新增（官方提示），该参数比较容易与数据绑定，推荐使用