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('操作失败');
}
来源：oschina
链接：https://my.oschina.net/u/2552902/blog/4565611