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("<ul class=\"layui-table-tool-panel\"><li lay-event=\"delete\">导出到 Csv 文件</li><li data-type=\"xls\">导出到 Excel 文件</li></ul>");
                        layer.msg('添加');
                        break;
                    case 'delete':
                        layer.msg('删除');
                        break;
                    case 'update':
                        layer.msg('编辑');
                        break;
                };
            });

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