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）。
通过CRUD生成的模型，如果数据库字段设置为DateTime格式，会报数据格式不一致的错误。
需要在 模型文件 中手动再设置一下：
// 字段类型或者格式转换
protected $type = [
'createtime'=>'datetime:Y-m-d H:i:s',
'updatetime'=>'datetime:Y-m-d H:i:s',
'deletetime'=>'datetime:Y-m-d H:i:s'
];vsftpd是“very secure TTP daemon”的缩写，是一款在Linux发行版中最受推崇的ftp服务器程序，小巧轻快，安全易用，支持虚拟用户，支持带宽限制等功能，是一个完全免费的、开放源代码的ftp服务器软件。
一、在安装之前，请先对 Ubuntu 系统进行更新
sudo apt update && sudo apt upgrade二、使用Ubuntu 官方源进行安装
sudo apt install vsftpd -y安装完成后启动vsftpd
sudo systemctl start vsftpd将vsftpd设置为开机自启动
sudo systemctl enable vsftpd查看vsftpd的状态
sudo service --status-all打印出来的列表中有vsftpd，并且前面是[+]说明安装成功并已启动服务
三、配置vsftpd
创建一个ftp根目录
sudo mkdir /ftphome创建一个新用户并设置密码
sudo useradd -d /ftphome ftpuser
sudo passwd ftpuser修改ftp根目录的所有者
sudo chown ftpuser:ftpuser /ftphome -R创建一个用户列表文件
sudo vi /etc/vsftpd.chroot_list按 i 进入编辑模式，按一个用户名占据一行的方式把刚才创建的用户名填入，按 Esc 并输入 :wq 保存退出
编辑VSFTPD的配置文件
sudo vi /etc/vsftpd.conflisten=YES
#listen_ipv6=YES
write_enable=YES
chroot_local_user=YES
chroot_list_enable=YES
chroot_list_file=/etc/vsftpd.chroot_list主要设置内容按上面的设置，然后:wq保存并退出，重启vsftpd服务
sudo systemctl restart vsftpd四、测试
ftp localhost
Connected to localhost.
220 Welcome to blah FTP service.
Name (localhost:lighthouse): ftpa
331 Please specify the password.
Password:
230 Login successful.
Remote system type is UNIX.
Using binary mode to transfer files.
ftp> bye
221 Goodbye.看到Login successful.就说明登录成功了，bye退出ftp命令。
至此vsftpd就安装成功了，想要添加用户可以按上面相应的步骤添加。
服务器使用的是 腾讯云 的 轻量服务器，Ubuntu Server 20.04 LTS 64bit，2核4GB，60GBSSD，5Mbps。
一、在安装之前，请先对 Ubuntu 系统进行更新
sudo apt update && sudo apt upgrade二、使用Ubuntu 官方源进行安装
sudo apt install mysql-server -y三、安装成功后进入mysql控制台，使用系统root权限进入控制台不需要密码
lighthouse@VM-24-15-ubuntu:~$ sudo mysql
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 10
Server version: 8.0.37-0ubuntu0.20.04.3 (Ubuntu)
Copyright (c) 2000, 2024, Oracle and/or its affiliates.
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
mysql> 四、添加一个新的管理员用户
1、创建用户
mysql> create user 'manager'@'localhost' identified with mysql_native_password by '12345678';2、赋予权限
mysql> grant all on *.* to 'manager'@'localhost' with grant option;3、刷新权限
mysql> flush privileges;4、退出mysql
mysql> quit
Bye至此安装完成，可以使用phpMyAdmin等mysql管理软件使用新创建的用户登录进行管理操作了。
enjoy