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', width: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('操作失败'); }