00037-layui 表单有子列表，如何动态新增和保存（弹窗版）？

表单中有一个接收明细的子列表，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'); //重传操作hide

                    attachmentList.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的转换