在treeTable的行操作中使用clipboard.min.js插件复制功能，死活复制不了也不报错的解决方法

2023-03-02

data var res

<divclass="fuzhiWarp"><divclass="copydiv">这里是DIV中的文本</div><buttontype="button"class="fuzhibtnbtn-default"data-clipboard-action="c

<div class="fuzhiWarp">
        <div class="copydiv">这里是DIV中的文本</div>
        <button type="button" class="fuzhibtn btn-default" data-clipboard-action="copy" data-clipboard-target=".copydiv">复制</button>
    </div>

.fuzhiWarp{
    position: absolute;
    top: 0px;
    left: 0px;
}

注意：不能用display:none来隐藏；用绝对定位来隐藏，要不然复制不到文本；

<table id="jiaGeTables" lay-filter="jiaGeTables"></table>

var insTb = layui.treeTable.render({
        elem: '#jiaGeTables',
        height: 'full',
        id: 'idJiaGeTables',
        url: "/finance/newHome/js/999.json",
        // where: {
        //     projectNo: projectNo,
        // },
        // data: data1,
            page: true,
            limit: 1000,
            limits: [10, 20, 50, 100],
            even: true,
            request: {
                pageName: '',
                limitName: ''
            },
            parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.length, //解析数据长度
                    "data": res.data //解析数据列表
                };
            },
        cols: [
            [{
                    field: '',
                    type: 'numbers',
                    title: '',
                }, {
                    field: 'appendixName',
                    title: '名称',
                    event: 'appendixName',
                    width: '200'
                },
                {
                    field: '',
                    title: '操作',
                    width: '100',
                    templet: function(d) {
                        return setCopyTreeText(d); //重点
                    }
                }
            ]
        ],
        tree: {
            iconIndex: 1, // 折叠图标显示在第几列
            isPidData: true, // 是否是id、pid形式数据
            idName: 'appendixId', // id字段名称
            pidName: 'parentAppendixId' // pid字段名称
        },
        done: function(res, curr, count) { // 表格渲染完成之后的回调
            $('#jiaGeWarp table').css('width','100%');
            insTb.expandAll(); //默认展开
        }
    });
    layui.treeTable.on('tool(jiaGeTables)', function(obj) {
        var tableCheck = obj.data;
        var layEvent = obj.event;
        var tr = obj.tr;
        if (layEvent === 'codeData') { //复制
            fuzhiTreeCodeData(tr);  //重点
        };
    });

function setCopyTreeText(d){
    var val = '复制文本：'+d.appendixName+d.appendixId;  //动态生成需要复制的文本，预先保存到属性name里面，等会点击的时候传递给copydiv
    var str = "<a href='javascript:;' name='"+val+"' class='layui-table-link' lay-event='codeData'>复制</a>";
    return str;
};
function fuzhiTreeCodeData($Node){
    var clipboard = new ClipboardJS('.fuzhibtn');
    clipboard.on('success', function(e) {
        // alert("文字已复制到剪贴板中");
        console.log(e);
            clipboard.destroy();  //解决多次复制问题.
    });
    clipboard.on('error', function(e) {
        console.log(e);
            clipboard.destroy();  //解决多次复制问题.
    });
    var val = $Node.find('a').attr('name');
    $('.copydiv').html(val);  //把动态生成的需要复制的文本赋值给copydiv
    $('.fuzhibtn').trigger('click');  //执行前面隐藏起来的按钮事件
};