<div class="fuzhiWarp"> <div class="copydiv">這裡是DIV中的文本</div> <button type="button" class="fuzhibtn btn-default" data-clipboard-action="copy" data-cli ...
<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裡面預先放一個可用來複制的按鈕,再把需要複製的文本傳遞過去就行了