记录：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>图标</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">
[{"award_level":"3","funds_type_id":"","title":"尊贵标识","intro":"","image":"/uploads/20240826/a04ebfee74aa75dc8503638860c7a018.jpg"},{"award_level":"3","funds_type_id":"","title":"专属优惠券","intro":"","image":""},{"award_level":"3","funds_type_id":"","title":"消费返多倍积分","intro":"","image":""},{"award_level":"3","funds_type_id":"","title":"会员商品","intro":"","image":""}]
</textarea>
</td>
</tr>
</table>
<script type="text/html" id="row[quanyi]tpl">
<tr>
<td>
<select id="c-award_type" class="form-control selectpicker" name="row[award_type]" data-rule="required">
<option value="">请选择</option>
<option value="1" <%if(row.award_level==1){
%>selected<%}%>>特等奖</option>
<option value="2" <%if(row.award_level==2){
%>selected<%}%>>一等奖</option>
<option value="3" <%if(row.award_level==3){
%>selected<%}%>>二等奖</option>
<option value="4" <%if(row.award_level==4){
%>selected<%}%>>三等奖</option>
<option value="5" <%if(row.award_level==5){
%>selected<%}%>>优秀奖</option>
</select>
</td>
<td>
<input type="text" name="<%=name%>[<%=index%>][funds_type_id]" class="form-control selectpage" data-rule="required" data-source="teachers/funds/funds_type_list" data-field="name" value="<%=row.funds_type_id%>" placeholder="类目"/>
</td>
<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>
edit.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>图标</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">{$row.quanyi|htmlentities}</textarea>
</td>
</tr>
</table>
<script type="text/html" id="row[quanyi]tpl">
<tr>
<td>
<select id="c-award_type" class="form-control selectpicker" name="row[award_type]" data-rule="required">
<option value="">请选择</option>
<option value="1" <%if(row.award_level==1){
%>selected<%}%>>特等奖</option>
<option value="2" <%if(row.award_level==2){
%>selected<%}%>>一等奖</option>
<option value="3" <%if(row.award_level==3){
%>selected<%}%>>二等奖</option>
<option value="4" <%if(row.award_level==4){
%>selected<%}%>>三等奖</option>
<option value="5" <%if(row.award_level==5){
%>selected<%}%>>优秀奖</option>
</select>
</td>
<td>
<input type="text" name="<%=name%>[<%=index%>][funds_type_id]" class="form-control selectpage" data-rule="required" data-source="teachers/funds/funds_type_list" data-field="name" value="<%=row.funds_type_id%>" placeholder="类目"/>
</td>
<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代码
api: {
bindevent: function () {
// 此处必加，用于表单中二维数组组件中的图片上传和选择按钮生效
$(document).on("fa.event.appendfieldlist", '[data-name="row[list]"] .btn-append', function(e, obj){
Form.events.faupload(obj); //绑定上传事件
Form.events.faselect(obj); //绑定选择事件
//绑定动态下拉组件
Form.events.selectpage(obj);
//绑定日期组件
Form.events.datetimepicker(obj);
//绑定selectpicker组件
Form.events.selectpicker(obj);
});
/**
* 监听提交按钮
*/
$(document).on("click", ".submitForm", function (obj) {
$('#status').val(obj.target.getAttribute('data-value'));
});
Form.api.bindevent($("form[role=form]"));
}
}