FastAdmin表格顶部增加toolbar按钮

效果入下图，在表格顶部增加一个自定义按钮，点击确认后请求服务器接口

表格对应的index.html中

    

        

            

                

                    

                         




                         {:__('Synchronization')}
                    
                    
                
            

        
    

表格对应的js

            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'chat/group/index' + location.search,
                    // add_url: 'chat/group/add',
                    // edit_url: 'chat/group/edit',
                    // del_url: 'chat/group/del',
                    // 增加按钮对应的后台的url
                    synchronization_url: 'chat/group/synchronization',
                    multi_url: 'chat/group/multi',
                    import_url: 'chat/group/import',
                    table: 'chat_group',
                }
            });


        edit: function () {
            Controller.api.bindevent();
        },
        // 新增同步数据
        synchronization: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }

在require-table.js文件中

        config: {
            checkboxtd: 'tbody>tr>td.bs-checkbox',
            toolbar: '.toolbar',
            refreshbtn: '.btn-refresh',
            addbtn: '.btn-add',
            editbtn: '.btn-edit',
            delbtn: '.btn-del',
            //增加自定义按钮
            synchronizationbtn: '.btn-synchronization',
            importbtn: '.btn-import',
            multibtn: '.btn-multi',
            disabledbtn: '.btn-disabled',
            editonebtn: '.btn-editone',
            restoreonebtn: '.btn-restoreone',
            destroyonebtn: '.btn-destroyone',
            restoreallbtn: '.btn-restoreall',
            destroyallbtn: '.btn-destroyall',
            dragsortfield: 'weigh',
        },


        button: { //现有代码为了确定增加代码的位置
            edit: {
                name: 'edit',
                icon: 'fa fa-pencil',
                title: __('Edit'),
                extend: 'data-toggle="tooltip" data-container="body"',
                classname: 'btn btn-xs btn-success btn-editone'
            },
            del: {
                name: 'del',
                icon: 'fa fa-trash',
                title: __('Del'),
                extend: 'data-toggle="tooltip" data-container="body"',
                classname: 'btn btn-xs btn-danger btn-delone'
            },
            //增加自定义按钮
            synchronization: {
                name: 'synchronization',
                icon: 'fa fa-trash',
                title: __('Synchronization'),
                extend: 'data-toggle="tooltip" data-container="body"',
                classname: 'btn btn-xs btn-danger btn-delone'
            },


                // 批量删除按钮事件 现有代码为了确定增加代码的位置
                toolbar.on('click', Table.config.delbtn, function () {
                    var that = this;
                    var ids = Table.api.selectedids(table);
                    Layer.confirm(
                        __('Are you sure you want to delete the %s selected item?', ids.length),
                        {icon: 3, title: __('Warning'), offset: 0, shadeClose: true, btn: [__('OK'), __('Cancel')]},
                        function (index) {
                            Table.api.multi("del", ids, table, that);
                            Layer.close(index);
                        }
                    );
                });
                // 企业微信同步数据事件
                toolbar.on('click', Table.config.synchronizationbtn, function () {
                    var that = this;
                    var ids = Table.api.selectedids(table);
                    Layer.confirm(
                        __('确认从企业微信重新获取信息？'),
                        {icon: 3, title: __('Warning'), offset: 0, shadeClose: true, btn: [__('OK'), __('Cancel')]},
                        function (index) {
                            Table.api.synchronization("synchronization", ids, table, that);;
                            Layer.close(index);
                        }
                    );
                });





            // 批量操作请求 现有代码为了确定增加代码的位置
            multi: function (action, ids, table, element) {
                var options = table.bootstrapTable('getOptions');
                var data = element ? $(element).data() : {};
                ids = ($.isArray(ids) ? ids.join(",") : ids);
                var url = typeof data.url !== "undefined" ? data.url : (action == "del" ? options.extend.del_url : options.extend.multi_url);
                var params = typeof data.params !== "undefined" ? (typeof data.params == 'object' ? $.param(data.params) : data.params) : '';
                options = {url: url, data: {action: action, ids: ids, params: params}};
                Fast.api.ajax(options, function (data, ret) {
                    table.trigger("uncheckbox");
                    var success = $(element).data("success") || $.noop;
                    if (typeof success === 'function') {
                        if (false === success.call(element, data, ret)) {
                            return false;
                        }
                    }
                    table.bootstrapTable('refresh');
                }, function (data, ret) {
                    var error = $(element).data("error") || $.noop;
                    if (typeof error === 'function') {
                        if (false === error.call(element, data, ret)) {
                            return false;
                        }
                    }
                });
            },
            // 增加同步微信数据请求
            synchronization: function (action, ids, table, element) {
                var options = table.bootstrapTable('getOptions');
                var url = options.extend.synchronization_url;
                options = {url: url, data: {}};
                Fast.api.ajax(options, function (data, ret) {
                    table.trigger("uncheckbox");
                    var success = $(element).data("success") || $.noop;
                    if (typeof success === 'function') {
                        if (false === success.call(element, data, ret)) {
                            return false;
                        }
                    }
                    table.bootstrapTable('refresh');
                }, function (data, ret) {
                    var error = $(element).data("error") || $.noop;
                    if (typeof error === 'function') {
                        if (false === error.call(element, data, ret)) {
                            return false;
                        }
                    }
                });
            },

如此之后前端代码已经实现完毕，点击就出现如图效果，并请求了后台接口。