首先根据官方文档我们可以轻松的配置自己的工具栏按钮。
但是一般配置出来的按钮都是点击去执行一个指定操作没有后续,如何自己定义一个像导出那样的工具按钮呢,点击之后弹出对应的操作选择,选择一个后再进行对应的操作,下面直接上代码。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这个事件名,然后进行自己的操作。