表单中有一个接收明细的子列表，html:
<div class="layui-col-md12"><div class="layui-card"><div class="layui-card-header" style="background-color: #e6e6e6">接收明细</div><div class="layui-card-body" style="height: 200px;"><table class="layui-hide" id="companyPaperRecordDetailListTable" lay-filter="companyPaperRecordDetailListTable"></table><script type="text/html" id="companyPaperRecordDetailListTable-toolbar"><div class="layui-btn-container"><button class="layui-btn layui-btn-xs" data-type="addRec">添加</button></div></script><script type="text/html" id="companyPaperRecordDetailListTable-bar"><a class="layui-btn layui-btn-xs" lay-event="editRec">编辑</a><button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delRec">删除</button></script></div></div></div>
js :
var detailList = [];var detailTable = table.render({elem:'#companyPaperRecordDetailListTable',data:detailList,cellMinWidth: 80,toolbar: '#companyPaperRecordDetailListTable-toolbar',defaultToolbar: [],cols: [[,{field:'licenceName', title: '证照名称', align: 'center',minWidth:150 },{field:'certType', title: '证件类型', align: 'center',width:130,templet:tplCertType},{field:'cnt', title: '数量', align: 'center',width:130},{field:'attachment', title: '附件', align: 'center',width:160,templet:tplAttachment },{title:'操作', toolbar: '#companyPaperRecordDetailListTable-bar', width:150}]],height: '200',done: function(res, curr, count){}});
监听表格事件：
table.on('tool(companyPaperRecordDetailListTable)', function(obj){switch(obj.event){case 'editRec':active.editRec(obj);break;case 'showRec':active.showRec(obj);break;case 'delRec':active.delRec(obj);break;}});
对应的事件：
var active = {getSubData:function () {var cnt = 0;$.each(detailList,function (index,item) {cnt+=parseInt(item.cnt);})return {attachment:attachmentList.join(","),detailJson:JSON.stringify(detailList),detailLen:detailList.length,cnt:cnt}},addRec: function(){window.formData = {};var dialog = layer.open({type: 2,title: '接收明细',content: 'companyPaperRecordDetailForm.jsp',maxmin: true,area: ['95%','95%'],offset:'t',btn: ['确定', '取消'],btnAlign: 'c',yes: function(index, layero){var iframeWindow = window['layui-layer-iframe'+ index],submit = layero.find('iframe').contents().find("#companyPaperRecordDetailForm-submit");iframeWindow.layui.form.on('submit(companyPaperRecordDetailForm-submit)', function(data){var field = data.field;var certType = field.certType;try{var subAttachment = window._active.getDetailAttachment();if(certType==2){if(!subAttachment){return layer.msg('电子档要上传附件');}}if(subAttachment){field = $.extend(field,subAttachment);}}catch (err){ }detailList.push(field);detailTable.reload({data:detailList});layer.close(index);});submit.trigger('click');}});
// layer.full(dialog)},editRec:function(obj){var rowIndex = obj.tr.data('index');var rec = obj.data;window.formData = rec;var dialog = layer.open({type: 2,title: '接收明细',content: 'companyPaperRecordDetailForm.jsp',maxmin: true,area: ['95%','95%'],offset:'t',btn: ['确定', '取消'],btnAlign: 'c',yes: function(index, layero){var iframeWindow = window['layui-layer-iframe'+ index],submit = layero.find('iframe').contents().find("#companyPaperRecordDetailForm-submit");iframeWindow.layui.form.on('submit(companyPaperRecordDetailForm-submit)', function(data){var field = data.field;var certType = field.certType;try{var subAttachment = window._active.getDetailAttachment();if(certType==2){if(!subAttachment){return layer.msg('电子档要上传附件');}}if(subAttachment){field = $.extend(field,subAttachment);}}catch (err){ }obj.update($.extend({},field));detailList = detailList.map(function (_item,_index) {if(_index==rowIndex){_item = $.extend({},field);}return _item;})layer.close(index);});submit.trigger('click');}});
// layer.full(dialog)},delRec:function (obj) {var rowIndex = obj.tr.data('index');obj.del();detailList.splice(rowIndex,1);active.setDataList();},reload: function(){detailTable.reload();},};
页面相关按钮事件：
$("body").on('click','.layui-btn-container .layui-btn', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';});
子表单编辑页面内容：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/taglibs.jsp"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html>
<html >
<head><meta charset="utf-8"><title>公司证照记录明细</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"><link rel="stylesheet" href="${ctxLayui}/layuiadmin/layui/css/layui.css" media="all"><link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/myStyle.css" media="all">
</head>
<body>
<div class="layui-form" lay-filter="companyPaperRecordDetailForm" id="companyPaperRecordDetailForm" style="padding: 20px 10px 0 0;"><div class="layui-form-item layui-form-item-45" ><label class="layui-form-label">证照名称<span style="color:red">*</span></label><div class="layui-input-block"><div id="licenceSel"></div><input type="hidden" name="licenceId"><input type="hidden" name="licenceName"></div></div><div class="layui-form-item layui-form-item-45" ><label class="layui-form-label">证件类型<span style="color:red">*</span></label><div class="layui-input-block"><select name="certType" lay-verify="required" id="certType" lay-filter="certType"></select></div></div><div class="layui-form-item layui-form-item-45" ><label class="layui-form-label">数量<span style="color:red">*</span></label><div class="layui-input-block"><input type="text" name="cnt" lay-verify="v_number|required" placeholder="" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item layui-form-item-90" ><label class="layui-form-label">附件</label><div class="layui-input-block"><%--<input type="text" name="attachment" placeholder="" autocomplete="off" class="layui-input">--%><div class="layui-upload"><button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="attachment-upload">上传图片</button><div class="layui-upload-list"><table class="layui-table"><thead><tr><th>文件名</th><th>状态</th><th>操作</th></tr></thead><tbody id="attachmentList"></tbody></table></div></div></div></div><div class="layui-form-item layui-hide"><input type="button" lay-submit lay-filter="companyPaperRecordDetailForm-submit" id="companyPaperRecordDetailForm-submit" value="添加"></div>
</div><script src="${ctxLayui}/layuiadmin/layui/layui.js"></script>
<script>layui.config({base: '${ctxLayui}/layuiadmin/'}).extend({index: 'lib/index'}).use(['index', 'form','dict','laydate','util','xmSelect','upload'], function(){var $ = layui.$ ,form = layui.form;var dict = layui.dict;var laydate = layui.laydate;var util = layui.util;var admin = layui.admin;var xmSelect = layui.xmSelect;var upload = layui.upload;var formData = window.parent.formData;if(formData){form.val("companyPaperRecordDetailForm",$.extend({},formData))}dict.setSelect("certType","company_paper_certType",formData?formData.certType:1);form.verify({v_number:admin.v_number,});var url = ctx+'/base/licence/queryByAll'var licenceData = [];var rtnLicence = admin.syncReq(url,{parentId:0});if(rtnLicence.code==0){licenceData = rtnLicence.data;}//===================start ============var licenceXmSelect = xmSelect.render({el: '#licenceSel',autoRow: true,filterable: true,remoteSearch:true,remoteMethod:function (val,cb,show) {if(val){var rtnSearch = admin.syncReq(url,{name:val,sqlWhere:' and parentId!=0 '});cb(rtnSearch.data)}else{cb([])}},tree: {show: true,showFolderIcon: true,showLine: true,indent: 20,expandedKeys: [],strict: false,lazy: true,load:function (item,cb) {if(item.parentId!=0){cb([])}else{if(!item.children || item.children.length==0){var _rtn=admin.syncReq(url,{parentId:item.id});if(_rtn.data && _rtn.data.length>0){var children = _rtn.data;$.each(children,function (index,_item) {_item.children = null;var _parent = {name:item.name,id:item.id}if(item.parent){_parent = $.extend(_parent,{parent:item.parent});}_item = $.extend(_item,{ parent:_parent });})cb(children);}}else{cb([])}}}},prop:{name:'name',value:'id'},height: '350px',radio:true,clickClose:true,data(){return licenceData;},show:function () {licenceXmSelect.update();},on:function (data) {var arr = data.arr;if(arr && arr.length>0){var node = arr[0];/*if(node.parentId!=0){licenceXmSelect.closed();}else{}*/var parentId = node.parentId;if(parentId!=0){form.val('companyPaperRecordDetailForm',{licenceName:node.name,licenceId:node.id,});}}}});var licenceId = formData?(formData.licenceId?formData.licenceId:null):null;if(licenceId){var _rtn=admin.syncReq(ctx+'/base/licence/queryById',{id:licenceId});var selRec = _rtn.data;if(selRec && selRec.parentId!=0){var rtn1 = admin.syncReq(url,{parentId:selRec.parentId});var children = rtn1.data;$.each(licenceData,function (index,item) {if(item.id==selRec.parentId){item.children = children;return false;}})}licenceXmSelect.reset();licenceXmSelect.setValue([licenceId])}else{licenceXmSelect.update();}//=======================end==================var attachment = formData.attachment;var attachmentList = [];var attachmentListView = $('#attachmentList')var uploadListIns = upload.render({elem: '#attachment-upload',url: ctx+'/upload/uploadImages',accept: 'images',acceptMime: 'image/*',exts: 'jpg|jpeg|png|bmp|gif' //只允许上传压缩文件,multiple: true,choose: function(obj){var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件obj.preview(function(index, file, result){var tr = $(['<tr id="upload-'+ index +'">','<td><a href="#" style="color:#1E9FFF" id="img_open_'+index+'" data-url="">'+ file.name +'</a></td>','<td>待上传</td>','<td>','<button class="layui-btn layui-btn-mini test-upload-demo-reload layui-hide">重传</button>','<button class="layui-btn layui-btn-mini layui-btn-danger test-upload-demo-delete">删除</button>','</td>','</tr>'].join(''));//单个重传tr.find('.test-upload-demo-reload').on('click', function(){obj.upload(index, file);});tr.find("a#img_open_"+index).on('click',function () {var url = $(this).attr("data-url");if(url){window.open(url);}})//删除tr.find('.test-upload-demo-delete').on('click', function(){delete files[index]; //删除对应的文件tr.remove();attachmentList.splice(index,1);uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选});attachmentListView.append(tr);});},done: function(res, index, upload){if(res.code == 0){ //上传成功var tr = attachmentListView.find('tr#upload-'+ index),tds = tr.children();var attachmentData = res.data;tds.eq(0).find("a#img_open_"+index).attr("data-url",attachmentData.url);tds.eq(1).html('<span style="color: #5FB878;">已上传</span>');tds.eq(2).find('.test-upload-demo-reload').addClass('layui-hide'); //重传操作hideattachmentList.push(attachmentData.url);return delete this.files[index]; //删除文件队列已经上传成功的文件}this.error(index, upload);},error: function(index, upload){var tr = attachmentListView.find('tr#upload-'+ index),tds = tr.children();tds.eq(1).html('<span style="color: #FF5722;">上传失败</span>');tds.eq(2).find('.test-upload-demo-reload').removeClass('layui-hide'); //显示重传}});var active = {getDetailAttachment:function () {return {attachment:(attachmentList&&attachmentList.length>0)?attachmentList.join(","):null}},setAttachmentListView:function(_attachmentList){$.each(_attachmentList,function (index,item) {var tr = $(['<tr id="upload-'+ index +'">','<td><a style="color:#1E9FFF" href="#" style="color:#1E9FFF" id="img_open_'+index+'" data-url="'+item+'">附件'+(index+1)+'</a></td>','<td>已上传</td>','<td>','<button class="layui-btn layui-btn-mini layui-btn-danger test-upload-demo-delete">删除</button>','</td>','</tr>'].join(''));//单个重传tr.find('.test-upload-demo-reload').on('click', function(){obj.upload(index, file);});tr.find("a#img_open_"+index).on('click',function () {var url = $(this).attr("data-url");if(url){window.open(url);}})//删除tr.find('.test-upload-demo-delete').on('click', function(){tr.remove();attachmentList.splice(index,1);uploadListIns.config.elem.next()[0].value = '';});attachmentListView.append(tr);});
// active.setDataList();},}if(attachment){$.each(attachment.split(","),function (index,item) {attachmentList.push(item);})active.setAttachmentListView(attachmentList)}window.parent._active = active;})
</script>
</body>
</html>主页面添加记录（companyPaperRecordTabList.jsp）：
addRec: function(){window.formData = {companyId:id};var dialog = layer.open({type: 2,title: '公司证照记录',content: 'companyPaperRecordForm.jsp',maxmin: true,area: ['95%','95%'],offset:'t',btn: ['确定', '取消'],btnAlign: 'c',yes: function(index, layero){var iframeWindow = window['layui-layer-iframe'+ index],submit = layero.find('iframe').contents().find("#companyPaperRecordForm-submit");iframeWindow.layui.form.on('submit(companyPaperRecordForm-submit)', function(data){var field = data.field;field.companyId = id;try{var subData = window._active.getSubData();if(!subData.detailLen || subData.detailLen==0){return layer.msg('请添加接收明细！')}var cnt = field.cnt;if(cnt!=subData.cnt){return layer.msg('填写的数量和接收明细的数量合计不相等！')}if(subData){field = $.extend(field,subData);}}catch (err){}var rtn = admin.syncReq(ctx+"/company/companyPaperRecord/add",field);if(rtn && rtn.code==0){layer.close(index);layer.msg('操作成功');setTimeout(function () { active.reload() },0);}else{layer.msg('操作失败');}});submit.trigger('click');}});
// layer.full(dialog)},
后台接收实体类，CompanyPaperRecordPo， 要有一个如下属性：
private String detailJson;
public String getDetailJson() {return detailJson;}public void setDetailJson(String detailJson) {this.detailJson = detailJson;}
然后将detailJson 转为 对应的实体子列表，并保存：
CommonJsonUtils jsonUtils = new CommonJsonUtils();String detailJson = po.getDetailJson();if(StringUtils.isNotEmpty(detailJson)){List<CompanyPaperRecordDetailPo> detailList = jsonUtils.toBeanList(detailJson, CompanyPaperRecordDetailPo.class);if(detailList!=null && detailList.size()>0){for(CompanyPaperRecordDetailPo detail:detailList){detail.setRecordId(po.getId());detail.setCreateTime(now);detail.setModifyTime(now);detail.setStatus(1);detail.setCompanyId(po.getCompanyId());detail.setAgentId(po.getAgentId());detail.setBusinessId(po.getBusinessId());detail.setId(IdUtils.id());result+=savePaper(po,detail,insert);}result+=companyPaperRecordDetailMapper.insertByBatch(detailList);}}
CommonJsonUtils 工具类，可在我博客其他文章找到：
工具类CommonJsonUtils：json 与 bean的转换