【fastadmin】根据字段值设置操作按钮状态

在FastAdmin这一快速开发框架中，我们经常需要根据数据表中某个字段的值来动态控制页面上操作按钮的显示与隐藏，甚至改变按钮的状态（如启用/禁用）。这种需求在后台管理系统中尤为常见，本文将详细介绍如何在FastAdmin中实现这一功能。

一、背景需求

假设我们有一个活动管理模块，表中有一个字段status，其值表示活动当前状态：

• status = 'pending' 表示活动尚未开始。
• status = 'continue' 表示活动正在进行。
• status = 'over' 表示活动结束。

需求是只有尚未开始的活动允许编辑和删除，正在进行或者已经结束的活动禁用编辑和删除按钮。

二、实现步骤

在JS文件中，我们需要修改或添加table.bootstrapTable的配置项，特别是buttons数组，用于定义操作列中的按钮。

{
    field: 'operate',
    title: __('Operate'),
    table: table,
    buttons: [
    	{
			name: 'edit',
            icon: 'fa fa-pencil',
            title: __('Edit'),
            extend: 'data-toggle="tooltip" data-container="body"',
            classname: 'btn btn-xs btn-success btn-editone',
            disable: (row) => {
                return row.status !== 'pending';
            },
        },
        {
            name: 'del',
            icon: 'fa fa-trash',
            title: __('Del'),
            extend: 'data-toggle="tooltip" data-container="body"',
            classname: 'btn btn-xs btn-danger btn-delone',
            disable: (row) => {
            	return row.status !== 'pending';
            },
        }
    ],
    events: Table.api.events.operate,
    formatter: Table.api.formatter.operate
}

通过重写 edit 和 del 按钮，增加 disabled 属性即可达到目标效果

三、拓展延伸

除了控制按钮禁用状态之外，buttons中还可以配置其他的属性，具体我们可以查看框架源码

// columns参数中的operate列对象
{
	field: 'operate',
	title: __('Operate'),
	table: table,
	events: Table.api.events.operate,

	// 渲染表格内容
	formatter: Table.api.formatter.operate
}

表格操作列的渲染方法调用的是 Table.api.formatter.operate ，我们再来看一下 Table.api.formatter.operate 的代码

其主要功能是整理要渲染的按钮 buttons，然后调用 Table.api.buttonlink ，我们继续来看 Table.api.buttonlink 方法里的内容

// ......
// 重点看这一段
hidden = typeof j.hidden === 'function' ? j.hidden.call(table, row, j) : (typeof j.hidden !== 'undefined' ? j.hidden : false);
if (hidden) {
    return true;
}
visible = typeof j.visible === 'function' ? j.visible.call(table, row, j) : (typeof j.visible !== 'undefined' ? j.visible : true);
if (!visible) {
    return true;
}
dropdown = j.dropdown ? j.dropdown : '';
url = j.url ? j.url : '';
url = typeof url === 'function' ? url.call(table, row, j) : (url ? Fast.api.fixurl(Table.api.replaceurl(url, row, table)) : 'javascript:;');
classname = j.classname ? j.classname : (dropdown ? 'btn-' + name + 'one' : 'btn-primary btn-' + name + 'one');
icon = j.icon ? j.icon : '';
text = typeof j.text === 'function' ? j.text.call(table, row, j) : j.text ? j.text : '';
title = typeof j.title === 'function' ? j.title.call(table, row, j) : j.title ? j.title : text;
refresh = j.refresh ? 'data-refresh="' + j.refresh + '"' : '';
confirm = typeof j.confirm === 'function' ? j.confirm.call(table, row, j) : (typeof j.confirm !== 'undefined' ? j.confirm : false);
confirm = confirm ? 'data-confirm="' + confirm + '"' : '';
extend = typeof j.extend === 'function' ? j.extend.call(table, row, j) : (typeof j.extend !== 'undefined' ? j.extend : '');
disable = typeof j.disable === 'function' ? j.disable.call(table, row, j) : (typeof j.disable !== 'undefined' ? j.disable : false);
// ......

这里定义了按钮的一些属性，其中可以是值，也可以是一个 function，我们需要什么属性就可以再buttons中配置什么属性就可以了。

好了，今天的分享就到这里，如果本文对你有帮助，帮忙点个赞，感激不尽！