为layui table的单元格添加悬浮显示按钮的功能。因为单元格空间有限,悬浮显示的按钮可能因为单元格的overflow:hidden而显示不完整。因此建议绑定在td[data-field=‘’]元素。
但是要求按钮是具有单元格信息的。因此使用data属性,实现td[data-field=‘’]元素中,信息的传递。
done: function(res) {
//客户名称 → 筛选+复制
$('td[data-field="nickname"]')
.append(`<div class='filter_btns'><button class='filter_btn layui-btn layui-btn-primary layui-btn-xs' style='display:none'>筛选</button>
<button class='layui-btn layui-btn-primary layui-btn-xs copy_btn' style='display:none' data-clipboard-action="copy">复制</button></div>`)
.css({
position: 'relative'
})
$('td[data-field="nickname"]').on("mouseenter", function() {
$(this).find('.filter_btns button').css('display', 'block')
$(this).find('.filter_btn').data('content', $(this).data('content'))
$(this).find('.copy_btn').data('name', $(this).data('content'))
})
//订单号 erp订单号 来源标识 → 复制
$('td[data-field="order_sn"],td[data-field="erp_no"],td[data-field="order_sn_tag"]')
.append(`<div class='filter_btns'>
<button class='layui-btn layui-btn-primary layui-btn-xs copy_btn' style='display:none' data-clipboard-action="copy">复制</button></div>`)
.css({
position: 'relative'
})
$('td[data-field="order_sn"],td[data-field="erp_no"],td[data-field="order_sn_tag"]').on("mouseenter", function() {
$(this).find('.filter_btns button').css('display', 'block')
$(this).find('.copy_btn').data('name', $(this).find('.layui-table-cell').text())
})
//复制
var clipboard = new ClipboardJS(document.getElementsByClassName('copy_btn'), {
text: function(trigger) {
return $(trigger).data('name')
}
});
clipboard.on('success', function(e) {
// layer.msg("复制成功!")
log('ok')
});
clipboard.on('error', function(e) {
layer.msg("对不起,您的浏览器暂不支持一键复制功能!")
});
//物流信息 → 创建+复制
$('.copy_btn').click(function(e) {
e.preventDefault()
e.stopPropagation()
})
$('.filter_btn').click(function(e) {
e.preventDefault()
e.stopPropagation()
var text = $(this).data('content')
$('#filter_keyword').val(text)
getData(order_type, 'desc', 2, text)
})
}