layui 表格工具栏添加全局自定义工具

jwj

修改于 2023-01-05 14:07:17

1.7K0

修改于 2023-01-05 14:07:17

文章被收录于专栏：用户1069690的专栏用户1069690的专栏

layui 的表格头部工具栏左侧图标只有筛选列、导出和打印，功能有点少。经过查阅源代码和手册，找到了全局添加自定义工具的方法，在此记录一下。

头部工具栏左侧图标配置

查阅手册，配置头部工具栏左侧图标配置，的方式如下：

layui.table.render({ //其它参数在此省略      
  defaultToolbar: ['filter', 'print', 'exports', {
    title: '提示' //标题
    ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
    ,icon: 'layui-icon-tips' //图标类名
  }]
});

字符串的工具是默认自带的，如果是自定义，需要用对象。参照示例，我在这里加一个刷新工具。

layui.table.render({ //其它参数在此省略      
  defaultToolbar: ['filter', 'print', 'exports', {
    title: '刷新'
    ,layEvent: 'LAYTABLE_REFRESH'
    ,icon: 'layui-icon-refresh'
  }]
});

在layui.table.render()里定义只适用于单个表格，而我想的是全局默认都有。再经过一番研究，找到设置全局项方法layui.table.set()，可以在全局公共文件里去设置默认的defaultToolbar。

layui.use('table', () => {
  layui.table.set({     
    defaultToolbar: [
      'filter', 'print', 'exports'
      , {title: '刷新', layEvent: 'LAYTABLE_REFRESH', icon: 'layui-icon-refresh'}
    ]
  })
})

监听工具栏事件

工具图标加上去了，接下来就是监听刷新按钮的事件了。Layui的底层API提供了layui.onevent()方法，用于监听事件。

layui.onevent('table', 'toolbar()', obj => {
  // 判断是否是刷新事件(LAYTABLE_REFRESH)
  if ("LAYTABLE_REFRESH" === obj.event) {
    // 刷新当前表格
    layui.table.reload(obj.config.id);
  }
})

完整代码

到此，自定义工具已搞定，以下是完整代码：

layui.use('table', () => {
  // 设置默认表格头部工具栏左侧图标
  layui.table.set({
    defaultToolbar: [
      'filter', 'print', 'exports'
      , {title: '刷新', layEvent: 'LAYTABLE_REFRESH', icon: 'layui-icon-refresh'}
    ]
  })

  // 监听表格头部工具栏事件
  layui.onevent('table', 'toolbar()', obj => {
    // 判断是否是刷新事件(LAYTABLE_REFRESH)
    if ("LAYTABLE_REFRESH" === obj.event) {
      // 刷新当前表格
      layui.table.reload(obj.config.id);
    }
  })
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-12-072，如有侵权请联系 cloudcommunity@tencent.com 删除

api