- 追加的元素 属于动态元素(未来元素),需要重新绑定事件
在js 加上监控
skus: function () {
$(document).on("click", ".btn-append", function(){
Form.events.plupload("#add-form");
});
Controller.api.bindevent();
},
2.最关键的一点就是在的自定义模版中
给上传的控件加上id 加上<%=index%> 当前行数,这样就可以 让上传ID 都不相同,上传就可以正常使用了
3.下面是全部的代码
js
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'shop/goods/index' + location.search,
add_url: 'shop/goods/add',
edit_url: 'shop/goods/edit',
// del_url: 'shop/goods/del',
multi_url: 'shop/goods/multi',
table: 'goods',
}
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'id',
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{field: 'title', title: __('Title')},
{
field: 'class_list',
title: __('Class_list'),
formatter: Table.api.formatter.label,
operate: false
},
{
field: 'image',
title: __('Image'),
events: Table.api.events.image,
formatter: Table.api.formatter.image,
operate: false
},
{
field: 'images',
title: __('Images'),
events: Table.api.events.image,
formatter: Table.api.formatter.images,
operate: false
},
{field: 'price', title: __('Price'), operate: 'BETWEEN'},
{field: 'vip_price', title: __('Vip_price'), operate: 'BETWEEN'},
{
field: 'statedata',
title: __('Statedata'),
searchList: {"0": __('下架'), "1": __('上架')},
formatter: Table.api.formatter.normal
},
{field: 'c_num', title: __('C_num')},
{field: 's_num', title: __('S_num')},
{
field: 'sortlist',
title: __('Sortlist'),
formatter: Table.api.formatter.label,
operate: false
},
{field: 'create_time', title: __('Create_time'), operate: 'RANGE', addclass: 'datetimerange'},
{
field: 'buttons',
width: "120px",
title: __('规格/价格'),
table: table,
events: Table.api.events.operate,
buttons: [
{
name: 'detail',
text: __('规格设置'),
title: __('规格设置'),
classname: 'btn btn-xs btn-success btn-dialog',
icon: 'fa fa-list-alt',
url: 'shop/goods/skus',
callback: function (data) {
console.log(data);
},
visible: function (row) {
//返回true时按钮显示,返回false隐藏
return true;
}
}
],
formatter: Table.api.formatter.buttons, operate: false
},
{
field: 'operate',
title: __('Operate'),
table: table,
events: Table.api.events.operate,
formatter: Table.api.formatter.operate
}
]
]
});
// 为表格绑定事件
Table.api.bindevent(table);
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
skus: function () {
$(document).on("click", ".btn-append", function(){
Form.events.plupload("#add-form");
});
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
return Controller;
});
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
<!--添加规格-->
<div class="form-group">
<div class="col-xs-12 col-sm-9">
<dl class="fieldlist skuAdd" data-name="skus" data-template="testtpl" data-num='1'>
<dd>
<ins style="text-align:center;">名称</ins>
<ins style="text-align:center;">价格</ins>
<ins style="text-align:center;">vip价格</ins>
<ins style="text-align:center;">库存</ins>
<ins style="text-align:center;">规格图片</ins>
</dd>
<dd>
<a href="javascript:;" class="btn btn-sm btn-success btn-append"{if $size!=0}style="display:none"{/if}}><i class="fa fa-plus"></i>
{:__('Append')} </a>
</dd>
<textarea name="skus" class="form-control hide" cols="30" rows="5">{$skus|htmlentities}</textarea>
</dl>
<div>
</div>
<!--定义模板-->
<script type="text/javascript" id="testtpl">
<dd class="form-inline">
<input type="text" name="<%=name%>[<%=index%>][id]" class="form-control" value="<%=row['id']%>" size="10" placeholder="id" style="display:none">
<ins style="text-align:center;"><input type="text" name="<%=name%>[<%=index%>][name]" class="form-control" value="<%=row['name']%>" size="10" placeholder="名称"></ins>
<ins style="text-align:center;"><input type="number" name="<%=name%>[<%=index%>][price]" class="form-control" value="<%=row['price']%>" placeholder="价格" ></ins>
<ins style="text-align:center;"><input type="number" name="<%=name%>[<%=index%>][vip_price]" class="form-control" value="<%=row['vip_price']%>" placeholder="vip价格" ></ins>
<ins style="text-align:center;"><input type="number" name="<%=name%>[<%=index%>][stock]" class="form-control" value="<%=row['stock']%>" placeholder="库存" ></ins>
<ins style="text-align:center;"><input id="t-image<%=index%>" class="form-control" name="<%=name%>[<%=index%>][image]" type="text" value="<%=row['image']%>"placeholder="规格图片 可上传 可填写" style="width:243px"></ins>
<button type="button" id="testUpload<%=index%>" class="btn btn-danger plupload" data-input-id="t-image<%=index%>"data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp">
<i class="fa fa-upload"></i> {:__('Upload')}
</button>
<span class="btn btn-sm btn-danger btn-remove" {if $size!=0}style="display:none"{/if}}><i class="fa fa-times"></i></span>
</dd>
</script>
<!--添加规格结束-->
<div class="form-group layer-footer">
<label class="control-label col-xs-12 col-sm-2"></label>
<div class="col-xs-12 col-sm-8">
<button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
</div>
</div>
</form>