直接在列配置里写event: 'xxx'无效,普通列跳转应使用templet函数返回带href的HTML字符串,并用encodeURIComponent编码参数、target="_blank"新开页面,同时核对后端主键字段名。
直接在列配置里写 event: 'xxx' 不会触发跳转——这个字段只对内置工具栏按钮生效,普通数据列完全无视它。
templet 里拼带 href 的链接最简单
纯跳转场景,别绕弯子走 lay-event + 监听器。直接用 templet 返回带 <a> 的 HTML 字符串,安全、可控、少出错。
-
templet必须是函数形式,比如templet: function(d) { return '<a href="/detail?uid=' + encodeURIComponent(d.id) + '" target="_blank">' + (d.name || '无名') + '</a>'; } - 字段名不是固定
id,得核对后端返回的主键字段(可能是user_id、code、uuid),否则d.id是undefined - 必须用
encodeURIComponent()编码参数,否则含中文、斜杠、空格时 URL 会截断或 400 - 加
target="_blank",避免用户跳转后丢失表格页;不加的话,用户点完就回不来了
为什么 lay-event 容易翻车
它适合需要 JS 干预的场景(比如权限校验、弹窗确认),但单纯跳转时,漏一个环节就彻底失效。
- 写了
templet: '<button lay-event="goto">详情</button>',但没配table.on('tool(test)', ...)→ 点击无声无息 -
table.on('tool(test)')中的test必须和elem: '#test'的 ID 严格一致,大小写敏感 - 监听器必须写在
table.render()的done回调里,或者确保表格 DOM 已渲染完成;提前绑定 = 白绑 - 回调里取值必须用
obj.data.id,别用obj.tr.find('td').eq(2).text()—— 列顺序一变、加了隐藏列,就取错字段
移动端点击失灵?加一行 CSS
iOS Safari 和部分安卓浏览器双击会缩放,导致单次点击无响应。
- 给表格加全局样式:
td { touch-action: manipulation; } - 不要只加在某列上,要覆盖所有单元格,否则某些机型仍会误判
- 不加这句,测试时可能在 Chrome 桌面正常,一上真机就“点不动”
真正卡住人的从来不是怎么写跳转,而是字段名对不对、参数编没编码、新窗口开没开——这三个点任意一个漏掉,用户反馈就是“点了没反应”或“跳到空白页”。


















