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 加上

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过在表格中的单元格内添加下拉框来实现该功能,具体步骤如下: 1. 在表格中指定单元格内添加一个 `div` 元素,该元素用于容纳下拉框。 ```html <table class="layui-table"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td> <div class="dropdown"> <select> <option value="男">男</option> <option value="女">女</option> </select> </div> </td> </tr> <!-- 其他行省略 --> </tbody> </table> ``` 2. 使用 `layui.form.render()` 方法对表单进行渲染,以便 `select` 元素能够正确显示。 ```html <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> <script> layui.use(['form'], function () { var form = layui.form; form.render(); }); </script> ``` 3. 使用 jQuery 监听单元格点击事件,并在点击事件中显示或隐藏下拉框。 ```html <script> $(function () { $('.dropdown').click(function (event) { event.stopPropagation(); // 防止单击事件冒泡到表格行 $('.dropdown').not(this).removeClass('open'); $(this).toggleClass('open'); }); $('html').click(function () { $('.dropdown').removeClass('open'); }); }); </script> ``` 4. 样式表中添加下拉框的样式。 ```html <style> .dropdown { position: relative; display: inline-block; } .dropdown select { width: 100%; padding: 6px 12px; border: 1px solid #d2d6de; border-radius: 2px; background-color: #fff; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .dropdown.open select { z-index: 2; } </style> ```

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值