关于layui:00037layui-表单有子列表如何动态新增和保存弹窗版

表单中有一个接管明细的子列表，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 的转换