FastAdmin 列表添加按钮

原创已于 2024-08-01 13:39:31 修改 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2023-11-10 18:08:31 首次发布

FastAdmin 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在FastAdmin中定制列表页的按钮，包括按钮的显示、隐藏逻辑及触发的事件，如弹窗显示、AJAX请求等，适用于需要精细化控制前端交互的场景。

实现

打开我的要添加的按钮的页面 JS 然后里面添加下面代码

buttons: [{
    name: 'detail', text: '按钮', //按钮名称
    extend: 'data-area=["90%","90%"]',//窗口大小
    title: function (row) {
        return '[' + row.name + ']'; //窗口标题
    },
    icon: 'fa fa-folder',
    classname: 'btn btn-xs btn-primary btn-dialog', //按钮样式
    url: function (row) {
        return 'uqur/information'; //窗口打开的页面
    },
}],

按钮的隐藏

visible: function(row){
    // 根据某些条件返回 true 或 false 来控制按钮是否可见
    // 例如，如果 row.status 不等于 'approved'，则隐藏按钮
    return row.status === 'approved';
},

有时候我们不需要打开弹窗，需要发起ajax请求

buttons:[
    {
        name:'chongzhi',//名称 
        text:'充值',//按钮名称
        title:'充值',//按钮名称
        classname: 'btn btn-xs btn-danger btn-view btn-ajax',
        icon: 'fa fa-refresh',//图标 可在添加菜单规则处 搜索图标见示例图
        url: function (row) {
            return 'chongzhi?phone='  + row.phone; //请求的路由
        },
        confirm: "确定要充值吗?",//如果不需要对话框删除这样代码
        visible:function(row){//判断显示隐藏 只有状态为待审核时展示操作按钮
            if(row.api_status == 'error'){
                return true;//显示
            }else{
                return false;//隐藏
            }
        },
        refresh:true
    }
],