Layui表格工具栏添加图片按钮并实现点击跳转
作者:资源驿站时间:2026-10-23 11:04:23浏览:409
本文介绍如何在Layui表格中自定义工具栏图片按钮,并通过点击事件实现页面跳转。通过定义模板、渲染表格及监听工具事件,展示如何配置按钮样式与跳转逻辑,适用于订单管理等场景。
定义按钮样式与结构
首先,需要定义按钮的样式。在Layui中,可以通过自定义HTML模板来设置按钮的外观。
<table class="layui-hide" id="test" lay-filter="menu-filter" style="margin: 0 10px;"></table>
<script type="text/html" id="toolbtn">
<a class="" lay-event="down"><img src="images/add.png" alt=""></a>
</script>
接下来,定义按钮的具体结构。在表格列中,通过设置toolbar属性指向定义的模板,实现按钮的渲染。
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'json/table.json'
,height:'877'
,cols: [[
{type:'checkbox',toolbar:'#toolbtn', minWidth: 10}
,{type:'nn',toolbar:'#toolbtn', minWidth: 10}
,{ field:'id',title: '订单编号' , minWidth: 210}
]]
})
})
实现点击跳转逻辑
然后,处理点击跳转逻辑。通过监听工具事件,判断点击的是哪个按钮,并执行相应的跳转操作。
table.on('tool(menu-filter)', function(obj){//申报按钮
var data = obj.data;
var dataId = data.dataId;
var itemCode = data.code;
if(obj.event =="down"){
var name = data.name;
var url = "OrderListDetails.html" ;
layer.open({
type: 2,
// title: name+'--状态详情',
title:"订单管理列表详情",
shadeClose: true,
shade: 0.8,
offset:"200px",
move:false,
area: ['1300px', '570px'],
content:[url]/content: $("#table1")本页弹出id=table的窗口
})
}
})
最后,展示实现效果。点击自定义的图片按钮后,页面会按照预设逻辑进行跳转。

以上介绍了在Layui表格中添加自定义图片按钮并实现点击跳转的完整过程,供参考使用。
作者最新文章
JS中使用位运算(~~)和一元加号(+)快速转换字符串为整数
2026-11-03 22:41:12
怎么使用命令行批量格式化项目中的JS文件
2026-11-03 19:04:42
JS代码美化后报错怎么办?常见格式化冲突解决方法
2026-11-03 18:47:01
不用moment.js,怎么用原生JS Intl API格式化时间戳
2026-11-03 18:10:30
原生JS与dayjs获取当前日期的代码对比
2026-11-03 17:57:26
