add html 页面
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-name" class="form-control" name="row[name]" data-rule="required" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('产品规格')}:</label>
<div class="col-xs-12 col-sm-8">
<table class="table fieldlist" data-template="eventtpl" data-name="row[event]" id="second-table">
<tr>
<td>{:__('产品')}</td>
<td>{:__('规格')}</td>
<td>{:__('数量')}</td>
<td width="100"></td>
</tr>
<tr>
<td colspan="4"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i
class="fa fa-plus"></i> {:__('Append')}</a></td>
</tr>
</table>
<!--请注意实际开发中textarea应该添加个hidden进行隐藏-->
<textarea name="row[event]" class="form-control products_info" cols="30"
rows="5">[{"id":"1","goods_id":"","specifications_id":""}]</textarea>
<script id="eventtpl" type="text/html">
<tr class="form-inline">
<td >
<input data-rule="required" data-source="goods/index"
class="form-control input-goods-id goods-<%=index%> selectpage" data-key="<%=index%>" name="<%=name%>[<%=index%>][goods_id]"
type="text" value="">
</td>
<td>
<input data-rule="required" data-source="specifications/index" data-key="<%=index%>" data-multiple="true" id="specifications-<%=index%>"
class="form-control input-specifications-id specifications-<%=index%> selectpage"
name="<%=name%>[<%=index%>][specifications_id]" type="text" value="">
<input type="hidden" class="form-control" name="<%=name%>">
</td>
<td>
<input type="number" name="<%=name%>[<%=index%>][quantity]" step="" data-rule="range(0~);" class="form-control quantity-<%=index%>" style="width:70px" value="<%=row.quantity%>" placeholder="1"/>
</td>
<td>
<!--下面的两个按钮务必保留-->
<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>
<!-- <div class="form-group">-->
<!-- <label class="control-label col-xs-12 col-sm-2">{:__('price')}:</label>-->
<!-- <div class="col-xs-12 col-sm-8">-->
<!-- <input id="c-price" class="form-control" name="row[price]" data-rule="" type="text" value="">-->
<!-- </div>-->
<!-- </div>-->
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('Mark')}:</label>
<div class="col-xs-12 col-sm-8">
<textarea id="c-mark" class="form-control" rows="5" name="row[mark]" cols="50"></textarea>
</div>
</div>
<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-primary btn-embossed disabled">{:__('OK')}</button>
<button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
</div>
</div>
</form>
对应add 的 js文件
add: function () {
Template.helper("Fast", Fast);
//因为日期选择框不会触发change事件,导致无法刷新textarea,所以加上判断
$(document).on("dp.change", "#second-form .datetimepicker", function () {
$(this).parent().prev().find("input").trigger("change");
});
$(document).on("fa.event.appendfieldlist", "#second-table .btn-append", function (e, obj) {
var goods_id = '';
$('.input-goods-id').on('change', function (e) {
var key = $(this).attr('data-key')
goods_id = $("input[name='row[event]["+key+"][goods_id]']").val();
// 产品修改的时候 需要先把当前下面的规格清空
$('.specifications-'+key).selectPageClear();
})
// // 查询规格的
// $('.input-specifications-id').on('click', function (e) {
// var key = $(this).attr('data-key')
// goods_id = $("input[name='row[event]["+key+"][goods_id]']").val();
// })
$(document).on("focus", ".input-specifications-id", function(){
var key = $(this).attr('data-key');
goods_id = $("input[name='row[event]["+key+"][goods_id]']").val();
console.log(goods_id)
});
$('.input-specifications-id').data("params", function(e){
console.log('------------')
console.log(goods_id)
console.log('------------')
return {custom: {goods_id:goods_id}};
})
Form.events.cxselect(obj);
//绑定动态下拉组件
Form.events.selectpage(obj);
//绑定日期组件
Form.events.datetimepicker(obj);
//绑定上传组件
Form.events.faupload(obj);
});
Form.api.bindevent($("form[role=form]"), function (data, ret) {
Layer.alert(data.data);
});
},
重新更新一下js ----- 2023/4/25------js文件以这个为准