效果图

html:
<div class="form-group row">
<label class="control-label col-xs-12 col-sm-2">权益说明:</label>
<div class="col-xs-12 col-sm-8">
<dl class="fieldlist" data-template="eventtpl" data-name="row[json]">
<dd>
<ins>说明</ins>
<ins>上传图片</ins>
</dd>
<dd><a href="javascript:;" class="btn btn-sm btn-success btn-append btn-append-json"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
<!--请注意 dd和textarea间不能存在其它任何元素,实际开发中textarea应该添加个hidden进行隐藏-->
<textarea name="row[json]" class="form-control hide" cols="30" rows="5" hidden="">{$row.json}</textarea>
</dl>
<script id="eventtpl" type="text/html">
<dd class="form-inline">
<ins><input type="text" name="<%=name%>[<%=index%>][name]" class="form-control" value="<%=row.name%>" placeholder="名称"/></ins>
<!-- //图片上传按钮-->
<ins style="width: 50%;">
<div class="input-group">
<input id="c-jsonimage<%=index%>" class="form-control" size="50" name="<%=name%>[<%=index%>][image]" type="text" value="<%=row.image%>">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="faupload-image<%=index%>" class="btn btn-danger faupload" data-input-id="c-jsonimage<%=index%>" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-jsonimage<%=index%>"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
<span><button type="button" id="fachoose-image<%=index%>" class="btn btn-primary fachoose" data-input-id="c-jsonimage<%=index%>" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
</div>
<span class="msg-box n-right" for="c-jsonimage<%=index%>"></span>
</div>
<ul class="row list-inline faupload-preview" id="p-jsonimage<%=index%>"></ul>
</ins>
<!--下面的两个按钮务必保留-->
<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>
</dd>
</script>
</div>
</div>
js:define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'user/equity/index' + location.search,
// add_url: 'user/equity/add',
edit_url: 'user/equity/edit',
// del_url: 'user/equity/del',
// multi_url: 'user/equity/multi',
// import_url: 'user/equity/import',
table: 'user_equity',
}
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'id',
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{field: 'name', title: __('Name'), operate: 'LIKE'},
{field: 'discount', title: __('Discount')},
{field: 'image', title: __('Image'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.image},
{field: 'remark', title: __('Remark'), operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.content},
{field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
{field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
]
]
});
// 为表格绑定事件
Table.api.bindevent(table);
},
add: function () {
$(document).on('fa.event.appendfieldlist','#add-form .btn-append-json',function(e,obj){
Form.events.faupload(obj)
Form.events.plupload(obj);
Form.events.faselect(obj)
})
Controller.api.bindevent();
},
edit: function () {
$(document).on('fa.event.appendfieldlist','#edit-form .btn-append-json',function(e,obj){
Form.events.faupload(obj)
Form.events.faselect($("form"))
// Form.events.fachoose(obj)
})
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
return Controller;
});