记录:fastadmin表单中二维数组组件+图片上传
add.html代码
<div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Quanyi')}:</label><div class="col-xs-12 col-sm-10"><style>.plupload-preview li, .faupload-preview li{margin-top:0px;}.plupload-preview a.btn-trash{width:20px;margin-top: -35px;margin-left: 40px;}.plupload-preview a:first-child, .faupload-preview a:first-child{width:40px;height:40px;padding: 0;}.plupload-preview a img, .faupload-preview a img{width:40px;height:40px;}</style><table class="table fieldlist" data-name="row[quanyi]" data-template="row[quanyi]tpl"><tr><td>标题</td><td>介绍</td><td>图标</td><td>选择图标</td><td width="90">{:__('Operate')}</td></tr><tr><td colspan="5"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a><textarea name="row[quanyi]" class="form-control hide" cols="30" rows="5">[{"title":"尊贵标识","intro":"","image":"/uploads/20240826/a04ebfee74aa75dc8503638860c7a018.jpg"},{"title":"专属优惠券","intro":"","image":""},{"title":"消费返多倍积分","intro":"","image":""},{"title":"会员商品","intro":"","image":""}]</textarea></td></tr></table><script type="text/html" id="row[quanyi]tpl"><tr><td><input type="text" name="<%=name%>[<%=index%>][title]" class="form-control" value="<%=row.title%>"/></td><td><input type="text" name="<%=name%>[<%=index%>][intro]" class="form-control" value="<%=row.intro%>"/></td><td><input id="c-image<%=index%>" class="form-control" name="<%=name%>[<%=index%>][image]" style="display: none!important;" type="text" value="<%=row.image%>"><div class="row list-inline plupload-preview spe_img_one" id="p-image<%=index%>"></div></td><td><div class="input-group-addon no-border no-padding"><span><button type="button" id="plupload-image<%=index%>" class="btn btn-danger plupload" data-input-id="c-image<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image<%=index%>"><i class="fa fa-upload"></i> {:__('Upload')}</button></span><span><button type="button" id="fachoose-image<%=index%>" class="btn btn-primary fachoose faselect" data-input-id="c-image<%=index%>" data-mimetype="image/*" data-preview-id="p-image<%=index%>" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span></div></td><td width="90"><span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span><span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span></td></tr></script></div></div>
js代码
add: function () {// 此处必加,用于表单中二维数组组件中的图片上传和选择按钮生效$(document).on("fa.event.appendfieldlist", '[data-name="row[quanyi]"] .btn-append', function(e, obj){Form.events.faupload(obj); //绑定上传事件Form.events.faselect(obj); //绑定选择事件});Controller.api.bindevent();},