Layui点击行事件和点击复制单个数据示例
1:点击行事件
table.on('row('+表格容器id+')',function (d){ //d是数据 })
2:点击某个字段数据处理
Column加一个事件的参数
{title: '用户名', field: 'username', templet: function (d) { return '<div class="click-field" style="color: #673ab7" lay-event="clickUsername">' + d.username + '</div>'; },visible: true, align: 'center', valign: 'middle'}, { title: '密码', field: 'password', templet: function (d) { return '<div class="click-field" style="color: #673ab7" lay-event="clickPassword">' + d.password + '</div>'; }, visible: true, align: 'center', valign: 'middle' },
在事件处理器中,直接判断
// 点击事件 table.on('tool(' + serviceInfo.tableId + ')', function (obj) { let data = obj.data; let layEvent = obj.event;if(layEvent === 'clickUsername'){ autoCopy(data.username,'用户名') } if(layEvent === 'clickPassword'){ autoCopy(data.password,'密码') } });
复制处理
function autoCopy(content,field) { if(!content){ return ; } let element = document.createElement("input"); element.value = content; document.body.appendChild(element); element.select(); document.execCommand("Copy"); element.className = "auto-copy-class"; document.getElementsByClassName("auto-copy-class")[0].remove(); layer.msg("复制["+field+"]成功!", {icon: 1}); }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理