FastAdmin表格顶部增加toolbar按钮

news2025/1/21 15:27:25

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

表格对应的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;
                        }
                    }
                });
            },

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用 Gradle 命令了解项目构建信息

引言 首先&#xff0c;Gradle 作为使用 Android Studio 开发 Android 项目的默认构建工具&#xff0c;它里面的任何东西都基于两个概念&#xff1a; projects ( 项目 )tasks ( 任务 ) 每一个构建由一个或多个 projects 构成&#xff0c;每一个 project 由一个或多个 tasks 构…

基于象群算法优化概率神经网络PNN的分类预测 - 附代码

基于象群算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于象群算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于象群优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络的光滑…

IDEA写mybatis程序,java.io.IOException:Could not find resource mybatis-config.xml

找不到mybatis-config.xml 尝试maven idea:module&#xff0c;不是模块构造问题 尝试检验pom.xml&#xff0c;在编译模块添加了解析resources内容依旧不行 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.or…

微服务和Spring Cloud Alibaba介绍

1、微服务介绍 1.1 系统架构演变 随着互联网的发展&#xff0c;网站应用的规模也在不断的扩大&#xff0c;进而导致系统架构也在不断的进行变化。从互联网早起到现在&#xff0c;系统架构大体经历了下面几个过程: 单体应用架构 —> 垂直应用架构 —> 分布 式架构—>…

springboot集成xxl-job详解

文章目录 springboot集成xxl-job详解1、springboot集成xxl-job&#xff1a;&#xff08;1&#xff09;pom文件里引入xxl-job依赖&#xff08;2&#xff09;application.properties配置文件&#xff1a;&#xff08;3&#xff09;在你的项目里新建文件结构如下&#xff1a;XxlJo…

Pinia 及其数据持久化 Vue新一代状态管理插件

黑马前端Vue新一代状态管理插件Pinia快速入门视频教程 Pinia主页 超级简单&#xff0c;不需要耐心 pinia &#xff1a;新一代的VueX 1. 安装 npm install pinia2. 在main.js中引入 import { createPinia } from pinia app.use(createPinia())3. 新建stores目录&#xff0c…

锐捷EG易网关login.php以及其后台cli.php/branch_passw.php RCE漏洞复现 [附POC]

文章目录 锐捷EG易网关login.php以及其后台cli.php/branch_passw.php远程代码执行漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 锐捷EG易网关login.php以及其后台cli.php/branch_passw.php远程代码执行漏洞复…

盘点一款制作电子杂志的网站,小白也能快速上手

随着科技的进步&#xff0c;电子宣传册已经成为了企业宣传和推广的重要工具之一。它们不仅易于制作和更新&#xff0c;而且可以轻松地在网络上传播&#xff0c;让更多的人了解您的品牌和产品。 现在&#xff0c;给大家推荐一款FLBOOK在线制作电子杂志平台。无需任何专业的设计技…

信创之路数据库人大金仓篇

概要 信创大势所趋&#xff0c;吾等上下求索 参考文档 Linux&#xff1a;人大金仓数据库-KingBaseES V8与 php7的连接配置 laravel9适配人大金仓&#xff08;kingbase&#xff09;数据库 thinkphp6适配人大金仓&#xff08;Kingbase&#xff09;数据库 数据库选型 目前比较…

解决网络编程中的EOF违反协议问题:requests库与SSL错误案例分析

1. 问题背景 近期&#xff0c;一个用户在使用requests库进行网络编程时遭遇到了一个不寻常的问题&#xff0c;涉及SSL错误&#xff0c;并提示错误消息为SSLError(SSLEOFError(8, uEOF occurred in violation of protocol (_ssl.c:661)),))。该用户表示已经采取了多种方法来解决…

防范Java多线程陷阱:探秘ABA问题的起因及解决之道!

一、概念 CAS&#xff08;Compare and Swap&#xff09;是一种乐观锁机制&#xff0c;它是一种基于硬件指令实现的原子操作&#xff0c;可以在不使用传统互斥锁的情况下&#xff0c;保证多线程对共享变量的安全访问。在Java中&#xff0c;我们可以使用Atomic类和AtomicReferenc…

微服务架构演进

系统架构演变 没有最好的架构&#xff0c;只有最合适的架构&#xff1b;架构发展过程&#xff1a;单体架构》垂直架构》SOA 面向服务架构》微服务架构&#xff1b;推荐看看《淘宝技术这十年》&#xff1b; 单体架构 互联网早期&#xff0c;一般的网站应用流量较小&#xff0…

PDF处理控件Aspose.PDF功能演示:使用C#查找和替换PDF文件中的文本

使用“查找并替换”选项可以一次性替换文档中的特定文本。这样&#xff0c;您不必手动定位和更新整个文档中每次出现的文本。本文甚至更进一步&#xff0c;介绍了如何在PDF文档中自动查找和替换文本功能。特别是&#xff0c;将学习如何使用C&#xff03;在整个PDF&#xff0c;特…

此芯科技加入绿色计算产业联盟,参编绿色计算产业发展白皮书

近日&#xff0c;此芯科技正式加入绿色计算产业联盟&#xff08;Green Computing Consortium&#xff0c;简称GCC&#xff09;&#xff0c;以Arm架构通用智能CPU芯片及高能效的Arm PC计算解决方案加速构建软硬协同的绿色计算生态体系&#xff0c;推动绿色计算产业加速发展。 继…

Ubuntu 20.04 LTS ffmpeg gif mp4 互转 许编译安装ffmpeg ;解决gif转mp4转换后无法播放问题

安装ffmpeg apt install ffmpeg -y gif转mp4 ffmpeg -f gif -i ldh.gif ldh.mp4 故障&#xff1a;生成没报错&#xff0c;但mp4无法播放&#xff0c;体积也不正常 尝试编译安装最新版 sudo apt install -y yasm axel -n 100 https://ffmpeg.org/releases/ffmpeg-6.0.1.tar.x…

【k8s集群搭建(二):基于虚拟机的linux的k8s集群搭建_超详细_可视化界面Dashboard安装_记录全过程踩坑记录及解决方法】

在 master 执行 # 根据 在线配置文件 创建资源 kubectl apply -f https://raw.githubusercontent.com/kubernetes/dashboard/v2.3.1/aio/deploy/recommended.yaml设置访问端口 # 修改配置文件 找到 type&#xff0c;将 ClusterIP 改成 NodePort kubectl edit svc kubernetes-…

QML20、布局

1.概述 首先,QML同样允许大家使用硬编码的方式将位置数值直接写到代码中,但是这样做首先难以适应UI的调整,其次代码维护起来也很困难。因此不推荐这样做。推荐大家使用的是以下三种布局管理器:Row,、Column、Grid、Flow,以及使用Anchor进行布局。 2.Row QML 中的 Row 元素…

JS-项目实战-鼠标悬浮变手势(鼠标放单价上生效)

1、鼠标悬浮和离开事件.js //当页面加载完成后执行后面的匿名函数 window.onload function () {//get:获取 Element:元素 By:通过...方式//getElementById()根据id值获取某元素let fruitTbl document.getElementById("fruit_tbl");//table.rows:获取这个表格…

如何录制视频课程?打造高品质在线教学!

在线教学和知识分享已经成为一种新型的教育模式&#xff0c;录制视频课程成为了许多教师、教育培训机构以及知识分享爱好者的首选。可是如何录制视频课程呢&#xff1f;本文将介绍两种录制视频课程的方法&#xff0c;并对其进行分步骤详细说明&#xff0c;以帮助您轻松创建令人…

手写LASSO回归python实现

import numpy as np from matplotlib.font_manager import FontProperties from sklearn.datasets import make_regression from sklearn.model_selection import train_test_split import matplotlib.pyplot as pltclass Lasso():def __init__(self):pass# 数据准备def prepar…