layui.table数据表格自定义工具栏

先看个最后的效果图。

layui默认的头部工具栏只需要开启配置，加个模板就可以实现。因为产品的需求工具栏要放置到下面，看了下文档，只能自己写个函数来实现了。

<!-- <script type="text/html" id="batchTool">
        <a class="layui-btn layui-btn-custom layui-btn-sm" lay-event="batchConfirm">批量确认</a>
        <a class="layui-btn layui-btn-custom layui-btn-sm" lay-event="batchCancel">批量清除</a>
        <a class="layui-btn layui-btn-custom layui-btn-sm" lay-event="batchDelete">批量删除</a>
</script> -->

<script>
        layui.use(['table','layer','laydate','laypage','element'], function(){
            var table = layui.table,
                laydate = layui.laydate,
                laypage = layui.laypage,
                element = layui.element;

            // 当前告警列表
            var c = table.render({
                id: 'current'
                ,elem: '#current'
                ,data:data.list
                ,cellMinWidth: 80
                ,height: document.body.clientHeight - 90 - 38 - 40 -200 - 40 - 35 - 55
                //,limit: 99999
                //,toolbar: '#batchTool'
                ,defaultToolbar:[]
                ,initSort: {
                    field: 'ROW_ID' //排序字段，对应 cols 设定的各字段名
                    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
                ,cols: [[           
                    {field:'ROW_ID',width:80 , title: '序号', sort: true}
                    ,{field:'BEGIN_TIME',width:180, title: '发生时间'}
                    ,{field:'LEVELE_TEXT',width:150, title: '告警级别', sort: true}
                    ,{field:'PROBE_NAME', title: '告警节点'}
                    ,{field:'ALARM_TYPE_PARENT_TEXT',width:150, title: '告警类型', sort: true}
                    ,{field:'DESCRIPTION', title: '告警描述'}
                    ,{field:'NOTICE_TMP_TEXT',width:150, title: '告警通知'}
                    ,{field:'DURATION_TEXT',width:180, title: '持续时间', sort: true}
                    ,{field:'STATUS_TEXT',width:150, title: '处理状态'}
                    ,{field:'tool',width:180, title: '操作', width:250, toolbar: '#ctool'}
                    ,{type: 'checkbox',width:80, title: '选中'}
                ]]
            });
            // 导出数据
            $('#export_current').click(function(){
                table.exportFile(c.config.id, data.list, 'xls');
            })

            window.batch = function(type) {
                var datav = 1;
                var text = '';
                var ids = [];
                var tableid = '<?php echo $tab = "c" ? "current" :"history";?>';
                var checkStatus = table.checkStatus('current');
                $.each(checkStatus.data, function(index,item){
                            ids.push(item.ROW_ID);
                })
                switch (type) {
                    case 'batchConfirm':
                        datav  = 2;
                        text = '批量确认';
                        break;
                    case 'batchCancel':
                        datav  = 1;
                        text = '批量清除';
                        break;
                    case 'batchDelete':
                        datav  = 4;
                        text = '批量删除';
                        break;
                }

                if (type == 'batchConfirm' || type == 'batchCancel' || type == 'batchDelete') {
                    layer.confirm('已选中'+ids.length+'条数据，确定要进行'+text+'？', function(index){
                        $.ajax({
                            type: "POST",
                            url: "/notice/task-alarms/op?type="+datav+"&isreturn=1",
                            dataType: 'json',
                            data: {'ids':ids},
                            async: false,
                        }).done(function(data) {
                            layer.msg(data.msg, {
                                time: 1000
                            }, function(){
                                window.location.reload();
                            });
                        });

                        layer.close(index);
                    });
                }
            }

            //监听工具事件
            // table.on('toolbar()', function(obj){
            //     var data = obj.data;
            //     var datav = 1;
            //     var text = '';
            //     var ids = [];
            //     var checkStatus = table.checkStatus(obj.config.id);
            //     $.each(checkStatus.data, function(index,item){
            //         ids.push(item.ROW_ID);
            //     })
            //     switch (obj.event) {
            //         case 'batchConfirm':
            //             datav  = 2;
            //             text = '批量确认';
            //             break;
            //         case 'batchCancel':
            //             datav  = 1;
            //             text = '批量清除';
            //             break;
            //         case 'batchDelete':
            //             datav  = 4;
            //             text = '批量删除';
            //             break;
            //     }

            //     if (obj.event == 'batchConfirm' || obj.event == 'batchCancel' || obj.event == 'batchDelete') {
            //         layer.confirm('已选中'+ids.length+'条数据，确定要进行'+text+'？', function(index){
            //             $.ajax({
            //                 type: "POST",
            //                 url: "/notice/task-alarms/op?type="+datav+"&isreturn=1",
            //                 dataType: 'json',
            //                 data: {'ids':ids},
            //                 async: false,
            //             }).done(function(data) {
            //                 layer.msg(data.msg, {
            //                     time: 1000
            //                 }, function(){
            //                     window.location.reload();
            //                 });
            //             });

            //             layer.close(index);
            //         });
            //     }

            // });
        });
    </script>

/*HTML*/
<div class="text-right"> 
    <a class="layui-btn  layui-btn-xs" onclick="batch('batchConfirm');">批量确认</a>
    <a class="layui-btn  layui-btn-xs" onclick="batch('batchCancel');">批量清除</a>
    <a class="layui-btn layui-btn-xs" onclick="batch('batchDelete');">批量删除</a>
</div>

仅供参考。