buildadmin+tp8表格操作(7)表格的事件监听

news2024/11/13 14:37:57

buildadmin 中的事件都已经在 baTable类中定义好了。我们一般不会去修改,万一我们要在事件上有所操作, 我们可以通过事件的 前置和后置 钩子函数来处理
在这里插入图片描述
在这里插入图片描述
那么我们是如何使用这些钩子呢?
我们只需要在 创建对象的时候,定义好这些钩子就可以了。如下例中, baTable类 创建对象的进候,就添加了相应的 before after 钩子

const baTable = new baTableClass(
    new baTableApi('/admin/examples.table.Event/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('examples.table.event.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
            {
                label: t('examples.table.event.string'),
                prop: 'string',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                operator: 'LIKE',
                sortable: false,
            },
            {
                label: t('examples.table.event.switch'),
                prop: 'switch',
                align: 'center',
                render: 'switch',
                operator: 'eq',
                sortable: false,
                replaceValue: { '0': t('examples.table.event.switch 0'), '1': t('examples.table.event.switch 1') },
            },
            { label: t('examples.table.event.datetime'), prop: 'datetime', align: 'center', operator: 'eq', sortable: 'custom', width: 160 },
            {
                label: t('examples.table.event.create_time'),
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                operator: 'RANGE',
                sortable: 'custom',
                width: 160,
                timeFormat: 'yyyy-mm-dd hh:MM:ss',
            },
            { label: t('Operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined, 'switch'],
    },
    {
        defaultItems: { switch: '1', datetime: null },
    },
    {
        // 示例核心代码(1/2)
        // 操作前置钩子,return false 可取消原操作
        getIndex() {
            console.info('%c-------获取表格数据前置--------', 'color:blue')
        },
        postDel({ ids }) {
            console.info('%c-------请求删除前置--------', 'color:blue')
            console.log('被删除数据', ids)
        },
        requestEdit({ id }) {
            console.info('%c-------请求编辑前置--------', 'color:blue')
            console.log('被编辑数据', id)
        },
        onTableDblclick({ row, column }) {
            console.info('%c-------双击了单元格,双击具体操作执行前置--------', 'color:blue')
            console.log('双击携带了数据', row, column)
        },
        toggleForm({ operate, operateIds }) {
            console.info('%c-------表单切换前置--------', 'color:blue')
            console.log('表单切换携带了数据', operate, operateIds)
        },
        onSubmit({ formEl, operate, items }) {
            console.info('%c-------表单提交前置(尚未请求提交)--------', 'color:blue')
            console.log('表单提交前携带了数据,您可以在此对数据进行预处理', formEl, operate, items)
        },
        onTableAction({ event, data }) {
            console.info('%c-------表格内部事件 - 前置--------', 'color:blue')
            console.log('触发的事件和携带的数据为', event, data)
        },
        onTableHeaderAction({ event, data }) {
            console.info('%c-------表头事件 - 前置--------', 'color:blue')
            console.log('触发的事件和携带的数据为', event, data)
        },
        mount() {
            console.info('%c-------表格初始化前置--------', 'color:blue')
        },
    },
    {
        // 示例核心代码(2/2)
        getIndex({ res }) {
            console.info('%c-------获取表格数据后置--------', 'color:green')
            console.log('获取数据请求的响应', res)
        },
        postDel({ res }) {
            console.info('%c-------请求删除后置--------', 'color:green')
            console.log('删除请求的响应', res)
        },
        requestEdit({ res }) {
            console.info('%c-------请求编辑后置--------', 'color:green')
            console.log('编辑请求的响应', res)
        },
        onTableDblclick({ row, column }) {
            console.info('%c-------双击了单元格,双击具体操作执行后置--------', 'color:green')
            console.log('双击携带了数据', row, column)
        },
        toggleForm({ operate, operateIds }) {
            console.info('%c-------表单切换后置--------', 'color:green')
            console.log('表单切换携带了数据', operate, operateIds)
        },
        onSubmit({ res }) {
            console.info('%c-------表单提交后置(已经发送请求)--------', 'color:green')
            console.log('表单提交请求的响应', res)
        },
        onTableAction({ event, data }) {
            console.info('%c-------表格内部事件 - 后置--------', 'color:green')
            console.log('触发的事件和携带的数据为', event, data)
        },
        onTableHeaderAction({ event, data }) {
            console.info('%c-------表头事件 - 后置--------', 'color:green')
            console.log('触发的事件和携带的数据为', event, data)
        },
    }
)

通过以上的钩子,就可以响应自定义的事件处理了

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

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

相关文章

二进制部署k8s集群-过程中的问题总结(接上篇的部署)

1、kube-apiserver部署过程中的问题 kube-apiserver.conf配置文件更改 2、calico的下载地址 curl https://docs.projectcalico.org/v3.20/manifests/calico.yaml -O 这里如果kubernetes的节点服务器为多网卡配置会产生报错 修改calino.yaml配置文件 解决方法: 调…

YB506AB是一款理电池充、放电管理专用芯片,集成锂电池充电管理和降压DC-DC电路。

YB506AB 锂电转可充电AA/AAA电池专用SOC芯片 概述: YB506AB是一款理电池充、放电管理专用芯片,集成锂电池充电管理和降压DC-DC电路。充电过程满足锂电池三段式滑流/恒流/恒压充电规范,B506内部的线性充电电路采用了恒流可配置模式,可以通过…

概念解析 | 光电神经网络:optoelectronic neural network

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:光电神经网络。 概念解析 | 光电神经网络的原理、挑战与未来 1. 背景介绍 在过去的十年中,深度学习和神经网络在许多领域取得了显著的成就,如图像识别、自然语言处理、医疗…

如何快速将txt类型的日志文件转换为excel表格并进行数据分析报表统计图(如:饼图、折线图、柱状图)?

打开excel创建空白文档 选择一个txt文件 一动下面箭头↑竖线,可以拖拽左右调整要判断转换为一列的数据宽度 根据情况设置不同列的数据格式(每一列可以点击),设置好后点击【完成】 设置单元格数据格式 手动插入第一行为每列数据的…

没收到Win11 23H2正式版的推送怎么升级到23H2

没收到Win11 23H2正式版的推送怎么升级到23H2?用户反映自己没有收到Win11 23H2正式版的更新推送,又想升级为23H2版本。接下来小编给大家详细介绍不同的升级方法,帮助更多的用户完成Win11 23H2系统的更新,升级后就能体验到Win11 23…

【C++】pow函数实现的伽马变换详解和示例

本文通过原理和示例对伽马变换进行详解,并通过改变变换系数展示不同的效果,以帮助大家理解和使用。 原理 伽马变换是一种用于图像增强的技术,它可以用来提高或降低图像的对比度,常用于医学图像处理和计算机视觉等领域。伽马变换…

3D建模基础教程:编辑多边形功能命令快捷方式

一、打开3D软件并创建新模型 首先,打开你的3D建模软件,比如Blender、Maya或3ds Max。然后,创建一个新的3D模型。你可以使用基本几何体来创建模型,也可以导入现有的模型。 二、进入编辑多边形模式 在主工具栏中,找到并…

《深入浅出OCR》实战:基于PGNet的端到端识别

✨专栏介绍: 经过几个月的精心筹备,本作者推出全新系列《深入浅出OCR》专栏,对标最全OCR教程,具体章节如导图所示,将分别从OCR技术发展、方向、概念、算法、论文、数据集等各种角度展开详细介绍。 💙个人主页: GoAI |💚 公众号: GoAI的学习小屋 | 💛交流群: 7049325…

[一周AI简讯]OpenAI宫斗;微软Bing Chat更名Copilot;Youtube测试音乐AI

OpenAI宫斗,奥特曼被解雇,董事会内讧 Sam Altman被解雇,不再担任CEO,董事会的理由是奥特曼在与董事会的沟通中始终不坦诚,阻碍了董事会履行职责的能力。原首席技术官Mira Murati担任新CEO。OpenAI宫斗剧远未结束&…

C语言-求一个整数储存在内存中的二进制中1的个数

#define _CRT_SECURE_NO_WARNINGS #include<stdio.h>int main() {/*求一个整数储存在内存中的二进制中1的个数*/int number;scanf("%d", &number);int i 0;int count 0;for (i 0; i < 32; i){if (1 ((number >> i) & 1)){count;}}printf(…

游戏服务器怎么挑选细节与技巧深度解析

随着数字娱乐的迅速崛起&#xff0c;游戏不仅成为了全球数亿人的休闲爱好&#xff0c;同时也催生了一系列关于游戏体验优化的需求。游戏服务器作为游戏体验的核心支柱&#xff0c;其性能好坏直接影响到玩家的游戏体验。本文章旨在详细探讨游戏服务器的挑选技巧与注意事项&#…

AWS云服务器EC2实例实现ByConity快速部署

1. 前言 亚马逊是全球最大的在线零售商和云计算服务提供商。AWS云服务器在全球范围内都备受推崇&#xff0c;被众多业内人士誉为“云计算服务的行业标准”。在国内&#xff0c;亚马逊AWS也以其卓越的性能和服务满足了众多用户的需求&#xff0c;拥有着较高的市场份额和竞争力。…

opencv将32位深图片合成视频跳帧解决办法

在合成视频时候&#xff0c;大多数的图片都是24位深度的&#xff08;即RGB三通道&#xff0c;一个通道8位&#xff09;&#xff0c;但是也存在少量的32位深的图片&#xff08;RGBA&#xff0c;三个颜色通道加上A这个透明度通道&#xff09;&#xff0c;32位和24位的格式是不一样…

Docker部署MinIO对象存储服务器结合Cpolar实现远程访问

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 前言1. Docker 部署MinIO2. 本地访问MinIO3. Linux安装Cpolar4. 配置MinIO公网地址5. 远…

.NET8.0 AOT 经验分享 - 专项测试各大 ORM 是否支持

AOT 特点 发布和部署本机 AOT 应用具有以下优势&#xff1a; 最大程度减少磁盘占用空间&#xff1a;使用本机 AOT 发布时&#xff0c;将生成一个可执行文件&#xff0c;其中仅包含支持程序所需的外部依赖项的代码。减小的可执行文件大小可能会导致&#xff1a;较小的容器映像&a…

c题目10:求一维数组中最大元素值及其序号

每日小语 如果有一天&#xff0c;你不再寻找爱情&#xff0c;只是去爱&#xff1b;你不再渴望成功&#xff0c;只是去做&#xff1b;你不再追求空泛的成长&#xff0c;只是开始修养自己的性情&#xff1b;你的人生才真正开始。——纪伯伦 自己敲写 这个问题老师上课讲了&…

系列六、多线程集合不安全

一、多线程List集合不安全 1.1、List集合不安全案例代码 /*** Author : 一叶浮萍归大海* Date: 2023/11/20 12:38* Description: 多线层环境下List集合不安全案例代码*/ public class NotSafeListMainApp {public static void main(String[] args) {List<String> list …

Vue网页中使用PDF.js弹窗显示pdf文档所有内容

本文中使用的PDF.js组件版本为3.11.174&#xff08;最新版使用上会有所不同&#xff09;&#xff0c;引入文件如下&#xff1a; 首先页面定义一个隐藏的弹窗块&#xff08;此处用ElementUI的Dialog组件&#xff09; <el-dialog ref"dialogPDF" :title"pdffi…

手机数码类展示预约小程序效果如何

对于一家手机数码/电脑品牌来说&#xff0c;研发产品或衍生产品不少&#xff0c;通常会通过线上商城进行售卖。十年以来&#xff0c;流量成本逐渐增加&#xff0c;获客不易也难以寻找到合适的渠道&#xff0c;即使通过广告形式也因缺乏创意而耗时耗力&#xff0c;效果不佳。 同…

【shell】 1、bash语法超详细介绍

文章目录 修改前缀路径dirname set常用函数参数变量local 返回值正则打印第 n 行获取行号核对数据库各表数量jq查询检查日志 sshpassexpect数组xargs bash manual 修改前缀 参考 export PS1"bash> "路径 dirname strip last component from file name dir$(…