layui双击表格打开一个新页面
时间: 2023-09-06 21:08:14 浏览: 98
Layui弹框中数据表格中可双击选择一条数据的实现
你可以使用 layui 的 table 模块中的 on('rowDouble') 事件来实现双击表格行打开新页面的功能。具体步骤如下:
1. 在 HTML 页面中定义表格,给表格加上 id:
```html
<table id="table-demo" lay-filter="table-demo"></table>
```
2. 在 JavaScript 中配置 table 模块,绑定 on('rowDouble') 事件:
```javascript
layui.use(['table'], function(){
var table = layui.table;
table.render({
elem: '#table-demo',
url: '数据接口url',
cols: [[
{field:'id', title:'ID'},
{field:'name', title:'姓名'},
{field:'age', title:'年龄'},
{field:'email', title:'邮箱'}
]],
page: true,
limit: 10,
height: 'full-200',
// 双击表格行事件
done: function(res, curr, count) {
var tableElem = this.elem.next('.layui-table-view');
tableElem.find('table.layui-table').off('dblclick').on('dblclick', 'tr', function() {
var data = table.cache['table-demo'][this.getAttribute('data-index')];
// 打开新页面
window.open('http://新页面url?id=' + data.id);
});
}
});
});
```
在上述代码中,我们通过 table.render() 方法初始化表格,并在 done 回调函数中绑定双击表格行事件。当用户双击表格某一行时,我们获取该行的数据,并通过 window.open() 方法打开新页面,同时传递该行数据中的 id 参数到新页面。你可以根据实际需要修改代码中的参数。
阅读全文