layui 数据表格 单元格点击复制

点击单元格复制内容在这里插入图片描述
table.js 找到单元格缩放后,下拉展示内容 layui-table-grid-down

鼠标放上单元格时,显示复制按钮

a.layBody.on("click", "td", function (e) {
			...
}
}).on("mouseenter", "td", function () {
	b.call(this)
	// 调用 ly 方法
	ly.call(this)
}).on("mouseleave", "td", function () {
	b.call(this, "hide")
	// 隐藏
	ly.call(this, "hide")
});
var copy = "layui-table-list-copy",ly = function (e) {
	var i = t(this), a = i.children(f);
	if (e) i.find(".layui-table-list-copy").remove();
	else if (i.attr('lay-event') === "PrimaryId" && a.prop("scrollWidth") === a.outerWidth()) {
		if (a.find("." + copy)[0]) return;
		// 插入icon,input框方便待会选中内容.
		i.append('<div class="' + copy + '"><i class="layui-icon layui-icon-file-b"></i><input class="table-copy-text" style="display: none;" value="'+$(a).text()+'"></div>')
	}
}
a.layBody.on("click","."+copy,function(e) {
	var i = t(this), n = i.parent(), d = n.children(f), copyText = $('.table-copy-text');
	// 显示 input
	copyText.show();
	d.contentEditable = true;
	// 选择 input 内容
	copyText.select();
	try{
		// 利用 document.execCommand 进行复制操作
		if(document.execCommand("Copy","false",null)){
			layer.msg('复制成功');
		}else{
			layer.msg("复制失败!请手动复制!");
		}
	}catch(err){
		layer.msg("复制错误!请手动复制!")
	}
	copyText.hide();
	layui.stope(e)
});
var g = "layui-table-grid-down", b = function (e) {
	...
};

记得样式加上 全局搜索 layui-table-grid-down 样式有的都给 layui-table-list-copy 加上

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

YulChigga

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值