标签 layui 下的文章

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);
    }
  })
})