写一个layui表格点击按钮跳转页面的功能
时间: 2024-04-29 20:26:24 浏览: 176
Layui数据表格跳转到指定页的实现方法
好的,下面是实现layui表格点击按钮跳转页面的功能的代码示例:
HTML代码:
```
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
```
JavaScript代码:
```
//渲染表格
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
toolbar: true,
url: '/demo/table/user/',
cols: [[
{field: 'id', title: 'ID', width:80},
{field: 'username', title: '用户名', width:120},
{field: 'city', title: '城市', width:100},
{field: 'sign', title: '签名', minWidth: 150},
{field: 'experience', title: '积分', width: 80, sort: true},
{field: 'score', title: '评分', width: 80, sort: true},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', width: 135, sort: true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]],
page: true
});
//监听工具条
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
//跳转到详情页
window.location.href = '/detail?id=' + data.id;
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
}
});
});
```
注意事项:
1. 需要引入 layui 的相关文件;
2. HTML 中需要定义表格和按钮的样式;
3. JavaScript 中需要定义表格的相关属性和监听事件;
4. 点击“查看”按钮会跳转到详情页,详情页的URL需要根据实际情况进行修改。
阅读全文