amis 联动效果触发的几种方式

联动效果实现主要俩种方式:

1.表达式实现联动,基于组件内或数据链的变量变化的联动

比如: "source": "/amis/api/mock2/options/level2?name=${name} "    (必须是这种字符串拼接形式,在data数据映射中表达式不会触发联动)

所有初始化接口链接上使用数据映射获取参数的形式时,例如下面的query=${query},在当前数据域中,所引用的变量值(即 query)发生变化时,自动重新请求该接口

接口联动一般只适用于初始化接口,例如:

• form组件中的initApi;

• select组件中的source选项源接口url, data只能用于主动联动;

• service组件中的api和schemaApi;

• crud组件中的api;(crud 默认是跟地址栏联动,如果要做请关闭同步地址栏 syncLocation: false)

• 等等...

如果 api 地址中有变量,比如 /api/mock2/sample/${id},amis 就不会自动加上分页参数,需要自己加上,改成 /api/mock2/sample/${id}?page=${page}&perPage=${perPage}

2.平级且会创建新数据域的组件间联动,无法通过引用链获取到的变量需使用此方式

2-1.通过Form的target属性  

  form配置target属性为目标组件name值,可以在触发提交行为后,将当前表单的数据域发送给目标组件(数据域中),并触发刷新重新调查询接口.

有一个表单form组件,还有一个列表组件crud,我们想要把form提交的数据,可以用作crud的查询条件,并请求crud的接口,由于form和crud位于同一层级,因此没法使用数据链的方式进行取值

进行两个调整:

1. 为crud组件设置了name属性为mcrud

2. 为form组件配置了target属性为crud的name:mcrud

更改配置后,提交form表单时,如果有配置提交接口,会先请求提交,之后 amis 会寻找target所配置的目标组件,把form中所提交的数据,发送给该目标组件中,并将该数据合并到目标组件的数据域中,并触发目标组件的刷新操作,对于 CRUD 组件来说,刷新即重新拉取数据接口

2-1.利用target实现inputTree与crud联动效果

(input-tree必须与form结合使用,form数据域里是{input-tree的name:输入值} ,点击input-tree不同选项时就会修改form数据域里的输入值 .       

配置form的target为crud的name, 并配置"submitOnChange": true,form数据域的值变化后触发form的提交行为,提交到配置的target组件中  )  

form配置target属性为目标组件name值,可以在触发提交行为后,将当前表单的数据域发送给目标组件,并触发刷新.

{"type": "page","id": "u:1c2c81063ddc","body": [{"type": "grid","columns": [{"body": [{"type": "form","id": "u:388c62109ac9","target": "mcrud","wrapWithPanel": false,"resetAfterSubmit": false,"debug": false,"submitOnInit": false,"submitOnChange": true,"body": [{"type": "input-tree","name": "modelClass","submitOnChange": true,"selectFirst": true,"source": {"method": "get","url": "/lbserver/api/ModelClass/findOptions","cache": 5000,"adaptor": "return {\n    status: 0,\n    msg: 'ok',\n    data: {\n        options:[\n{\"label\":\"全部分类\",value:\"\"},...payload.data.options\n        ]\n    }\n}","dataType": "json"},"height": "1000px","inline": false,"inputClassName": "h-full","id": "u:c519d9987ae7","multiple": false,"enableNodePath": false,"hideRoot": true,"showIcon": true,"initiallyOpen": true}]}],"id": "u:f32da427bbcd"},{"body": [{"type": "crud","name": "mcrud","api": {"url": "/lbserver/api/PageTemplate","method": "get","replaceData": false,"loadDataOnce": false,"dataType": "json","requestAdaptor": "let modelClass = api.query.modelClass;\r\nlet filter = {\r\n    'limit': api.query.perPage,\r\n    'skip': (api.query.page * api.query.perPage - api.query.perPage),\r\n    where: { modelClass: { like: modelClass || '' } },\r\n}\r\n\r\nlet url = api.url.split(\"?\")[0];\r\nurl = `${url}?filter=${JSON.stringify(filter)}`;\r\napi.url = url;\r\nreturn api;","data": {"&": "$$","modelClass": "${modelClass}"}},"columns": [{"name": "modelClass","label": "模型分类","align": "center","width": 170,"placeholder": "-","id": "u:c9b9842b2ffe","type": "tree-select","quickEdit": {"mode": "inline","type": "select","label": "","name": "modelClass","checkAll": false,"source": {"method": "get","url": "/lbserver/api/ModelClass/findOptions","cache": 5000},"placeholder": "-","size": "sm","submitOnChange": true,"id": "u:2c4985d29548","multiple": false,"disabled": true},"fixed": "","disabled": true},{"name": "name","label": "命名ID","align": "center","width": 280,"id": "u:c9c35d484864","fixed": "","placeholder": "-"},{"label": "页面名称","align": "center","width": 200,"placeholder": "-","id": "u:edb4c2a1d1a4","name": "title"},{"label": "描述信息","name": "desc","width": 280,"type": "text","className": "word-break text-center white-space-pre","fixed": "","inline": false,"toggled": true,"placeholder": "-","id": "u:5fb7eb4c5190","align": "center"}],"messages": {},"syncLocation": false,"perPageAvailable": [10],"defaultParams": {"perPage": "10"},"footerToolbar": [{"type": "bulk-actions"},{"type": "pagination"},{"type": "statistics","tpl": "内容"}],"silentPolling": true,"className": "word-break ","fixed": "right","inline": false,"stopAutoRefreshWhenModalIsOpen": true,"toggled": true,"checkAll": false,"keepItemSelectionOnPageChange": false,"autoFillHeight": false,"id": "u:faeebfd2d01c"}],"id": "u:1a430e75198f"}],"id": "u:36da4c4f7f94"}]
}

2-2.更高级更通用的是借助事件-动作(Event-Action)

比如通过setValue动作,修改另一个同级form表单的数据

动作setValue(组件中传递的参数必须是value, args: {value: {age:17} })

第一个form:

{"type": "form","title": "表单","body": [{"label": "文本框","type": "input-text","name": "text","id": "u:fdd256b622e0"}],"debug": true
}

    第二个form中配置setValue动作:

   "onEvent": {"click": {"actions": [{"componentId": "u:c123bdb1db9e", //方式一:设置到form中"args": {"value": "${event.data}" //此组件数据域(event.data)中数据全部传入.  },"actionType": "setValue"},{"actionType": "custom",//方式二:setValue到input组件,直接value:组件数据即可"script": "\nconsole.log(context.props, event)\ndoAction({\n  actionType: 'setValue', \n  componentId: 'u:fdd256b622e0', \n  args: {value: 17 }\n});\n"}],"weight": 0}}

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

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

相关文章

Docker学习(3):镜像使用

当运行容器时,使用的镜像如果在本地中不存在,docker 就会自动从 docker 镜像仓库中下载,默认是从 Docker Hub 公共镜像源下载。 一、列出镜像列表 可以使用 docker images 来列出本地主机上的镜像。 各个选项说明: REPOSITORY&am…

UDP的报文结构和注意事项

UDP协议是在传输层的协议。 UDP无连接,不可靠传输,面向数据报,全双工。 UDP的报文结构 学习网络协议,最主要的就是报文格式。 对于UDP来说,应用层的数据到达,UDP之后,就会给应用层的数据报前面…

大工作量LUAD代谢重编程模型多组学(J Transl Med)

目录 1,单细胞早期、晚期和转移性 LUAD 的细胞动力学变化 2,细胞代谢重编程介导的LUAD驱动恶性转移的异质性 3,模型构建 S-MMR评分管线构建 4,S-MMR 模型的预后评估 5, 还开发了S-MMR 评分网络工具 6&#xff0c…

从零开始搭建Springboot项目脚手架4:保存操作日志

目的:通过AOP切面,统一记录接口的访问日志 1、加maven依赖 2、 增加日志类RequestLog 3、 配置AOP切面,把请求前的request、返回的response一起记录 package com.template.common.config;import cn.hutool.core.util.ArrayUtil; import cn.hu…

面试八股之JVM篇3.6——垃圾回收——强引用、弱引用、虚引用、软引用

🌈hello,你好鸭,我是Ethan,一名不断学习的码农,很高兴你能来阅读。 ✔️目前博客主要更新Java系列、项目案例、计算机必学四件套等。 🏃人生之义,在于追求,不在成败,勤通…

【机器学习系列】使用高斯贝叶斯模型进行数据分类的完整流程

目录 一、导入数据 二、选择特征 三、十折交叉验证 四、划分训练集和测试集 五、训练高斯贝叶斯模型 六、预测测试集 七、查看训练集和测试集上的分数 八、查看混合矩阵 九、输出评估指标 一、导入数据 # 根据商户数据预测其是否续约案例 import pandas #读取数据到 da…

YOLOv10 论文学习

论文链接:https://arxiv.org/pdf/2405.14458 代码链接:https://github.com/THU-MIG/yolov10 解决了什么问题? 实时目标检测是计算机视觉领域的研究焦点,目的是以较低的延迟准确地预测图像中各物体的类别和坐标。它广泛应用于自动…

结构体(位段)内存分配

结构体由多个数据类型的成员组成。那编译器分配的内存是不是所有成员的字节数总和呢? 首先,stu的内存大小并不为29个字节,即证明结构体内存不是所有成员的字节数和。   其次,stu成员中sex的内存位置不在21,即可推测…

CS 下载安装详解

目录 CS简介: CS下载地址: CS的安装: CS简介: CS为目前渗透中常用的一款工具,它的强大在于控制windows木马,CS主要控制windows木马。 CS下载地址: 链接:https://pan.baidu.com/…

【Linux】-Zookeeper安装部署[17]

简介 apache ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。 除了为Hadoop和H…

【设计模式】JAVA Design Patterns——Bridge(桥接模式)

🔍目的 将抽象与其实现分离,以便二者可以独立变化。 🔍解释 真实世界例子 考虑一下你拥有一种具有不同附魔的武器,并且应该允许将具有不同附魔的不同武器混合使用。 你会怎么做? 为每个附魔创建每种武器的多个副本&…

【论文阅读】 YOLOv10: Real-Time End-to-End Object Detection

文章目录 AbstractIntroductionRelated WorkMethodologyConsistent Dual Assignments for NMS-free Training (无NMS训练的一致性双重任务分配)Holistic Efficiency-Accuracy Driven Model Design (效率-精度驱动的整体模型设计) …

huggingface 笔记:查看GPU占用情况

0 准备部分 0.1 创建虚拟数据 import numpy as npfrom datasets import Datasetseq_len, dataset_size 512, 512 dummy_data {"input_ids": np.random.randint(100, 30000, (dataset_size, seq_len)),"labels": np.random.randint(0, 1, (dataset_size…

C++与Android处理16进制大端/小端数据实例(二百七十六)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

民国漫画杂志《时代漫画》第14期.PDF

时代漫画14.PDF: https://url03.ctfile.com/f/1779803-1247458399-6732ac?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了,截止1937年6月战争来临被迫停刊共发行了39期。 ps:资源来源网络!

OWASP top10--SQL注入(一)

SQL注入式攻击技术,一般针对基于Web平台的应用程序.造成SQL注入攻击漏洞的原因,是由于程序员在编写Web程序时,没有对浏览器端提交的参数进行严格的过滤和判断。用户可以修改构造参数,提交SQL查询语句,并传递至服务器端…

基本IO接口

引入 基本输入接口 示例1 示例2:有数据保持能力的外设 #RD端由in指令控制:将数据由端口传输到CPU内存中 #CS244信号由译码电路实现 示例3: a)图中由于输出端口6有连接到端口1,当开关与端点1闭合时期间,仍能维持3端口…

使用DataGrip连接Elasticsearch

使用DataGrip连接Elasticsearch 前言,公司需要使用ES来做数据的查询,我安装完ES,安装完Kibana的时候,想先开始尝试一下,插入查询数据能否可用,但是上次使用ES是好久前了,增删改查的请求根本记不…

欧拉函数、快速幂、扩展欧几里得算法、中国剩余定理和高斯消元

欧拉函数 给定 n 个正整数 ai,请你求出每个数的欧拉函数。 欧拉函数的定义1∼N 中与 N 互质的数的个数被称为欧拉函数,记为 ϕ(N)。 若在算数基本定理中,Np1a11p2a2…pmm,则:ϕ(N) Np1−1/p1p2−1/p2…pm−1/pm 输…

javas-core VS java-object-diff

对照工具选择 javas-core 和 java-object-diff ,对比demo https://github.com/kofgame/objectdiff-vs-javers,都为同源对比,都支持嵌套对象。 使用JMH测试方法进行性能测试,使用题库的QuestionResponseVO对象来进行对照对比,进行…