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

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.mzph.cn/news/149275.shtml

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

相关文章

性能压力测试的优势与重要性

性能压力测试是软件开发过程中至关重要的一环,它通过模拟系统在极限条件下的运行,以评估系统在正常和异常负载下的表现。这种测试为确保软件系统的可靠性、稳定性和可伸缩性提供了关键信息。下面将探讨性能压力测试的优势以及为什么在软件开发中它具有不…

传输层协议 - UDP(User Datagrm Protocol)

文章目录: 传输层再谈端口号端口号划分知名端口号(Well-Know Port Number)netstat 命令iostat 命令pidof UDP 协议UDP 协议格式UDP 协议的特点面向数据报UDP 的缓冲区UDP 使用注意事项UDP 协议的应用基于 UDP 的应用层协议 在 DDoS 攻击中如何…

2023年中国吞咽神经和肌肉电刺激仪市场发展趋势分析:产品需求持续增长[图]

吞咽神经和肌肉电刺激仪是通过输出特定的低频脉冲电流对吞咽及构音功能相关的神经和肌肉进行电刺激,改善吞咽、构音肌群的收缩运动功能,缓解神经元麻痹,促进吞咽反射弧的重建与恢复,进而提高患者的吞咽及语言能力。 吞咽神经和肌…

医院陪诊服务预约小程序的作用如何

对陪诊服务提供者及需求者来说,平台很重要,对服务提供者而言,通过微信私信/电话联系的形式很容易出现漏服务的情况,如遇需求者内容/地址/联系方式/哪家医院等信息提供不清或临时改变主意等,非常烦恼,同时各…

【带头学C++】----- 七、链表 ---- 7.5 学生管理系统(链表--上)

目录 1.main函数设计 2.定义Node节点类型 3.链表插入结点 在main函数中调用插入函数、打印函数 插入结点函数实现(头插法) 插入结点函数实现(尾插法) 遍历链表函数实现 4.演示插入、遍历结果 目录 1.main函数设计 2.定义…

nvm 安装后出现的各种问题解决方法

1、nvm安装后无法安装node版本 首先需要确定删除了电脑上所有的node版本,如果不会卸载那么请移步到 查看 ,我们是要通过nvm来下载node环境,所以之前下载的node有冲突,所以都要清除。 2、下载后的nvm环境,无法使用node、…

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

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

团结引擎已全面支持 OpenHarmony 操作系统

Unity 中国宣布与开放原子开源基金会达成平台级战略合作。 据称团结引擎已全面支持 OpenHarmony 操作系统,同时将为 OpenHarmony 生态快速带来更多高品质游戏与实时 3D 内容。Unity 称现在用户可以 “在 OpenHarmony 框架中感受到与安卓和 iOS 同样丝滑的游戏体验”…

SQL 文本函数

前言 SQL文本函数是SQL语言中非常有用的一类函数,它们用于处理和操作字符串数据。在实际应用中,我们经常需要对数据库中的文本数据进行各种操作,比如提取子串、替换子串、拼接字符串等等。而SQL文本函数可以帮助我们轻松地完成这些任务&#…

Modbus转Profinet网关在金银精炼控制系统中应用案例

金银精炼控制系统中采用Modbus转Profinet网关(XD-MDPN100)连接1200plc与PID控制阀门进行通讯,通过控制PID阀门的大小来实现温度的恒温控制。这一系统的好处在于它能够提高金银精炼过程的效率和精确度。PID控制阀门可以根据温度的变化实时调整…

Michael Jordan最新报告:去中心化机器学习中的契约、不确定性和激励

‍ ‍导读 11月3日,智源研究院学术顾问委员会委员、机器学习泰斗Michael Jordan在以“新一代人工智能前沿”为主题的2023北京论坛 新工科专题论坛上,发表了题为Contracts, Uncertainty, and Incentives in Decentralized Machine Learning(去…

一步一步教你如何在Windows 10上使用Java,包括下载、安装和配置等

Java开发工具包(JDK)是用于Java编程的软件,与Java虚拟机(JVM)和Java运行时环境(JRE)一起使用。JDK包括编译器和类库,允许开发人员创建可由JVM和JRE执行的Java程序。 在本教程中,你将学习在Windows上安装Java开发工具包。 检查是否安装了Java 在安装Java开发工具包之…

01_SHELL编程之变量定义(一)

SHELL编程 该课程主要包括以下内容: ① Shell的基本语法结构 如:变量定义、条件判断、循环语句(for、until、while)、分支语句、函数和数组等; ② 基本正则表达式的运用; ③ 文件处理三剑客:grep、sed、awk工具的使用&…

阿里云oss使用签名url上传时的一些配置注意事项

我来讲一下测试下来遇到的问题点和解决方案: 一、配置相关问题 你可以先按照阿里云的文档把一些oss的基本配置弄好,再看下面的内容; 配置跨域访问规则; 这是非常重要的一步。默认情况下,oss不允许上传文件时携带Cont…

什么是NoSQL?什么是redis?redis是做什么的?

redis官网 NoSQL泛指非关系型数据库,redis是其中的一种,Redis是发展最快的。 什么是NoSQL? NoSQL是一个广义的术语,指的是非关系型数据库,不同于传统的关系型数据库(如MySQL、Oracle等)。它没有…

数字化转型具体包含哪些内容?

数字化转型是一个广泛且多方面的过程,涉及将数字技术集成到组织或企业的各个方面,从根本上改变其运营和交付价值的方式。它包含广泛的活动、战略和举措,这些活动、战略和举措可能会根据组织的具体目标和需求而有所不同。以下是数字化转型的一…

html-网站菜单-点击菜单展开相应的导航栏,加减号可切换

一、效果图 1.点击显示菜单栏&#xff0c;点击x号关闭&#xff1b; 2.点击一级菜单&#xff0c;展开显示二级&#xff0c;并且加号变为减号&#xff1b; 3.点击其他一级导航&#xff0c;自动收起展开的导航。 二、代码实现 <!DOCTYPE html> <html><head>&…

SIMULIA|Abaqus 2022x新功能介绍第三弹

Abaqus 线性分析的功能增强 模态分析中增加connector单元的输出 模态线性动力学分析中增加下列Connector单元的输出&#xff0c;无需指定* connector MOTION即可实现&#xff1a;AXIAL&#xff0c;BUSHING&#xff0c;CARDAN&#xff0c;CARTESIAN和ROTATION。 而且改进了CT…

智能货柜:无人零售行业的新宠

智能货柜&#xff1a;无人零售行业的新宠 与早期的传统自动售货机相比&#xff0c;智能货柜的投放场景正呈现多样化的趋势。除了人流密集的公共场所&#xff0c;一些办公室、健身房等室内场景也成为商家争相争夺的热门位置。 其次&#xff0c;在无人零售行业中&#xff0c;许多…

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

一、多线程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 …