在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里面预先放一个可用来复制的按钮,再把需要复制的文本传递过去就行了