FastAdmin表格顶部增加toolbar按钮

效果入下图,在表格顶部增加一个自定义按钮,点击确认后请求服务器接口

表格对应的index.html中

    <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">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
<!--                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('chat/group/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>-->
<!--                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('chat/group/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>-->
<!--                        <a href="javascript:;" class="btn btn-success btn-del btn-disabled disabled {:$auth->check('chat/group/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-refresh"></i> {:__('Delete')}</a>-->
<!--                        新增刷新数据按钮-->
                        <a href="javascript:;" class="btn btn-success btn-synchronization {:$auth->check('chat/group/synchronization')?'':'hide'}" title="{:__('Synchronization')}" ><i class="fa fa-cloud-download"></i> {:__('Synchronization')}</a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('chat/group/edit')}"
                           data-operate-del="{:$auth->check('chat/group/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>

表格对应的js

            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'chat/group/index' + location.search,
                    // add_url: 'chat/group/add',
                    // edit_url: 'chat/group/edit',
                    // del_url: 'chat/group/del',
                    // 增加按钮对应的后台的url
                    synchronization_url: 'chat/group/synchronization',
                    multi_url: 'chat/group/multi',
                    import_url: 'chat/group/import',
                    table: 'chat_group',
                }
            });


        edit: function () {
            Controller.api.bindevent();
        },
        // 新增同步数据
        synchronization: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }

在require-table.js文件中

        config: {
            checkboxtd: 'tbody>tr>td.bs-checkbox',
            toolbar: '.toolbar',
            refreshbtn: '.btn-refresh',
            addbtn: '.btn-add',
            editbtn: '.btn-edit',
            delbtn: '.btn-del',
            //增加自定义按钮
            synchronizationbtn: '.btn-synchronization',
            importbtn: '.btn-import',
            multibtn: '.btn-multi',
            disabledbtn: '.btn-disabled',
            editonebtn: '.btn-editone',
            restoreonebtn: '.btn-restoreone',
            destroyonebtn: '.btn-destroyone',
            restoreallbtn: '.btn-restoreall',
            destroyallbtn: '.btn-destroyall',
            dragsortfield: 'weigh',
        },


        button: { //现有代码为了确定增加代码的位置
            edit: {
                name: 'edit',
                icon: 'fa fa-pencil',
                title: __('Edit'),
                extend: 'data-toggle="tooltip" data-container="body"',
                classname: 'btn btn-xs btn-success btn-editone'
            },
            del: {
                name: 'del',
                icon: 'fa fa-trash',
                title: __('Del'),
                extend: 'data-toggle="tooltip" data-container="body"',
                classname: 'btn btn-xs btn-danger btn-delone'
            },
            //增加自定义按钮
            synchronization: {
                name: 'synchronization',
                icon: 'fa fa-trash',
                title: __('Synchronization'),
                extend: 'data-toggle="tooltip" data-container="body"',
                classname: 'btn btn-xs btn-danger btn-delone'
            },


                // 批量删除按钮事件 现有代码为了确定增加代码的位置
                toolbar.on('click', Table.config.delbtn, function () {
                    var that = this;
                    var ids = Table.api.selectedids(table);
                    Layer.confirm(
                        __('Are you sure you want to delete the %s selected item?', ids.length),
                        {icon: 3, title: __('Warning'), offset: 0, shadeClose: true, btn: [__('OK'), __('Cancel')]},
                        function (index) {
                            Table.api.multi("del", ids, table, that);
                            Layer.close(index);
                        }
                    );
                });
                // 企业微信同步数据事件
                toolbar.on('click', Table.config.synchronizationbtn, function () {
                    var that = this;
                    var ids = Table.api.selectedids(table);
                    Layer.confirm(
                        __('确认从企业微信重新获取信息?'),
                        {icon: 3, title: __('Warning'), offset: 0, shadeClose: true, btn: [__('OK'), __('Cancel')]},
                        function (index) {
                            Table.api.synchronization("synchronization", ids, table, that);;
                            Layer.close(index);
                        }
                    );
                });





            // 批量操作请求 现有代码为了确定增加代码的位置
            multi: function (action, ids, table, element) {
                var options = table.bootstrapTable('getOptions');
                var data = element ? $(element).data() : {};
                ids = ($.isArray(ids) ? ids.join(",") : ids);
                var url = typeof data.url !== "undefined" ? data.url : (action == "del" ? options.extend.del_url : options.extend.multi_url);
                var params = typeof data.params !== "undefined" ? (typeof data.params == 'object' ? $.param(data.params) : data.params) : '';
                options = {url: url, data: {action: action, ids: ids, params: params}};
                Fast.api.ajax(options, function (data, ret) {
                    table.trigger("uncheckbox");
                    var success = $(element).data("success") || $.noop;
                    if (typeof success === 'function') {
                        if (false === success.call(element, data, ret)) {
                            return false;
                        }
                    }
                    table.bootstrapTable('refresh');
                }, function (data, ret) {
                    var error = $(element).data("error") || $.noop;
                    if (typeof error === 'function') {
                        if (false === error.call(element, data, ret)) {
                            return false;
                        }
                    }
                });
            },
            // 增加同步微信数据请求
            synchronization: function (action, ids, table, element) {
                var options = table.bootstrapTable('getOptions');
                var url = options.extend.synchronization_url;
                options = {url: url, data: {}};
                Fast.api.ajax(options, function (data, ret) {
                    table.trigger("uncheckbox");
                    var success = $(element).data("success") || $.noop;
                    if (typeof success === 'function') {
                        if (false === success.call(element, data, ret)) {
                            return false;
                        }
                    }
                    table.bootstrapTable('refresh');
                }, function (data, ret) {
                    var error = $(element).data("error") || $.noop;
                    if (typeof error === 'function') {
                        if (false === error.call(element, data, ret)) {
                            return false;
                        }
                    }
                });
            },

如此之后前端代码已经实现完毕,点击就出现如图效果,并请求了后台接口。

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

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

相关文章

JVM GC 调优命令看这一篇就够了

JVM GC 调优命令看这一篇就够了 2023-11-11 23:27IT果果日记 jstat 可用于统计内存分配速率、GC次数&#xff0c;GC耗时 jstat常用命令格式 jstat -gc <pid> <统计间隔时间> <统计次数> 例如&#xff1a;jstat -gc 6 1000 10 &#xff0c;统计pid6的进…

【设计一个缓存--针对各种类型的缓存】

设计一个缓存--针对各种类型的缓存 1. 设计顶层接口2. 设计抽象类 -- AbstractCacheManager3. 具体子类3.1 -- AlertRuleItemExpCacheManager3.2 -- AlertRuleItemSrcCacheManager 4. 类图关系 1. 设计顶层接口 // 定义为一个泛型接口,提供给抽象类使用 public interface Cach…

技术管理责任制度《三》

为了加强新时期科技档案的保密工作&#xff0c;确保档案在保管、利用、复制、销毁过程中的保密工作&#xff0c;特规定如下&#xff1a; 彩虹图纸管理软件_图纸管理系统_图纸文档管理软件系统_彩虹EDM【官网】 1、档案员要认真学习和严格执行国家有关安全、保密制度规定&#…

【java学习—十四】反射获取类的父类、接口、构造方法、方法(3)

文章目录 1. 通过反射获取一个类的父类和接口2. 反射获取一个类的构造方法3. 反射获取全部构造器4. 通过反射创建一个对象5. 反射机制获取类的方法 1. 通过反射获取一个类的父类和接口 使用反射可以取得&#xff1a; 实现的全部接口 public Class<?>[] getInterfaces(…

【小黑嵌入式系统第二课】嵌入式系统的概述(二)——外围设备、处理器、ARM、操作系统

上一课&#xff1a; 【小黑嵌入式系统第一课】嵌入式系统的概述&#xff08;一&#xff09;——概念、特点、发展、应用 下一课&#xff1a; 【小黑嵌入式系统第三课】嵌入式系统硬件平台&#xff08;一&#xff09;——概述、总线、存储设备&#xff08;RAM&ROM&FLASH…

优思学院|新版ISO9001:2015质量体系的优势(一)高阶结构

在全球商业环境中&#xff0c;不断提高产品和服务的质量至关重要。因此&#xff0c;国际标准组织&#xff08;ISO&#xff09;于2015年发布了更新的ISO 9001标准&#xff0c;即ISO 9001:2015质量体系标准。这一更新旨在适应不断变化的商业需求和挑战&#xff0c;为组织提供更强…

母婴行业数字化发展趋势:内容多元化、服务定制化、人群全覆盖

母婴行业数字化发展趋势&#xff1a;内容多元化、服务定制化、人群全覆盖 引言&#xff1a;时代的高速发展&#xff0c;在经济压力、生活节奏、婚育观念等多重因素的影响下&#xff0c;我国人口出生率自2016年&#xff08;人口出生数量统计1883万&#xff09;到2022年&#xf…

nn.Embedding()的原理

nn.Embedding()的原理&#xff1a; 定义一个Embedding&#xff1a; embeddings nn.Embedding(num_embeddings10, embedding_dim3)vocab_size : 10 输出维度为&#xff1a; 3 假定输入inputs如下&#xff1a; inputs torch.tensor([[1,3,6, 8],[9,1,3,5] ],dtypetorch.lo…

zabbix基本介绍 安装部署 页面访问

这里写目录标题 一、zabbix 监控1、zabbix 监控架构2、zabbix 监控报警渠道3、Zabbix 优点4、Zabbix 缺点5、Zabbix 监控系统监控对象6、Zabbix监控方式7、zabbix 架构1、Server2、数据库存储3、Web界面4、Proxy 代理服务器5、Agent监控代理6、数据流 8、Zabbix常用术语的含义1…

『Linux升级路』基本指令

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;Linux &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、认识操作系统 &#x1f4d2;1.1什么是操作系统 &#x1f4d2;1.2操作系统…

基于ssm的高校共享单车管理系统(有报告)。Javaee项目,ssm项目。

演示视频&#xff1a; 基于ssm的高校共享单车管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm项目。 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 项目介绍&…

torch_cluster、torch_scatter、torch_sparse三个包的安装

涉及到下面几个包安装的时候经常会出现问题&#xff0c;这里我使用先下载然后再安装的办法&#xff1a; pip install torch_cluster pip install torch_scatter pip install torch_sparse 1、选择你对应的torch版本&#xff1a;https://data.pyg.org/whl/ 2、点进去然后&…

智慧工地AI视频管理平台源码

智慧工地是指以物联网、移动互联网技术为基础&#xff0c;充分应用人工智能等信息技术&#xff0c;通过AI赋能建筑行业&#xff0c;对住建项目内人员、车辆、安全、设备、材料等进行智能化管理&#xff0c;实现工地现场生产作业协调、智能处理和科学管理。智慧工地的核心是以一…

HBase中的数据表是如何用CHAT进行分区的?

问CHA&#xff1a;HBase中的数据表是如何进行分区的&#xff1f; CHAT回复&#xff1a; 在HBase中&#xff0c;数据表是水平分区的。每一个分区被称为一个region。当一个region达到给定的大小限制时&#xff0c;它会被分裂成两个新的region。 因此&#xff0c;随着数据量的增…

[C++]:8.C++ STL引入+string(介绍)

C STL引入string(介绍&#xff09; 一.STL引入&#xff1a;1.什么是STL2.什么是STL的版本&#xff1a;2-1&#xff1a;原始版本&#xff1a;2-2&#xff1a;P. J 版本&#xff1a;2-3&#xff1a;RW 版本&#xff1a;2-4&#xff1a;SGL版本&#xff1a; 3.STL 的六大组件&…

并发编程之生产者消费者模型

什么是生产者消费者模型 生产者消费者模型是多线程中一个比较典型的模型。 打个比方&#xff1a;你是一个客户&#xff0c;你去超市里买火腿肠。 这段话中的 "你"就是消费者&#xff0c; 那么给超市提供火腿肠的供货商就是生产者。超市呢&#xff1f;超市是不是被…

php连接sqlserver 安装sqlserver 驱动windows系统

第一步下载Windows 上的 Microsoft ODBC Driver for SQL Server ODBC 驱动程序 Microsoft ODBC Driver for SQL Server 直接下载安装即可&#xff0c;安装后可查看安装版本 第二步&#xff1a;下载php_sqlsrv 驱动 安装解压后&#xff0c;会有对应php版本的驱动文件&#xf…

草图一键生成静态网页,看看这个开源项目

借助GPT-4V视觉模型&#xff0c;可以轻松的将一张草图生成一个静态页面。现在这已经不是什么稀奇事了。主要是分享一下它的Prompt&#xff0c;很简单&#xff0c;用户画好草图后&#xff0c;将草图保存成png图片&#xff0c;传给GPT-4V&#xff0c;然后GPT返回一个标准的HTML&a…

Navicat for mysql 无法连接到虚拟机的linux系统下的mysql

原创/朱季谦 最近在linux Centos7版本的虚拟机上安装了一个MySql数据库&#xff0c;发现本地可以正常ping通虚拟机&#xff0c;但Navicat则无法正常连接到虚拟机里的MySql数据库&#xff0c;经过一番琢磨&#xff0c;发现解决这个问题的方式&#xff0c;很简单&#xff0c;总共…

9.MyBatis-Plus

1、前期准备 a. 创建数据库 CREATE TABLE USER (id BIGINT(20)NOT NULL COMMENT 主键ID,NAME VARCHAR(30)NULL DEFAULT NULL COMMENT 姓名,age INT(11)NULL DEFAULT NULL COMMENT 年龄,email VARCHAR(50)NULL DEFAULT NULL COMMENT 邮箱,PRIMARY KEY (id) );INSERT INTO user…