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

  • 在treeTable的行操作中使用clipboard.min.js插件复制功能,死活复制不了也不报错的解决方法已关闭评论
  • 153 次浏览
  • A+
所属分类:Web前端
摘要

注意:不能用display:none来隐藏;用绝对定位来隐藏,要不然复制不到文本;因为直接点击树形表格操作区的复制按钮,复制不生效;所以在body里面预先放一个可用来复制的按钮,再把需要复制的文本传递过去就行了

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