fastadmin后台自定义按钮和弹窗

工具栏自定义按钮-ajax请求

前端代码

1.在对应模块的模板文件index.html添加自定义按钮，注意按钮要添加id以绑定点击事件

<div class="panel panel-default panel-intro">
    {:build_heading()}
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        {:build_toolbar('refresh,add,edit,del')}
                        <div class="dropdown btn-group {:$auth->check('user/group/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                            </ul>
                        </div>

                        <!--  添加自定义按钮  -->
                        <a class="btn btn-primary dropdown-toggle" href="javascript:;" data-toggle="dropdown" id="testButton"><i class="fa fa-send"></i> {:__('自定义')}</a>
                    
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('user/group/edit')}"
                           data-operate-del="{:$auth->check('user/group/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

2.对应js文件中添加绑定事件，注意要写在为表格绑定事件前面

		//.......(表格字段)			


			// 自定义功能
            $('#testButton').on('click', function (){
                layer.confirm(`确定调用自定义功能吗？`, {
                        btn: ['确定', '取消'] //按钮
                    }, function (index) {
                        $.ajax({
                            url: "user/user/test", //请求接口
                            type: "post",
                            dataType: "json",
                            data: {"ids": 1}, //请求参数
                            success: function (data) {
                                layer.confirm(data.msg, {
                                    btn: ['确定'] //按钮
                                }, function (index2) {
                                    Fast.api.refreshmenu(); //刷新列表
                                    layer.close(index2); //关闭窗口
                                })
                                return false;
                            }
                        })
                        layer.close(index);
                    }
                );
            });



            // 为表格绑定事件
            Table.api.bindevent(table);

后端代码

	/**
     * 自定义按钮
     */
    public function test(){
        //do something
        
        //$this->error('请求失败');
        $this->success('请求成功');
    }

工具栏自定义按钮-弹窗

1.在对应模块的模板文件index.html添加自定义按钮，注意按钮要添加id以绑定点击事件

<div class="panel panel-default panel-intro">
    {:build_heading()}
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        {:build_toolbar('refresh,add,edit,del')}
                        <div class="dropdown btn-group {:$auth->check('user/group/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                            </ul>
                        </div>

                        <!--  添加自定义按钮  -->
                        <a class="btn btn-primary dropdown-toggle" href="javascript:;" data-toggle="dropdown" id="testButton"><i class="fa fa-send"></i> {:__('自定义')}</a>
                    
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('user/group/edit')}"
                           data-operate-del="{:$auth->check('user/group/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

2…js文件添加请求接口路径，如下面的test_dialog_url

		// 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'user/group/index',
                    add_url: 'user/group/add',
                    edit_url: 'user/group/edit',
                    del_url: 'user/group/del',
                    multi_url: 'user/group/multi',
                    test_dialog_url: 'user/group/test_dialog', //添加接口路径，方法名称要跟接口名称一致
                    table: 'user_group',
                }
            });

3.js文件添加按钮绑定事件和表格绑定事件，注意这里是两步，缺一不可

......
var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'user/group/index',
                    add_url: 'user/group/add',
                    edit_url: 'user/group/edit',
                    del_url: 'user/group/del',
                    multi_url: 'user/group/multi',
                    test_dialog_url: 'user/group/test_dialog', //添加接口路径，方法名称要跟接口名称一致
                    table: 'user_group',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'name', title: __('Name')},
                        {field: 'createtime', title: __('Createtime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                        {field: 'updatetime', title: __('Updatetime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                        {field: 'status', title: __('Status'), formatter: Table.api.formatter.status},
                    ]
                ]
            });

            // 1.工具栏自定义弹窗绑定事件
            $("#testButton").on('click', function (){
                // Fast.config.openArea = ['800px','600px']; //设置弹窗宽高,注意这里是全局调整
                Fast.api.open($.fn.bootstrapTable.defaults.extend.test_dialog_url,'自定义弹窗');
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },

        //2.为表格绑定事件
        test_dialog: function () {
            Controller.api.bindevent();
        },

        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
    ......

4.写后端代码，注意方法名不支持驼峰命名

/**
 * 自定义弹窗
 */
public function test_dialog(){
    if ($this->request->isAjax()){ //表单提交
        $params = $this->request->param();//获取参数
        //do something

        $this->success('操作成功');
    }

    //显示模板
    return $this->view->fetch();
}

5.写模板文件

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">姓名:</label>
        <div class="col-xs-12 col-sm-8">
            <input class="form-control" name="username" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">电话:</label>
        <div class="col-xs-12 col-sm-8">
            <input class="form-control" name="phone" type="text">
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed" id="submit">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

操作栏自定义按钮-ajax请求

1.js文件添加请求接口路径，如下面的test_url

		// 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'user/group/index',
                    add_url: 'user/group/add',
                    edit_url: 'user/group/edit',
                    del_url: 'user/group/del',
                    multi_url: 'user/group/multi',
                    test_url: 'user/user/test', //添加接口路径
                    table: 'user_group',
                }
            });

2.操作字段添加按钮，将原来的operate字段栏增加buttons属性，注意里面classname属性要有btn-ajax

{field: 'operate', title: __('Operate'), table: table,
        events: Table.api.events.operate,
        buttons:[
            {
                name:'test',//名称
                text:'自定义',
                title:'自定义',
                classname: 'btn btn-xs btn-info btn-view btn-ajax',
                icon: 'fa fa-check',//图标 可在添加菜单规则处 搜索图标见示例图
                url: 'user/user/test',//接口地址 控制器名/方法名
                visible:function(row){//判断显示隐藏 只有状态为待审核时展示操作按钮
                    if(row.status == 0){
                        return true;//显示
                    }else{
                        return false;//隐藏
                    }
                },
                refresh:true
            }
        ],
        formatter: Table.api.formatter.operate
    }

操作栏自定义按钮-弹窗

1.js文件添加请求接口路径，如下面的test_url

		// 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'user/group/index',
                    add_url: 'user/group/add',
                    edit_url: 'user/group/edit',
                    del_url: 'user/group/del',
                    multi_url: 'user/group/multi',
                    test_dialog_url: 'user/group/test_dialog', //添加接口路径，方法名称要跟接口名称一致
                    table: 'user_group',
                }
            });

2.js文件操作字段添加按钮，将原来的operate字段栏增加buttons属性，注意里面classname属性要有btn-ajax

{field: 'operate', title: __('Operate'), table: table,
    events: Table.api.events.operate,
    buttons:[
        {
            name:'test',//名称
            text:'自定义',
            title:'自定义弹窗',
            classname: 'btn btn-xs btn-info btn-view btn-dialog', //注意这里要用btn-dialog
            icon: 'fa fa-check',//图标 可在添加菜单规则处 搜索图标见示例图
            url: function (row, column) { //row 表格接收到的数据
                return "user/group/test_dialog?id=" + row.id; //弹窗的对应后台控制器方法 这里是默认index方法 带上id参数
            },
            extend: 'data-area=\'["60%","50%"]\'', //这是控制弹窗的弹出的尺寸 width-height
            visible:function(row){//判断显示隐藏 只有状态为待审核时展示操作按钮
                if(row.status == 0){
                    return true;//显示
                }else{
                    return false;//隐藏
                }
            },
            refresh:true //刷新表格
        }
    ],
    formatter: Table.api.formatter.operate
}

3.js文件表格绑定事件，写在add方法前面即可，方法名称要跟接口名称一致

//为表格绑定事件
test_dialog: function () {
    Controller.api.bindevent();
},

//这个add方法是自带的，不用复制
add: function () {
    Controller.api.bindevent();
},

4.写后端代码，注意方法名不支持驼峰命名

/**
 * 自定义弹窗
 */
public function test_dialog(){
    if ($this->request->isAjax()){ //表单提交
        $params = $this->request->param();//获取参数
        //do something

        $this->success('操作成功');
    }

    //显示模板
    return $this->view->fetch();
}

5.写模板文件

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">姓名:</label>
        <div class="col-xs-12 col-sm-8">
            <input class="form-control" name="username" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">电话:</label>
        <div class="col-xs-12 col-sm-8">
            <input class="form-control" name="phone" type="text">
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed" id="submit">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/360046.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

.net core 6 集成 elasticsearch 并 使用分词器

.net core 6 集成 elasticsearch 并 使用分词器

1、nuget包安装NEST、安装elasticsearch、kibana、ik分词器、拼音分词器 2、创建操作对象 //索引库 static string indexName "testparticper"; //es 操作对象 ElasticClient elasticClient new ElasticClient(new ConnectionSettings(new Uri("http://192.…
阅读更多...
【项目日记(六)】第二层: 中心缓存的具体实现(下)

【项目日记(六)】第二层: 中心缓存的具体实现(下)

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:项目日记-高并发内存池⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你做项目   &#x1f51d;&#x1f51d; 开发环境: Visual Studio 2022 项目日…
阅读更多...
螺旋遍历二维数组【leetcode】

螺旋遍历二维数组【leetcode】

给定一个二维数组 array&#xff0c;请返回「螺旋遍历」该数组的结果。 螺旋遍历&#xff1a;从左上角开始&#xff0c;按照 向右、向下、向左、向上 的顺序 依次 提取元素&#xff0c;然后再进入内部一层重复相同的步骤&#xff0c;直到提取完所有元素。 示例 1&#xff1a; …
阅读更多...
深入理解二叉树：遍历、构建与性质探索的代码实现

深入理解二叉树：遍历、构建与性质探索的代码实现

&#x1f4f7; 江池俊&#xff1a; 个人主页 &#x1f525;个人专栏&#xff1a; ✅数据结构冒险记 ✅C语言进阶之路 &#x1f305; 有航道的人&#xff0c;再渺小也不会迷途。 文章目录 前言一、二叉树的存储结构二、二叉树链式结构的实现三、二叉树的前、中、后续遍历&…
阅读更多...
小程序定制开发：解析定制化移动应用的未来

小程序定制开发：解析定制化移动应用的未来

引言 在当今数字化时代&#xff0c;移动应用已经成为人们生活不可或缺的一部分。随着智能手机的普及&#xff0c;移动应用的需求呈现出爆发式增长&#xff0c;企业们也纷纷投身于这场数字化浪潮。然而&#xff0c;众多企业在竞争激烈的市场中&#xff0c;如何突显个性、提高用…
阅读更多...
Springboot校验注解

Springboot校验注解

Spring Boot 提供了一组基于 Hibernate Validator 的校验注解&#xff0c;用于验证请求参数、实体对象等数据的合法性。下面是一些常用的 Spring Boot 校验注解及其功能&#xff1a; 导入依赖 <dependency><groupId>org.springframework.boot</groupId><…
阅读更多...
【智能家居入门2】（MQTT协议、微信小程序、STM32、ONENET云平台）

【智能家居入门2】（MQTT协议、微信小程序、STM32、ONENET云平台）

此篇智能家居入门与前两篇类似&#xff0c;但是是使用MQTT协议接入ONENET云平台&#xff0c;实现微信小程序与下位机的通信&#xff0c;这里相较于使用http协议的那两篇博客&#xff0c;在主程序中添加了独立看门狗防止程序卡死和服务器掉线问题。后续还有使用MQTT协议连接MQTT…
阅读更多...
配置nginx作为静态文件托管服务器

配置nginx作为静态文件托管服务器

下载nginx windows上是个压缩包 解压后, 使用命令行输入 nginx 进行启动 nginx -s stop 进行停止 nginx -s status 查看状态 可以配置一下环境变量 主要是配置文件, windows的nginx配置文件在 conf文件夹下 在http标签下 添加如下配置 其他地方不用更改,保持原样即可, 以…
阅读更多...
isctf---web

isctf---web

圣杯战争 php反序列 ?payloadO:6:"summon":2:{s:5:"Saber";O:8:"artifact":2:{s:10:"excalibuer";O:7:"prepare":1:{s:7:"release";O:5:"saber":1:{s:6:"weapon";s:52:"php://filter…
阅读更多...
001集—shapefile(.shp)格式详解——arcgis

001集—shapefile(.shp)格式详解——arcgis

一、什么是shapefile Shapefile 是一种用于存储地理要素的几何位置和属性信息的非拓扑简单格式。shapefile 中的地理要素可通过点、线或面&#xff08;区域&#xff09;来表示。包含 shapefile 的工作空间还可以包含 dBASE 表&#xff0c;它们用于存储可连接到 shapefile 的要…
阅读更多...
Adobe Camera Raw forMac/win：掌控原始之美的秘密武器

Adobe Camera Raw forMac/win：掌控原始之美的秘密武器

Adobe Camera Raw&#xff0c;这款由Adobe开发的插件&#xff0c;已经成为摄影师和设计师们的必备工具。对于那些追求完美、渴望探索更多创意可能性的专业人士来说&#xff0c;它不仅仅是一个插件&#xff0c;更是一个能够释放无尽创造力的平台。 在数字摄影时代&#xff0c;R…
阅读更多...
【Ubuntu 22.04.3 LTS】apt-get下载安装有关问题可能原因及解决方法

【Ubuntu 22.04.3 LTS】apt-get下载安装有关问题可能原因及解决方法

ubuntu 22.04.3 LTS unaccountably error 装啥啥没依赖 可能是用了不合适的源&#xff0c;换个就好了 Now, let’s take a look at the lsb_release output, with a special focus on the Codename, which could be a crucial piece of information. The lsb_release comm…
阅读更多...
普通spring项目配置加密

普通spring项目配置加密

概述 本文主要介绍普通spring项目(非springboot)怎么进行配置加密。 出于安全考虑&#xff0c;生产配置不能明文出现在配置文件中。对于SpringBoot可以使用jasypt-spring-boot这个组件来为配置属性提供加密。 普通的spring项目暂时就没有找到合适的加密工具。这时候那就只能…
阅读更多...
Banana Pi BPI-R4开源路由器开发板快速上手用户手册，采用联发科MT7988芯片设计

Banana Pi BPI-R4开源路由器开发板快速上手用户手册，采用联发科MT7988芯片设计

介绍 Banana Pi BPI-R4 路由器板采用 MediaTek MT7988A (Filogic 880) 四核 ARM Corex-A73 设计&#xff0c;4GB DDR4 RAM&#xff0c;8GB eMMC&#xff0c;板载 128MB SPI-NAND 闪存&#xff0c;还有 2x 10Gbe SFP、4x Gbe 网络端口&#xff0c;带 USB3 .2端口&#xff0c;M.2…
阅读更多...
basic CNN

basic CNN

文章目录 回顾卷积神经网络卷积卷积核卷积过程卷积后图像尺寸计算公式&#xff1a;代码 padding代码 Stride代码 MaxPooling代码 一个简单的卷积神经网络用卷积神经网络来对MINIST数据集进行分类如何使用GPU代码 练习 回顾 下面这种由线形层构成的网络是全连接网络。 对于图像…
阅读更多...
Codesys与威纶通触摸屏标签通信步骤

Codesys与威纶通触摸屏标签通信步骤

codesys软件&#xff0c;添加对象结构体。 添加对象全局变量列表。设置变量列表属性。 添加对象符号配置&#xff0c;编译。 勾选变量&#xff0c;编译。 文件夹出现xml文件。 打开威纶通软件&#xff0c;添加设备&#xff0c;导入标签&#xff0c;选择上图的文件。
阅读更多...
RX-4571LC/NB/SA实时时钟模块

RX-4571LC/NB/SA实时时钟模块

RX-4571LC实时时钟模块是EPSON推出的一求款额定频率32.768KHz&#xff0c;接口为SPI(3-wire)&#xff0c;月偏差为60 s的实时时钟模块&#xff0c;12脚贴片&#xff0c;具有小尺寸&#xff0c;高稳定性。该款实时时钟模块&#xff0c;可以在-40~85 C的温度内稳定工作,频率公差为…
阅读更多...
解决Could not transfer artifact org.springframework.boot的问题

解决Could not transfer artifact org.springframework.boot的问题

进行maven更新的时候&#xff0c;发现报错了 Could not transfer artifact org.springframework.boot&#xff0c;提示网络错误&#xff0c;搜了一下&#xff0c;应该是要忽略https 在maven设置中添加如下语句 -Dmaven.wagon.http.ssl.insecuretrue -Dmaven.wagon.http.ssl.a…
阅读更多...
Redis（十）SpringBoot集成Redis

Redis（十）SpringBoot集成Redis

文章目录 连接单机mvnYMLController.javaRedisConfig.java 连接集群YML问题复现 RedisTemplate方式 连接单机 mvn <!--Redis--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</art…
阅读更多...
[C++]类和对象(上)

[C++]类和对象(上)

目录 一:面向过程与面向对象的区别 二:类的定义 三:类的访问限定符和封装 3.1访问限定符 3.2 封装 四:类的实例化 五:类对象模型 如何计算类的大小 类对象的存储方式 六:this指针 this指针的引出 this指针的特性 一:面向过程与面向对象的区别 面向过程 C语言是面…
阅读更多...
最新文章

Copyright @ 2022~2023