layui table 为单元格添加悬浮显示按钮功能

为layui table的单元格添加悬浮显示按钮的功能。因为单元格空间有限,悬浮显示的按钮可能因为单元格的overflow:hidden而显示不完整。因此建议绑定在td[data-field=‘’]元素。
但是要求按钮是具有单元格信息的。因此使用data属性,实现td[data-field=‘’]元素中,信息的传递。

layui table 为单元格添加悬浮显示按钮功能_第1张图片

    done: function(res) {
                //客户名称 → 筛选+复制
                $('td[data-field="nickname"]')
                    .append(`
`) .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(`
`) .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) }) }

你可能感兴趣的:(layui,jquery,js,javascript,layui)