【JSON2WEB】08 Amis的事件和校验

news2024/12/23 18:15:19

CRUD操作中,新增、编辑、删除数据后要同步刷新列表,这个可以用Amis的事件来实现。

1 新增数据后刷新列表

Step 1 找到【新增数据】弹窗的【提交】按钮

在这里插入图片描述

Step 2 添加鼠标点击事件

在这里插入图片描述
这里的 组件ID:u:13d67a44214e 为表格2的组件ID,
在这里插入图片描述

Setp 3 定义了重新请求数据的提交按钮

代码如下:

{
  "type": "button",
  "actionType": "submit",
  "label": "提交",
  "primary": true,
  "id": "u:7aeaadd96eec",
  "onEvent": {
    "click": {
      "weight": 0,
      "actions": [
        {
          "componentId": "u:13d67a44214e",
          "actionType": "reload"
        }
      ]
    }
  }
}

在这里插入图片描述

Step 4 Reload 组件ID

回到新增数据的弹框,在body项下增加:

"reload": "u:13d67a44214e"

这是的 u:13d67a44214e 为表格2的组件ID。
在这里插入图片描述

Step 5 预览演示

在这里插入图片描述
新增以上数据,并提交,表格自动重新加载了数据如下:

在这里插入图片描述

2 编辑数据后刷新列表

编辑数据和新增数据操作类似,也是找到提交按钮,新增【重新请求数据】,reload即可。
在这里插入图片描述
在这里插入图片描述

3 删除数据后刷新列表

Step 1 表格2 的行内【删除】按钮增加重新请求数据事件

在这里插入图片描述
要刷新的目标组件和删除按钮在同已页面,直接选目标组件即可,编辑器自动匹配组件ID,在同一个页面也不需要reload
在这里插入图片描述

4 必填校验

Step 1 选中表单的一个数据项

属性-校验-必填项打开即可,标题会出现红的*标记。
在这里插入图片描述

Step 2 必填检验演示

提交时检验
在这里插入图片描述
另外还有预定义的格式校验
文本校验:邮箱格式、Url格式、字母、字母和数字、固定长度、手机号码、电话号码、邮编号码、身份证号码、JSON格式
数字校验:数字、整型数字、浮点型数字、最大值、最小值
其它校验:与指定值相同、与指定字段值相同
还支持自定义正则校验。

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

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

相关文章

2024常用开源测试开发工具!

今天为大家奉献一篇测试开发工具集锦干货。在本篇文章中,将给大家推荐几款日常工作中经常用到的测试开发工具神器,涵盖了自动化测试、性能压测、流量复制、混沌测试、造数据等。 1、AutoMeter-API 自动化测试平台 AutoMeter 是一款针对分布式服务&…

MySQL 8.0.35 企业版安装和启用TDE插件keyring_encrypted_file

本文主要记录MySQL企业版TDE插件keyring_encrypted_file的安装和使用。 TDE说明 TDE( Transparent Data Encryption,透明数据加密) 指的是无需修改应用就可以实现数据的加解密,在数据写磁盘的时候加密,读的时候自动解密。加密后其他人即使能够访问数据库…

Vue-03

Vue指令 v-bind 作用:动态设置html的标签属性(src url title…) 语法:v-bind:属性名"表达式" 举例代码如下: 实现效果如下: 案例:图片切换 实现代码如下: 实现的效果…

#WEB前端(CCS常用属性,补充span、div)

1.实验: 复合元素、行内元素、块内元素、行内块元素 2.IDE:VSCODE 3.记录: span为行内元素:不可设置宽高,实际占用控件决定分布空间。 div为块内元素:占满整行,可以设置宽高 img为行内块元…

新手想玩硬件,买单片机还是树莓派好?

新手想玩硬件,买单片机还是树莓派好? 在开始前我有一些资料,是我根据网友给的问题精心整理了一份「单片机的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家&#x…

单链表的排序-力扣算法题

文章目录 概要例题解题思路:1、递归分割2、递归排序实际的含义3、递归回溯与合并 case解析:1、初始链表:2、第一轮分割:3、继续分割:有序子链表合并:最终合并:结果: 代码实现总结&am…

JavaScript继承 寄生组合式继承 extends

JavaScript继承 1、JS 的继承到底有多少种实现方式呢? 2、ES6 的 extends 关键字是用哪种继承方式实现的呢? 继承种类 原型链继承 function Parent1() {this.name parentlthis.play [1, 2, 3] }function Child1() {this.type child2 }Child1.prototype new Parent1(…

(十)SpringCloud系列——openfeign的高级特性实战内容介绍

前言 本节内容主要介绍一下SpringCloud组件中微服务调用组件openfeign的一些高级特性的用法以及一些常用的开发配置,如openfeign的超时控制配置、openfeign的重试机制配置、openfeign集成高级的http客户端、openfeign的请求与响应压缩功能,以及如何开启…

bashplotlib,一个有趣的 Python 数据可视化图形库

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站AI学习网站。 目录 前言 什么是Bashplotlib库? 安装Bashplotlib库 使用Bashplotlib库 Bashplotlib库的功能特性 1. 绘…

Linux速览(1)——基础指令篇

在上一章对Linux有了一些基础了解之后,本章我们来学习一下Linux系统下一些基本操作的常用的基础指令。 目录 1. ls 指令 2. pwd&&whoami命令 3. cd 指令 4. touch指令 5.mkdir指令(重要): 6.rmdir指令 && …

pandas行列求众数及按列去重

创建示例数据框如下: df2pd.DataFrame(data{A:[1,2,3,3,4,4,4,4],B:[a,b,c,c,d,d,d,d],C:[11,22,33,33,44,44,44,44],D:[11,22,33,33,44,44,44,44]}) print(df2.mode()) #求列众数 print(df2.loc[:,[A,C,D]].mode(axis1)) #求特定列的行众数 df2.drop_duplicates(s…

记一次:android学习笔记一(学习目录-不要看无内容)

学习目录如下 B站学习的名称--Android开发从入门到精通(项目案例版) 网址:https://www.bilibili.com/video/BV1jW411375J/ 第0章:安装 android stoid 参考地址https://blog.csdn.net/adminstate/article/details/130542368 第一章:第一个安卓应用 第二章:用户界面设…

类和对象基础知识

1. C和C语言最大的区别 以洗衣服为例, C语言是手洗,你需要对每一个过程非常的清楚,一步一步都需要自己亲自去完成, 而C更像是机洗,整个过程划分为人、衣服、洗衣粉、洗衣机四个对象的交互过程, 而人是不…

C语言指针的初步认识--学习笔记(2)

1.数组名的理解 我们在使⽤指针访问数组的内容时,有这样的代码: int arr[10]{1,2,3,4,5,6,7,8,9,10}; int* p&arr[0]; 这⾥我们使⽤ &arr[0] 的⽅式拿到了数组第⼀个元素的地址,但是其实数组名本来就是地址,⽽且 是数组…

React 事件机制原理

相关问题 React 合成事件与原生 DOM 事件的区别React 如何注册和触发事件React 事件如何解决浏览器兼容问题 回答关键点 React 的事件处理机制可以分为两个阶段:初始化渲染时在 root 节点上注册原生事件;原生事件触发时模拟捕获、目标和冒泡阶段派发合…

羊大师揭秘羊奶与健康,美味的保健佳品

羊大师揭秘羊奶与健康,美味的保健佳品 羊奶确实是一种美味且健康的保健佳品,其独特的营养成分和风味使其成为许多人的健康选择。以下是一些羊奶与健康的关系: 营养丰富:羊奶含有丰富的蛋白质、脂肪、矿物质和维生素,…

Go字符串实战操作大全!

目录 1. 引言文章结构概览 2. Go字符串基础字符串的定义与特性什么是字符串?Go字符串的不可变性原则 字符串的数据结构Go字符串的内部表达byte和rune的简介 3. 字符串操作与应用3.1 操作与应用字符串连接字符串切片字符串查找字符串比较字符串的替换字符串的大小写转…

【动态规划专栏】

动态规划基础知识 概念 动态规划(Dynamic Programming,DP):用来解决最优化问题的算法思想。 动态规划是分治思想的延伸,通俗一点来说就是大事化小,小事化无的艺术。 一般来说,…

Android 开发环境搭建的步骤

本文将为您详细讲解 Android 开发环境搭建的步骤。搭建 Android 开发环境需要准备一些软件和工具,以下是一些基础步骤: 1. 安装 Java Development Kit (JDK) 首先,您需要安装 Java Development Kit (JDK)。JDK 是 Android 开发的基础&#xf…

教师的调动谁有决定权

当你身边的老师突然“消失”,在另一所学校出现,你是否好奇过,这背后的调动是如何发生的?谁又是这场“迁徙”背后的决定者? 很多人可能首先想到的是校长。毕竟,在学校里,校长似乎是那个“发号施令…