00037-layui 表单有子列表，如何动态新增和保存（弹窗版）？
表单中有一个接收明细的子列表，html:
接收明细
<script type="text/html" id="companyPaperRecordDetailListTable-toolbar">
</script>
<script type="text/html" id="companyPaperRecordDetailListTable-bar">
编辑
</script>
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"%>
公司证照记录明细
<%----%>
文件名
状态
操作
<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 = $([''
,''+ file.name +' '
,'待上传 '
,''
,''
,''
,' '
,' '].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('已上传');
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('上传失败');
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 = $([''
,'附件'+(index+1)+' '
,'已上传 '
,''
,''
,' '
,' '].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>
主页面添加记录（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 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的转换