00028-layui 表单有子列表，如何动态新增和保存（表格table行编辑）？

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="serviceMaterialListTable" lay-filter="serviceMaterialListTable"></table>

					<script type="text/html" id="serviceMaterialListTable-toolbar">
						<div class="layui-btn-container">
							<button class="layui-btn layui-btn-sm" data-type="addMaterial">添加</button>
						</div>
					</script>

					<script type="text/html" id="serviceMaterialListTable-bar">
						<%--<a class="layui-btn layui-btn-xs" lay-event="editMaterial">编辑</a>--%>
						<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delMaterial">删除</a>
					</script>
					<script type="text/html" id="serviceMaterialTypeTpl">
						<select name="type" lay-filter="service_material_type" autocomplete="off">
							<option value="">请选择</option>
							{{#
							var typeArr = layui.dict.options("service_materialType");
							layui.each(typeArr, function(index, item){
							}}
							<option value="{{item[0]}}" {{d.type==item[0]?'selected':''}}>{{item[1]}}</option>
							{{# }) }}
						</select>
					</script>
					<script type="text/html" id="certTypeTpl">
						<select name="type" lay-filter="cert_type"  autocomplete="off">
							<option value="">请选择</option>
							{{#
							var certTypeArr = layui.dict.options("company_paper_certType");
							layui.each(certTypeArr, function(index, item){
							}}
							<option value="{{item[0]}}" {{d.certType==item[0]?'selected':''}}>{{item[1]}}</option>
							{{# }) }}
						</select>
					</script>
				</div>
			</div>
		</div>

方法：

var active = {
            getSubData:function () {
				var materialList = active.getMaterialList();
				var flowList = active.getFlowList();
				var minDay = 0;
				var maxDay = 0;
                $.each(flowList,function (index,item) {
                    minDay += item.minDay?parseFloat(item.minDay):0;
                    maxDay += item.maxDay?parseFloat(item.maxDay):0;
                });
                return {
                    materialList:materialList,
                    flowList:flowList,
                    minDay:minDay,
                    maxDay:maxDay
				}
            },
            getMaterialList:function () {
                var tableObj = materialTable;
                var config = tableObj.config;
                var dataTemp = config.data||[];
                $.each(dataTemp,function (index,item) {
                    item = $.extend(item,{createTime:null,modifyTime:null});
                })
                return dataTemp;
            },
            getFlowList:function () {
                var tableObj = serviceFlowTable;
                var config = tableObj.config;
                var dataTemp = config.data||[];
                $.each(dataTemp,function (index,item) {
                    item = $.extend(item,{createTime:null,modifyTime:null});
                });
                return dataTemp;
            },
            addFlow:function () {
                var tableObj = serviceFlowTable;
                var config = tableObj.config;
                var dataTemp = config.data||[];
                var len = dataTemp?(dataTemp.length+1):1;
                dataTemp.push({sortOrder:len,minDay:1,maxDay:1});
                serviceFlowTable = table.reload(config.id, $.extend(true, {
                    // 更新数据
                    data: dataTemp,
                }, config.page ? {
                    // 一般新增都是加到最后，所以始终打开最后一页
                    page: {
                        curr: Math.ceil(dataTemp.length / config.page.limit)
                    }
                } : {}));
            },
            editFlow:function (obj) {

            },
            delFlow:function (data) {
                var tableObj = serviceFlowTable;
                var config = tableObj.config;
                var dataTemp = config.data||[];
                // 得到tr的data-index
                var trElem = data.tr.first();
                var index = trElem.data('index');
                // 计算出在data中的index
                var dataIndex = index;
                // 删除对应下标的数据
                dataTemp.splice(dataIndex, 1);

                // 重新接收reload返回的对象，这个很重要
                serviceFlowTable = table.reload(config.id, $.extend(true, {
                    // 更新数据
                    data: dataTemp
                }, {}));
            },
            addMaterial:function () {
                var tableObj = materialTable;
                var config = tableObj.config;
                var dataTemp = config.data||[];
                var len = dataTemp?(dataTemp.length+1):1;
                dataTemp.push({sortOrder:len});
                materialTable = table.reload(config.id, $.extend(true, {
                    // 更新数据
                    data: dataTemp,
                }, config.page ? {
                    // 一般新增都是加到最后，所以始终打开最后一页
                    page: {
                        curr: Math.ceil(dataTemp.length / config.page.limit)
                    }
                } : {}));
            },
            editMaterial:function (obj) {

            },
            delMaterial:function (data) {
                var tableObj = materialTable;
                var config = tableObj.config;
                var dataTemp = config.data||[];
                // 得到tr的data-index
                var trElem = data.tr.first();
                var index = trElem.data('index');
                // 计算出在data中的index
                var dataIndex = index;
                // 删除对应下标的数据
                dataTemp.splice(dataIndex, 1);

                // 重新接收reload返回的对象，这个很重要
                materialTable = table.reload(config.id, $.extend(true, {
                    // 更新数据
                    data: dataTemp
                }, {}));
            },
            setDataList:function () {
                window.parent.formData = $.extend(window.parent.formData,{serviceMaterialList:serviceMaterialList})
                window.parent.formData = $.extend(window.parent.formData,{serviceFlowList:serviceFlowList})
            },
		}

js:

var serviceMaterialList = [];

        if(id){
            var rtnList2 = admin.syncReq(ctx+"/base/serviceMaterial/queryByAll",{serviceId:id});
            serviceMaterialList = rtnList2.data;
        }
        var materialTable = table.render({
            elem:'#serviceMaterialListTable'
			,data:serviceMaterialList
            ,cellMinWidth: 80
            ,toolbar: '#serviceMaterialListTable-toolbar'
            ,defaultToolbar: []
            ,cols: [[
                {field:'licenceName', title: '证照名称', align: 'center',minWidth:100,edit:'text' }
                ,{field:'type', title: '资料类型', align: 'center',minWidth:100,templet:'#serviceMaterialTypeTpl'}
                ,{field:'certType', title: '证件类型', align: 'center',minWidth:100,templet:'#certTypeTpl'}
                ,{field:'sortOrder', title: '排序', align: 'center',minWidth:100,edit:'text'}
                ,{title:'操作', toolbar: '#serviceMaterialListTable-bar', 120}
            ]]
            ,done: function(res, curr, count){
                serviceMaterialList = res.data;
            }
            ,height: '250'
        });



        table.on('tool(serviceMaterialListTable)', function(obj){
            switch(obj.event){
                case 'delMaterial':
                    active.delMaterial(obj);
                    break;
            }
        });
        
        form.on('select(service_material_type)', function(obj){
            var tr_index = $(obj.othis).parent().parent().parent().data("index");
            $.each(serviceMaterialList,function (index,item) {
				if(tr_index==index){
                    item = $.extend(item,{type:obj.value})
				}
            })

        });
        form.on('select(cert_type)', function(obj){
            var tr_index = $(obj.othis).parent().parent().parent().data("index");
            $.each(serviceMaterialList,function (index,item) {
                if(tr_index==index){
                    item = $.extend(item,{certType:obj.value})
                }
            })
        });
        
        $("body").on('click','.layui-btn-container .layui-btn', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        window.parent._active = active;
        

父页面获取表单的所有数据：

var subData = window._active.getSubData();
                            var materialList = subData.materialList;
                            var flowList = subData.flowList;
                            var minDay = subData.minDay;
                            var maxDay = subData.maxDay;
                            field = $.extend(field,{
                                serviceMaterialJson:JSON.stringify(materialList),
                                serviceFlowJson:JSON.stringify(flowList),
                                minDay:minDay,
                                maxDay:maxDay,
                            })

                            field.id = rec.id;
                            var rtn = admin.syncReq(ctx+"/base/service/modify",field);
                            if(rtn && rtn.code==0){
                                layer.msg('操作成功');
                                active.reload();
                                layer.close(index);
                            }else{
                                layer.msg('操作失败');
                            }