layui table工具栏点击时间_layui table工具栏自定义【原创】

首先根据官方文档我们可以轻松的配置自己的工具栏按钮。

但是一般配置出来的按钮都是点击去执行一个指定操作没有后续，如何自己定义一个像导出那样的工具按钮呢，点击之后弹出对应的操作选择，选择一个后再进行对应的操作，下面直接上代码。table.init('demo',{

limit:50,

totalRow: true,

toolbar:true,

defaultToolbar: ['exports', {

title: '提示' //标题

,layEvent: 'exports_demo' //事件名，用于 toolbar 事件中使用

,icon: 'layui-icon-tips' //图标类名

}]

});

//监听事件

table.on('toolbar(demo)', function(obj){

console.log(obj);

switch(obj.event){

case 'exports_demo':

$(this).find('i').after("

• 导出到 Csv 文件
• 导出到 Excel 文件

");

layer.msg('添加');

break;

case 'delete':

layer.msg('删除');

break;

case 'update':

layer.msg('编辑');

break;

};

});

最关键的东西就是lay-event，事件名是每个操作的标识，根据事件名去实现对应的后续操作。我在自定义的按钮上实现和原导出按钮一样的流程，点击按钮弹出两个选择项，第一个选择项的lay-event是delete，那么点击这个选项可以在监听事件里面监听到delete这个事件名，然后进行自己的操作。