FastAdmin数据列表根据某个字段的值动态显示与隐藏按钮

747 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

一、需求

在后台管理中,我们有时会遇到根据数据表中某个字段的值来判断显示某个可操作的按钮。

比如一张用户表中,存在一个status字段,在列表显示时,如果该字段的值等于1,显示拉黑按钮,等于2则显示恢复按钮。

二、代码实现

FastAdmin快速开发框架中,列表数据由相应的JavaScript文件渲染而成,假如控制器为User.php,则此控制对应的JS文件位置在public/assets/js/backend/user/user.js

在操作一栏添加两个按钮,分别为拉黑恢复,使用visible函数判断显示与隐藏。

{field: 'operate', title: __('Operate'), table: table, buttons: [
	// 拉黑按钮
    {
        name: 'status1', 
        text: '拉黑', 
        confirm: '确定拉黑该用户吗?',  // 这里使用的是询问框
        title: '拉黑', 
        classname: 'btn btn-xs btn-primary btn-ajax',  // 按钮样式,btn-ajax 代表点击此按钮发送 ajax 请求
        url: '',  // ajax 请求地址
        // 判断该按钮是否显示,row 代表当前行数据
        visible: function (row) {
        	// 判断当前行数据中的 status 字段的值是否等于 1
            if (row.status == 1) {
            	// return true 代表显示
                return true;
            }
        },
        // ajax 请求结束后刷新当前页面
        success: function () {
            $(".btn-refresh").trigger("click");
        }
    },
    {
        name: 'status2', 
        text: '恢复', 
        confirm: '确定恢复该用户吗?', 
        title: '恢复', 
        classname: 'btn btn-xs btn-warning btn-ajax', 
        url: '',
        visible: function (row) {
        	// 判断当前行数据中的 status 字段的值是否等于 2
            if (row.status  == 2) {
                return true;
            }
        },
        success: function () {
            $(".btn-refresh").trigger("click");
        }
    }
 ],
 events: Table.api.events.operate, formatter: Table.api.formatter.operate
}

效果图:

按钮显示

更多参照:一张图解析FastAdmin中的表格列表的功能