【干货】JVS低代码表单基础组件的配置与应用

news2024/10/5 13:35:37

表单的基础组件主要用于收集用户输入的数据,并对这些数据进行验证和处理。通过表单组件,用户可以输入各种类型的数据,如文本、数字、日期、选择项等。这些数据可以通过表单的提交按钮提交到服务器进行处理,从而使网站或应用程序能够获取用户输入的数据进行相应的处理与分析。表单组件还可以用于用户认证与授权,以及实现其他与数据交互相关的功能。表单的基础组件在网站或应用程序中起着至关重要的作用,有助于提高用户体验和数据交互的效率。

表单基础组件配置过程

配置流程:拖拽组件进入画布>>绑定数据>>设置属性控制>>设置样式控制>>按钮设置>>预览效果

①:组件展示区域,可以将组件拖拽进入表单画布

②:点击组件的标签,右侧弹出组件的设置面板

③:在组件设置面板中可以设计与组件相关的细节配置,包括绑定数据、设置样式、配置联动等操作

④:可预览表单配置的效果

⑤:可设置表单界面上的提交等按钮的触发逻辑

绑定数据模型字段

组件绑定数据模型本质上就是将本组件与模型的字段关联起来,字段的变更直接在模型对应的字段中进行存储调整,从而实现数据的增删改查,所以数据模型的绑定是表单实现数据变动的基础。

对数据模型的操作配置界面如下图所示

①:点击设置按钮,系统弹出模型的展示界面,这里展示的本表单对应绑定的模型

②:点击字段名称后的下拉框,系统弹出本表单关联模型的字段,可绑定已经存在的数据模型的对应字段

这里的数据模型和表单的创建方式相关,如下图所示,通过列表页去创建的表单都是和列表页对应的模型关联起来的

①:进入列表页设计界面

②:查看列表页对应的数据模型

③:查看该列表页对应的新增按钮(系统默认)的对应表单

④:查看新增表单的数据模型与列表页的数据模型一致

⑤:创建一个新的自定义表单

⑥:查看自定义表单与列表页的数据模型一致

⑦:设置表单组件与数据模型字段进行绑定

如果创建独立表单时,通过列表页创建独立表单时,系统会自动关联列表页对应的数据模型,如下图所示

①:通过列表页菜单的创建表单设计

②:查看创建的表单对应的数据模型与列表页的数据模型是一致的

③:引入组件,并绑定模型对应字段

④:查看配置最后的效果

基础属性控制

表单的基础属性控制包括对显隐状态、默认数据、动态公式、数据联动等

①:配置组件的名称与组件绑定数据模型字段

②:设置组件的可用模式,普通模式(可读、可写),只读模式(可读不可改),隐藏(不可见,不可改)

③:设置组件的默认值,自定义可以设置固定的默认值,如果选择公式时,系统通过函数配置的内容自动计算内容结果

④:显示控制可根据其他组件的结果进行控制本组件的显示条件,实现动态的显隐控制

⑤:禁用控制可根据其他组件的结果进控制本组件的使用状态,实现动态的组件可用性控制

⑥:网络设置(逻辑触发),组件一旦失焦时触发相应的逻辑(常用于对数据的复杂校验等)

⑦:数据联动是当前组件的数据依赖于其他组件的数据变换而随之调整

  • 显隐控制视频操作点击下方视频查看:

表单组件显隐控制

  • 函数配置操作如下图所示,通过组件结果去确定其他组件的内容

通过设置组件的默认值为公式,在弹出的公式界面使用函数式编程(类excel函数配置)

表单函数公式配置

  • 数据联动设置

如下图所示,通过组件的内容,去控制其他组件的内容展示,这里的内容展示通过另外的模型数据进行返回设置的

配置方式如下所示(后续章节详细介绍)

①:点击对应组件,打开属性设置面板

②:点击数据联动设置,进入数据联动配置界面,具体配置如下图所示(后续章节详细介绍)

组件的校验设置

组件校验设置主要用于组件录入内容的正确性验证,包括必填性、合规性、空值性等

组件的样式控制

组件的样式控制包括组件的宽度、占位提示等,如下图所示

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

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

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

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

相关文章

元宇宙热潮依旧,《神由都城》引人注目

随着5G、云计算、人工智能、虚拟现实等技术的成熟,元宇宙的发展已然驶入快车道,这对企业来说是一个发展壮大的好机会。常孝股份抓住创新发展的机遇,打造属于自己的元宇宙世界——《神由都城》。 《神由都城》是以常孝股份旗下的文旅景区“中华孝道园”为依托,打造的元宇宙世界…

leetcode刷题日记之做菜顺序

原题链接: 做菜顺序 一个厨师收集了他 n 道菜的满意程度 satisfaction ,这个厨师做出每道菜的时间都是 1 单位时间。 一道菜的 「 like-time 系数 」定义为烹饪这道菜结束的时间(包含之前每道菜所花费的时间)乘以这道菜的满意程…

【点云学习PCL 】一

点云学习 说明:仅做学习使用,侵删 参考网址1 一、点云基础 0 概述 PCL(Point Cloud Library)是用于 2D/3D 图像和点云处理的大型开源跨平台的 C 编程库,PCL 框架实现了大量点云相关的通用算法和高效的数据结构&…

Bytebase 2.10.0 - 支持更灵活的变更发布人:指定任意角色或自定义审批流的最后节点

🚀 新功能 发布策略支持制定更灵活的变更发布人:可以指定任意角色集合,也可以指定自定义审批流的最后一个审批人。 支持在项目中创建分支保护规则。支持给数据库设置标签。支持给字段设置标签。支持给表设置分类分级。 🎄 改进 …

C# Winform编程(10)Chart图表控件

Chart控件 Chart控件Chart属性详述Chart属性设置图表样式属性数据样式属性图例样式图标区样式SeriesChartType类型 Chart控件鼠标滚轮事件特殊处理Series绑定数据演示代码鼠标滚轮缩放图表示例参考引用 Chart控件 Chart控件是微软自带的一种图形可视化组件,使用简单…

node开发微信群聊机器人第⑤章

▍PART 序 看本文时,请确保前4章都已经看过,不然本章你看着看着思维容易跳脱!再一个机器人教程只在公众号:“程序员野区”首发。csdn会跟着发一份,未经博主同意,请勿转载!欢迎分享到自己的微信…

前端入门(一)JavaScript语法、数据类型、运算、函数

文章目录 概念JavaScript编写的位置基本语法数据类型变量声明var、let、constundefined与null的区别字符串类型数组Map和Set函数定义与参数传递 变量的作用域let、const方法的定义与调用常用内部对象json对象原型操作BOM对象操作DOM对象表单操作(验证)MD…

年轻人开发谁用默认背景?我直接美图安排上

文章目录 一、你还在用传统的开发界面吗二、年轻人的界面 1.动漫型2.偶像型3.提神型 三、更换背景的操作 第一步第二步第三步 一、你还在用传统的开发界面吗 不比不知道,一比吓一跳,都2023年了,你还在用Pycharm的默认背景写代码吗&#xf…

面试必考精华版Leetcode215. 数组中的第K个最大元素

题目&#xff1a; 代码&#xff08;2023年10月27日首刷看解析&#xff09;&#xff1a; class Solution { public:int findKthLargest(vector<int>& nums, int k) {return quickselect(nums,k);}int quickselect(vector<int>& nums,int k){vector<int&…

【Axure教程】中继器制作树元件

树元件在计算机科学和软件工程中常常用于构建和操作树形数据结构&#xff0c;提供了一种有效的方式来处理和查询具有层次性关系的数据&#xff0c;使开发人员能够更容易地组织和检索信息&#xff0c;用于组织和管理数据&#xff0c;具有各种应用。 那Axure里面也自带了一个树元…

C++中invoke与function的区别

C invoke invoke是C17标准引入的一个函数模板&#xff0c;用来调用可调用对象&#xff08;Callable Object&#xff0c;如函数指针、函数对象、成员函数指针等&#xff09;并返回结果。 invoke提供了统一的调用语法&#xff0c;无论可调用对象的类型是什么&#xff0c;都可以…

工业自动化产品抗干扰笔记

工业自动化产品抗干扰笔记 名词解释&#xff1a; 耦合矢量控制寄生振荡热噪点闪变噪点尖峰噪点反电势集肤效应交流电阻感抗容抗寄生电容共模与差模电场和磁场漏电流浪涌电压电流传输与电压传输各种地线解析 一、干扰来源&#xff1a; 任何一个电磁干扰现象都具有电磁干扰源…

大促期间的窜货低价怎么处理

产品窜货往往会伴随低价&#xff0c;所以监测窜货就是要先监测低价&#xff0c;当然有些产品卖价不低价也窜货&#xff0c;但这些正价或者高价卖的链接对渠道影响并不太大&#xff0c;所以治理低价窜货更重要。 力维网络专业为品牌提供窜货治理&#xff0c;低价监测的需求&…

NodeRed Modbus学习一(配置Modsim32)

新手小白 第一次使用这个玩意 会弹出一个小白框&#xff0c;不用管它。 新建File 下面两张图可以看出值在变化 通过下图可以看出还没有链接 创建连接 好了

在项目管理中,项目经理要控制这三个重要因素:进度、成本、质量

项目管理贯穿项目的整个生命周期&#xff0c;对项目的整个过程进行管理&#xff0c;对项目进行计划、组织、指导和控制的手段。 在项目的生命周期内&#xff0c;进行资源的配置和协调&#xff0c;做出科学决策&#xff0c;从而使项目执行的全过程处于最佳的运行状态&#xff…

04.Animation

参考JusterZhu视频和文档&#xff0c;ppt文档基本全抄 基本没看懂&#xff0c;过几天有时间了研究下 一、Animation 1.什么是Animation&#xff1f; 动画是快速循环播放一系列图像&#xff08;其中每个图像与下一个图像略微不同&#xff09;给人造成的一种幻觉。再回到WPF开发…

微信公众号分销商城源码系统+多商户入驻+互动直播+整点秒杀 带部署教程

今天罗峰来给大家分享一款微信公众号分销商城源码系统。微信公众号的普及以及电商行业的兴起&#xff0c;一种新型的商业模式——微信公众号分销商城应运而生。这种模式通过微信平台&#xff0c;将线上与线下的商业活动完美结合&#xff0c;为企业提供了更广阔的销售渠道。以下…

如何在群晖NAS中搭建WebDav服务,并实现公网访问

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《速学数据结构》 《C语言进阶篇》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 1. 在群晖套件中心安装WebDav Server套件1.1 安装完成后&#xff0c;启动webdav服务&#xff0c;并勾选HTTP复选…

stable-diffusion-webui环境部署

stable-diffusion-webui环境部署 1. 环境创建2. 安装依赖库3.下载底模4.运行代码5. 报错信息报错1报错2 1. 环境创建 创建虚拟环境 conda create -n env_stable python3.10.0进入虚拟环境 conda activate env_stableclone源码 git clone https://github.com/AUTOMATIC1111/stab…

设备管理软件管理系统

从设备检查到设备保养&#xff0c;再到设备维护&#xff0c;全方位视角掌握设备状态的管理软件。让企业员工可以随时随地的查看设备的各种信息&#xff1a;巡检信息、保养计划、备件更换提醒、维修保养资料等。 1、一物一码&#xff0c;建立设备电子档案“身份证” 精准管控每一…