在ulthon_admin 官网中并没有详细讲解tableData选择后如何回调
偶然在一个项目中遇到了回调的问题,如下图:
管理后台为店铺添加商品,因为商品是所有店铺共享的,所以选择商品后需要将商品标签、库存、总库存、虚拟销量等赋值到当前店铺的商品下。笔记如下:
第一步,html 如下,添加data-select-confirm-callback回调函数(不是文档中的data-selectConfirmCallback,文档中的data-selectConfirmCallback这个属性似乎不对,写了没用。)
<div class="layui-form-item">
<label class="layui-form-label">商品id</label>
<div class="layui-input-block">
<div
data-toggle="table-data"
data-index="{:__url('mall.goods/index')}"
data-select-type="radio"
data-select-confirm-callback="selectGoogsCallBack"
data-select-value=""
data-value-field="id"
data-name="mall_goods_id"
data-field-name="title"
data-required="1">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品标签</label>
<div class="layui-input-block" id="mall_goods_tag">
<div data-toggle="table-data" data-index="{:__url('mall.tag/index')}" data-select-type="checkbox"
data-select-value="" data-value-field="id" data-name="tag" data-field-name="title"
data-required="1" >
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">销量</label>
<div class="layui-input-block">
<input type="text" name="sales" class="layui-input" lay-verify="required" placeholder="请输入销量" value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">虚拟销量</label>
<div class="layui-input-block">
<input type="text" name="virtual_sales" class="layui-input" lay-verify="required" placeholder="请输入虚拟销量"
value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">库存</label>
<div class="layui-input-block">
<input type="text" name="stock" class="layui-input" lay-verify="required" placeholder="请输入库存" value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">总库存</label>
<div class="layui-input-block">
<input type="text" name="total_stock" class="layui-input" lay-verify="required" placeholder="请输入总库存"
value="0">
</div>
</div>
第二步,找到根目录下/public/static/plugs/lay-module/tableData/tabeData.js 修改 openSelectPage 方法
openSelectPage() {
if(options.readonly == 1){
return false;
}
var selectedIds = this.listSelected.map(item => item.id);
var index = layer.open({
title: '选择数据',
type: 2,
area: [options.width, options.height],
content: options.index + '&selectedIds=' + selectedIds.join(','),
maxmin: true,
moveOut: true,
shadeClose: true,
success: (layero, index) => {
window[options.selectConfirmCallback] = (data) => {
data.forEach(dataItem => {
//console.log('dataItem====>',dataItem);
if (options.selectType == 'radio') {
this.listSelected = [];
}
var itemFind = this.listSelected.find(itemSelect => itemSelect[valueField] == dataItem[valueField])
if (itemFind == undefined) {
this.listSelected.push(dataItem)
}
//商品选择后回调
//options.selectConfirmCallback = data-select-confirm-callback的值,注意保持唯一
if(options.selectConfirmCallback=='selectGoogsCallBack'){
//动态添加商品标签tableData框及其值
var htmlStr='<div data-toggle="table-data" data-index="/index.php/admin/mall.tag/index" data-select-type="checkbox" data-select-value="'+dataItem.tag+'" data-value-field="id" data-name="tag" data-field-name="title"data-required="1"></div>';
$("#mall_goods_tag").html(htmlStr);
var tableList = document.querySelectorAll('[data-toggle="table-data"]');
$.each(tableList, function (i, v) {
var data = $(v).data()
new tableData().render(v, data);//必须要重新渲染,不然页面显示不出来
});
//赋值其他的选项
$("input[name='sales']").val(dataItem.sales);
$("input[name='virtual_sales']").val(dataItem.virtual_sales);
$("input[name='stock']").val(dataItem.stock);
$("input[name='total_stock']").val(dataItem.total_stock);
$("input[name='sort']").val(dataItem.sort);
}
});
this.$forceUpdate();
layer.close(index);
}
},
end: function () {
index = null;
window[options.selectConfirmCallback] = undefined;
}
});
},
同时商品标签点击x 时也要重置对应的值,因此也要修改 removeItem 方法,
removeItem(item, index) {
this.listSelected.splice(index, 1);
//店铺删除添加的商品时,重置值
if(options.selectConfirmCallback=='selectGoogsCallBack'){
$("input[name='sales']").val("0");
$("input[name='virtual_sales']").val("0");
$("input[name='stock']").val("0");
$("input[name='total_stock']").val("0");
$("input[name='sort']").val("0");
var htmlStr='<div data-toggle="table-data" data-index="/index.php/admin/mall.tag/index" data-select-type="checkbox" data-select-value="" data-value-field="id" data-name="tag" data-field-name="title"data-required="1"></div>';
$("#mall_goods_tag").html(htmlStr);
var tableList = document.querySelectorAll('[data-toggle="table-data"]');
$.each(tableList, function (i, v) {
var data = $(v).data()
new tableData().render(v, data);//重新渲染
});
}
}