Layui表格工具栏添加图片按钮并实现点击跳转

作者：资源驿站

时间：2026-10-23

本文介绍如何在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的窗口
    })
  }
})

最后，展示实现效果。点击自定义的图片按钮后，页面会按照预设逻辑进行跳转。

定义按钮样式与结构