FastAdmin的自由度还是很高的，只是文档太生涩、语焉不详。

网上很多关于表格的自定义按钮都是要去改框架的JS，这样的操作总归不是最完美的办法，最好的办法是不修改框架的文件，全部在自己的文件里来定义。

本文提供一个思路，与大家共勉。

在实际的使用中，我需要建立一个关于附件的表格，需要添加一个“预览”按钮，并提供“编辑”和“删除”的操作。

其中“预览”按钮是自定义添加的，“编辑”按钮是对原框架编辑按钮的重写，“删除”按钮使用原生的功能。

先上代码：

var custom_button_attachment = {
    buttons: [{
        name: 'attachment-view', icon: 'fa fa-eye', title: '查看/下载', text: '查看/下载',
        extend: 'data-toggle="tooltip" data-container="body"', classname: 'btn btn-info btn-xs attachment-view'
    }, {
        name: 'attachment-edit', icon: 'fa fa-pencil',
        title: '编辑', extend: 'data-toggle="tooltip" data-container="body"', classname: 'btn btn-xs btn-success attachment-edit'
    }, {
        name: 'attachment-delete', icon: 'fa fa-trash',
        title: '删除', extend: 'data-toggle="tooltip" data-container="body" data-url="' + this.initOptions.extend.attachment_del_url + '"', classname: 'btn btn-xs btn-danger attachment-delete'
    },],
    api: {
        getBlog: function (url, data, callback) {
            var aurl = url;
            var httpRequest = new XMLHttpRequest();
            httpRequest.open('POST', aurl, true);
            httpRequest.setRequestHeader("Content-type", "application/json");
            httpRequest.responseType = "arraybuffer";
            var obj = data;
            httpRequest.onload = function () {
                callback(httpRequest);
            };
            httpRequest.send(JSON.stringify(obj));
        }
    },
    formatter: {
        operate: function (value, row, index) {
            return Table.api.buttonlink(this, this.buttons, value, row, index, 'operate');
        },
        size: function (value, row, index) {
            if (value < 1024) {
                return `${value}B`;
            } else if (value < 1024 * 1024) {
                return (value / 1024).toFixed(2).concat('KB');
            } else if (value < 1024 * 1024 * 1024) {
                return (value / 1024 / 1024).toFixed(2).concat('MB');
            } else {
                return (value / 1024 / 1024 / 1024).toFixed(2).concat('GB');
            }
        },
        filename: function (value, row, index) {
            return '<img src="' + Fast.api.fixurl("ajax/icon") + "?suffix=" + row.imagetype + '" alt="' + row.name + '" class="attachment-view">' + '<button class="btn btn-link attachment-view">' + value + '</button>';
        },
    },
    events: {
        operate: {
            'click .attachment-view': function (e, value, row, index) {
                var table = $(this).closest('table');
                var options = table.bootstrapTable('getOptions');
                var ids = row[options.id];
                row = $.extend({}, row ? row : {}, {});
                var url = options.extend.attachment_view_url;
                custom_button_attachment.api.getBlog(Table.api.replaceurl(Fast.api.fixurl(options.extend.attachment_data_url), row, table), {'url': row.url}, function (res) {
                    var blob = new Blob([res.response], {type: row.mime});
                    let bloburl = URL.createObjectURL(blob);
                    Fast.api.open(Table.api.replaceurl(url, row, table), $(this).data("original-title") || $(this).attr("title") || __('Edit'), {
                        area: area, shade: shade, success: function (e) {
                            $(window.frames[0].document, e).find('#view-container').attr('src', bloburl);
                            $(window.frames[0].document, e).find('#download-container').attr('href', bloburl);
                        }
                    });
                });
            },
            'click .attachment-edit': function (e, value, row, index) {
                e.stopPropagation();
                e.preventDefault();
                var table = $(this).closest('table');
                var options = table.bootstrapTable('getOptions');
                var ids = row[options.pk];
                row = $.extend({}, row ? row : {}, {ids: ids});
                var url = options.extend.attachment_edit_url;
                Fast.api.open(Table.api.replaceurl(url, row, table), $(this).data("original-title") || $(this).attr("title") || __('Edit'), $(this).data() || {});
            },
            'click .attachment-delete': Table.api.events.operate['click .btn-delone'],
        }
    },
};

说明一下：

定义一个自定义的按钮对象，包括buttons, api, formatter, events，其中

buttons定义三个按钮，就是表格中要显示的；

api里面写一些自己的方法，我这里是从服务器拉取文件内容；

formatter是对表格列的显示输出方法；

events是按钮的执行过程。

表格的初始化大概是这个样子的：

Table.api.init({
    search: true,
    advancedSearch: true,
    pagination: true,
    extend: {
        attachment_url: "attachment" + location.search,
        attachment_view_url: "attachment/action/view" + location.search,
        attachment_data_url: "attachment/action/data" + location.search,
        attachment_edit_url: "attachment/action/edit" + location.search,
        attachment_del_url: "attachment/action/del" + location.search,
        table: 'table-attachment',
    }
});

这里没有“edit_url”和“del_url”，而这两个url的定义恰恰是框架识别用于显示编辑和删除按钮的关键，没有这两个定义，按钮就不显示。但实际使用中，可能需要使用不同的名称来定义，本例就是如此。

表格的列定义大概是这样的：

var tableAttachment = $("#table-attachment");
tableAttachment.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.attachment_url,
    pk: 'hash', toolbar: "#toolbar-attachment", sortName: 'date', fixedColumns: true, fixedRightNumber: 1,
    search: false, showExport: false, commonSearch: false, showColumns: false,
    columns: [
        {
            align: 'left', field: 'name',
            title: '文件名',
            table: tableAttachment,
            events: custom_button_attachment.events.operate,
            formatter: custom_button_attachment.formatter.filename,
            buttons: custom_button_attachment.buttons,
            extend: 'data-toggle="tooltip" data-container="body"',
        },
        {
            field: 'size',
            title: '大小',
            table: tableAttachment,
            formatter: custom_button_attachment.formatter.size,
        },
        {
            field: 'date',
            title: '日期',
            table: tableAttachment,
            class: 'autocontent',
        },
        {
            field: 'operate',
            title: __('Operate'),
            table: tableAttachment,
            buttons: custom_button_attachment.buttons,
            events: custom_button_attachment.events.operate,
            formatter: custom_button_attachment.formatter.operate,
            extend: 'data-toggle="tooltip" data-container="body"',
        },
    ],
});

这样就是完整的自定义表格按钮的方法，上述代码都是在自己的js文件中，不需要去修改框架的js文件（require-table.js）。