JVS低代码表单引擎之文本框的强大作用,建议收藏!

news2024/10/6 6:04:04

表单是低代码最基础的数据输入的方式,其中文本框是配置话表单的最基础的业务能力组件之一,主要用于收集和展示用户录入的文本类的信息,例如名称、地址、描述说明等等。

那么我们接下来分几个方面分别对文本框的使用进行讲解。

基础功能

拥有内容录入、字数统计、一键清除、密码框、默认提示、格式校验等功能。

字数统计长度限制

如图所示,可以设置文本录入最大长度,与当前录入的数量展示,超过最大长度后将无法录入多余内容,同时可以开启字数统计按钮,这样会更加清晰已经占用的字数统计

一键清除

一键清除功能是指在内容录入后,可以通过清除按钮删除本文本框内的所有内容,用于在内容录入错误时快速清空内容,效果图如下:

配置如下:

提示内容

内容提示用于在录入内容之前,告知用户本文本框需要了解的提示,一旦输入内容后自动清除提示

也可以在组件之后提供独立的 内容提示,提示通过悬浮的提示气泡展示

设置方式如下图所示:

密码框

文本框可以作为密码输入框,当作为密码框时,系统会增加脱密展示(不展示原文),也可以通过“原文”按钮转化为明文展示

配置方式如下图所示:

前置与后缀

在提示用户输入信息时,前缀与后缀常常作为规范、标准的 辅助信息进行展示,配置如下图所示:

必填校验

必填校验是表单中最基础的数据校验方式,保障数据提交到服务端后数据的规范性与一致性,设置如下图所示

跨表查询回填(查询对话框)

文本组件可设置选择关联其他数据模型,配置为选择类型。通过查询对话框把其他模型中的数据回填到本文本框中,我们先看看效果如下图所示:

配置的方式如下图所示:

①:点击需要配置查询对话框的文本框组件

②:开启支持搜索返回功能,开启后实现通过跨模型的数据查询并把对应字段作为查询内容回填到文本框中

③:设置关联模型,选择对应模型后(跨表查询数据的来源)

④:跳过权限设置,对与数据来源的模型查询时是否校验用户的数据权限,打开时则不校验用户的数据权限

⑤:展示值是选择把对应模型的哪个字段内容回填到文本框中

⑥:是否可以多选回填,开启多选回填后,将回填多条数据

⑦:展示字段用于查询对话框中展示哪些字段以供 用户去识别选择

⑧:查询对话框中的查询条件设置

⑨:是否对返回的数据做条件过滤配置,开启后可以进行条件过滤配置

注意:文本组件开启搜索后回填值为所选字段的值,此处与下拉选项不同,下拉框做数据回显的时候仅仅是类似于系统字典的方式,该字段存了对应数据的ID值,查询对话框是存的数据本身的内容

数据联动(数据自动回显)

数据联动和查询对话框不同,查询对话框是在对象文本框的主动人为操作回填数据,数据联动是对象文本框依赖于其他组件被动回显数据,下面我们先看看实际的效果:

配置方式如下,有配置权限的用户进入表单设计界面

选中需要动态回显数据的字段操作如下图所示:

①:拖入文本框组件、绑定对应字段的数据模型

②:设置文本框为只读模式

③:设置文本框的数据联动状态,点击编辑,进入数据联动界面,如下图所示:

①:选择回填数据的来源模型(跨表数据)

②:选择本文本框依赖的组件内容

③:设置数据回填数据模型的字段中与依赖组件值相同的数据行(用于把想要的目标数据过滤出来)

④:可设置多个条件

⑤:设置回填到本文本框的字段

在线demo:https://frame.bctools.cn/

基础框架开源地址:​​https://gitee.com/software-minister/jvs​​

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

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

相关文章

初识Java 16-1 字符串

目录 字符串的常量和变量 不变的String常量 String变量 重载的和更快的StringBuilder 容易忽略的递归现象 对字符串的操作 格式化输出 System.out.format() Formatter类 格式说明符 Formatter转换 String.format() 新特性:文本块 本笔记参考自&#xff…

Creaform形创HandySCAN MAX l Elite三维扫描仪便携式3D测量解决方案

CASAIM中科院广州电子智能制造事业部连续多年荣获形创Creaform战略级代理商证书。战略级代理商是形创Creaform最高级别的合作伙伴。 2023年CASAIM中科院广州电子智能制造事业部的形创Creaform战略级代理商证书: Creaform 形创是便携式三维测量解决方案和工程服务领…

使用mac自带VNC公网远程控制macOS

公网远程控制macOS【使用mac自带VNC】 文章目录 公网远程控制macOS【使用mac自带VNC】前言1. 测试局域网内远程控制1.1 macOS打开屏幕共享1.2 测试局域网内VNC远程控制 2. 测试公网远程控制2.1 macOS安装配置cpolar内网穿透2.2 创建tcp隧道,指向5900端口 3. 测试公网…

人工智能的发展方向:探索智能未来的无限可能

原创 | 文 BFT机器人 人工智能,简称AI,是一门专注于研究计算机如何能像人类一样思考、学习和解决问题的科学。它的创造初衷是构建一个智能系统,能模仿、模拟甚至实现人工智能的各种功能和行为,随着科技的持续进步,人工…

TSINGSEE青犀智能分析网关裸土覆盖算法如何做到防范山体滑坡?

在雨水季节,特别是山区,十分容易发生山体滑坡现象,会导致山村、铁路、公路、房屋、甚至城镇被冲毁,造成严重的人员伤亡和财产损失。而TSINGSEE青犀智能分析网关裸土覆盖算法是一种利用图像处理技术来评估裸露土壤面积和裸露程度的…

VMware打开共享虚拟机后找不到/mnt/hgfs/文件夹,以及不能拖拽/复制粘贴等操作,ubuntu不能安装VMware tools

问题原因 我的问题出现原因是,安装ubuntn虚拟机的时候VMware tools没有安装好,需要重新安装,但安装选项是暗的,不能操作。 类似这种情况,虚拟机开启时也是,因为我虚拟机已经装好了,开启时是亮…

【JAVA】:万字长篇带你了解JAVA并发编程【二】

目录 【JAVA】:万字长篇带你了解JAVA并发编程【二】3. 线程池池化技术线程池的概念与作用什么是线程池?优点 Executor框架Executor框架组成部分工作任务抽象接口和类 线程池的生命周期非核心线程和核心线程ThreadPoolExecutor线程池的工作流常见的线程池…

快速解决msvcp140.dll丢失问题的5个方法,轻松修复dll问题

在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是“msvcp140.dll丢失”。那么,msvcp140.dll究竟是什么?它丢失需要怎么修复呢?本文将从多个角度对这一问题进行详细解析。 一、msvcp140.dll是什么 msvcp14…

C/C++输出整数 2020年9月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析

目录 C/C输出整数 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C输出整数 2020年9月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 输入四个整数,把输入的第三、第四个整数输出…

Jmeter(十四):跨线程组传递jmeter变量及cookie的处理详解

setUp线程组 setUp thread group 一种特殊类型的线程组,用于在执行常规线程组之前执行一些必要的操作。 在 setup线程组下提到的线程行为与普通线程组完全相同。不同的是执行顺序--- 它会在普通线程组执行之前被触发; 应用场景举例: A、测…

21.7 Python 使用Request库

Request库可以用来发送各种HTTP请求,该框架的特点是简单易用,同时支持同步和异步请求,支持HTTP协议的各种方法和重定向。它还支持Cookie、HTTPS和认证等特性。 Request库的使用非常广泛,可以用于网络爬虫、API调用、网站测试等场景…

vue3 echarts实现k线

文章目录 echarts实现k线核心代码完整代码 echarts实现k线 安装 npm install echarts实现效果 没有添加成交量和均线 核心代码 引入echarts echartsData表示echarts数据 这样写是为了方便点击时间切换k线数据 window.addEventListener(“resize”, () > { chart.resi…

实习日常的点点滴滴记录(threadlocal知识概括和相关应用场景)------慢慢积累,厚积薄发(要学的东西还好多,加油!))(知识和实践的结合)

在通常的业务开发中,ThreadLocal 有两种典型的使用场景: 场景1: ThreadLocal 用作保存每个线程独享的对象,为每个线程都创建一个副本,这样每个线程都可以修改自己所拥有的副本, 而不会影响其他线程的副本&#xff0c…

tinymce输入框怎么限制只输入空格或者回车时不能提交

项目场景: 项目相关背景: tinymce输入框只输入空格或者回车时提交的空数据毫无意义,所以需要限制一下 无意义的输入: 解决方案: 因为tinymce输入框传到后端的数据是代码形式,所以不能直接.trem,需要一步步的进行去除空格(空格分:‘ ’与‘ ’)与回车。 注意:空…

xFlight开源飞控之AT32F435计划

xFlight开源飞控之AT32F435计划 1. 源由2. 材料清单2.1 结构件2.2 动力件2.2 电子件2.3 天线2.4 附件 3. 固件准备4. 整机外观5. 问题汇总5.1 【已解决】iNav固件无法找到Baro芯片5.2 【已解决】正反电机问题5.3 【已解决】摄像头图像模糊5.4 【已解决】ESC 电机 bdshot异常5.5…

Ubuntu中使用yum命令出现错误提示:Command ‘yum‘ not found, did you mean:

Ubuntu中使用yum命令出现错误提示:Command ‘yum’ not found, did you mean: command ‘gum’ from snap gum (0.12.0) command ‘num’ from deb quickcal (2.4-1) command ‘yum4’ from deb nextgen-yum4 (4.5.2-6) command ‘uum’ from deb freewnn-jserver (1.1.1~a021…

ASEMI肖特基二极管MBR40200PT参数和作用详解

编辑-Z 肖特基二极管MBR40200PT是一种高效的电子元件,广泛应用于电源管理和功率控制领域。它具有低导通压降和快速恢复特性,能够在高频率和高温环境下稳定工作。 MBR40200PT采用了肖特基结构,该结构是由一个金属与一个半导体材料接触而形成的…

hdlbits系列verilog解答(向量5)-19

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 给定五个 1 位信号(a、b、c、d 和 e),计算 25 位输出向量中的所有 25 个成对一比特比较。如果要比较的两个位相等,则输出应为 1。 out[24] = ~a ^ a; // a == a, so out[24] is always 1. out[23] = ~a ^ b…

linux安装vscode vscode使用 创建项目并运行

下载 https://code.visualstudio.com/ 下载.deb文件 安装 假如文件被下载到了 /opt目录下 进入Opt目录,右键从当前目录打开终端。 输入下面的安装命令。 sudo apt-get install ./code_1.83.1-1696982868_amd64.deb 安装成功。 安装插件 使用c,必…

MyBatisPlus创建新的Mapper.xml映射文件而不使用框架自带的?

MyBatisPlus创建新的Mapper.xml映射文件而不使用框架自带的? 以后使用数据库框架的时候可以使用MyBatisPlus而不适用MyBatis,因为MyBatisPlus更为简便,像简单的增删改查操作,在MyBatisPlus中可以直接完成,不用写Mappe…