fastadmin框架中如何添加一个自定义按钮

简介: 使用fastadmin框架添加一个按钮并给按钮绑定相应的事件指向控制器中的方法,在fastadmin框架的二次开发中非常的常见,接下来本篇就来介绍一下创建按钮的具体流程。

一、简单介绍


       具体效果:

2f64b071734d4fbfa68ee8f968ba49dd.png


使用fastadmin框架添加一个按钮并给按钮绑定相应的事件指向控制器中的方法,在fastadmin框架的二次开发中非常的常见,接下来本篇就来介绍一下创建按钮的具体流程。


二、具体流程


(1)首先在fastadmin框架中创建相应模块的视图、模型、控制器模块。


(2)在对应的public/assets静态资源目录下找到backend后台目录下的js文件

4636a3ace5684e6ebc35ca34c0966bdf.png

(3)在文件的初始化表格参数中添加URL地址,这个地址指向你的控制器方法。

44550c53c02c4e84a19f040f624bcb11.png

注意,我这里控制器的目录如图所示:

1cfdd757b2fa4966bd02e18e679424fd.png


具体添URL的代码如下:


            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'download/download/index',
                    add_url: 'download/download/add',
                    edit_url: 'download/download/edit',
                    del_url: 'download/download/del',
                    multi_url: 'download/download/multi',
                    download_url: 'download/download/download',
                    table: 'files',
                }
            });


(4)在初始化表格中添加按钮事件。其中URL指向控制器对应的方法

3216295b85fc41b098831763940c6515.png


具体的代码如下:


                            field: 'operate', title: __('Operate'),
                            table: table,
                            buttons: [{
                                name: "download",
                                text: "导出",//按钮名称
                                classname: 'btn btn-xs btn-success btn-magic ',
                                // classname: 'btn btn-xs btn-success btn-magic btn-dialog',
                                icon: 'fa fa-magic',
                                url: 'download/download/download',//指向控制器对应方法
                                confirm: '导出当前用户的文件信息',
                                visible: function (row) {
                                    //返回true时按钮显示,返回false隐藏
                                    return true;
                                }
                            }],
                            events: Table.api.events.operate, formatter: Table.api.formatter.operate
                        }



(5)在事件绑定处为表格按钮绑定事件。

cc54fd3741354f71916c74d6a733265a.png

(6)在控制器中添加对应的方法,写入你想要实现的功能即可。

edba2b84de1d43debce4a9d02dc308d8.png


三、如果有什么不懂的可以评论区留言,感谢支持。

目录
相关文章
|
2月前
|
JavaScript 前端开发 API
使用ArkUI封装表单
本文介绍了如何使用华为鸿蒙系统的声明式UI框架ArkUI封装表单。主要内容包括创建自定义组件、实现验证逻辑、在父组件中使用自定义表单组件,以及样式和布局的设置。通过这些步骤,可以提高代码的可复用性和模块化程度,使表单构建更加高效和易于维护。
116 3
|
5月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
|
5月前
|
C# 前端开发 UED
WPF数据验证实战:内置控件与自定义规则,带你玩转前端数据验证,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,数据验证是确保输入正确性的关键环节。前端验证能及时发现错误,提升用户体验和程序可靠性。本文对比了几种常用的WPF数据验证方法,并通过示例展示了如何使用内置验证控件(如`TextBox`)及自定义验证规则实现有效验证。内置控件结合`Validation`类可快速实现简单验证;自定义规则则提供了更灵活的复杂逻辑支持。希望本文能帮助开发者更好地进行WPF数据验证。
165 0
|
5月前
|
前端开发
前端ElementPlus框架中的几种图标按钮使用方式
本文介绍了如何在Element Plus前端框架中使用带有图标的按钮,包括设置按钮大小、图标大小、按钮类型以及如何为图标添加点击事件。
450 0
|
5月前
|
开发框架 前端开发 C#
使用WPF开发自定义用户控件,以及实现相关自定义事件的处理
使用WPF开发自定义用户控件,以及实现相关自定义事件的处理
|
数据安全/隐私保护
ApeForms | WinForm窗体UI美化库(Metro扁平风格)演示与安装
ApeForms是一套基于WinForm框架免费的UI库,提供了丰富的Metro风格控件、针对WinForm开发中常见类型的扩展、通用Dialog/Notification的模板等。
483 0
|
开发框架 自然语言处理 数据库连接
|
前端开发 C# 图形学
【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
Wpf开发过程中,最经常使用的功能之一,就是用户控件(UserControl)了。用户控件可以用于开发用户自己的控件进行使用,甚至可以用于打造一套属于自己的UI框架。依赖属性(DependencyProperty)是为用户控件提供可支持双向绑定的必备技巧之一,同样用处也非常广泛。
967 0
【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
|
前端开发
「前端组件开发」越折腾越有趣,封装了一个表单组件
最近折腾代码简洁之路,先折腾了详情页,最近准备折腾一下表单组件,准备二次封装,提升代码复用率。
312 1
最最最常用的就是按钮了吧~ — 常用组件详解(按钮系列)
普通的基础组件自然不能满足我们的日常开发需求,所以小T带大家了解Flutter开发中的常用组件。
最最最常用的就是按钮了吧~ — 常用组件详解(按钮系列)