在treeTable的行操作中使用clipboard.min.js插件復制功能，死活復制不了也不報錯的解決方法

<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');  //執行前面隱藏起來的按鈕事件
};

因為直接點擊樹形表格操作區的復制按鈕，復制不生效；所以在body里面預先放一個可用來復制的按鈕，再把需要復制的文本傳遞過去就行了

標籤：其他

上一篇：記錄--對于$off，Exclude 和 Extract的一點理解

下一篇：HTML怎么設定圖片大小