JEECG 简单实例讲解自定义表单功能

最新推荐文章于 2025-10-01 06:06:47 发布
原创 最新推荐文章于 2025-10-01 06:06:47 发布 · 1w 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JAVA #JEECG #开源 #快速开发 #自定义表单

本文详细介绍了JEECG智能开发平台的自定义表单功能，包括功能简介、简单实例（单表开发）和复杂表单（一对多关系的多表实例）。在简单实例中，讲解了如何创建表单模板、设计表单、添加数据源并生成预览。复杂表单部分则展示了如何处理一对多关系的表单。此外，还概述了各种表单控件，如单行输入框、多行输入框、下拉框、复选框等。

JEECG简单实例讲解自定义表单功能

一、自定义表单功能简介

       自定义表单是JEECG智能开发平台开发的一套可视化的表单设计功能，基于ueditor实现，bootstrap样式风格。

总体来讲，自定义表单功能概括起来如下：
  • 表单预览，动态报表展示（列表数据展示）
  • 表单数据填报，支持多数据表同时填报，一对多数据表填报，单表多条数据批量填报等
    自定义表单支持用户自定义模板，同时也有大量丰富的标准表单控件，使得用户能够快速灵活的设计个性化、多样化的表单，从而大大提高工作效率、降低用户工作成本。

二、自定义表单开发实例

1.简单实例(单表开发)

1）创建自定义表单模板

 
2）设计表单
最低0.47元/天 解锁文章
基于jeecgboot-vue3的Flowable流程-自定义业务表单处理（一）支持同一个业务多个关联流程的选择支持
宁波阿成的博客
06-21 1434
基于jeecgboot-vue3的Flowable流程-自定义业务表单处理（一）支持同一个业务多个关联流程的选择支持
基于jeecgboot-vue3的Flowable增加表单功能（二）
宁波阿成的博客
05-22 799
基于jeecgboot-vue3的Flowable增加表单功能（二）
JEECG 在线表单开发指南v3.7
04-04
JEECG 开发文档系列 ——JEECG Online表单开发指南v3.7
告别996表单开发：JeecgBoot低代码表单设计器3分钟上手指南
gitblog_00675的博客
10-01 916
你还在为重复编写表单CRUD代码熬夜加班吗？还在纠结前端组件与后端接口的适配问题吗？本文将带你解锁JeecgBoot Online开发模式的核心奥秘，通过低代码表单设计器实现"拖拽即开发"，让你3分钟完成传统3小时的表单开发工作。 ## 一、低代码开发新范式：OnlineCoding工作流解析 JeecgBoot创新性地提出"OnlineCoding→代码生成器→手工MERGE"的三段式开发模...
【JEECG技术博文】JEECG简单实例讲解自定义表单功能
热门推荐
JEECG官方博客
12-15 2万+
JEECG简单实例讲解自定义表单功能作者：任杰 http://blog.csdn.net/renjie0520/article/details/50286503一、自定义表单功能简介    自定义表单是JEECG智能开发平台开发的一套可视化的表单设计功能，基于ueditor实现，bootstrap样式风格。    总体来讲，自定义表单功能概括起来如下：        1）表单预览，动态报表展示（列
JEECG的表单配置
u010804417的博客
08-10 1613
数据库中表的设计主键的选取 主键的选取 每张表的主键最好不含业务逻辑，这是为了保证表记录的稳定性。例如：productNo含有业务逻辑，如果产品号的命名规则发生变化，记录就存在不稳定性。 ...
JEECG 简单实例讲解权限控制.docx
06-30
### JEECG 权限控制系统实现案例分析 #### 一、背景介绍 JEECG是一款基于Java技术栈的快速开发平台，它支持低代码开发模式，可以帮助开发者快速构建企业级应用。本文通过一个具体的日志管理系统案例来详细介绍如何...
实例讲解PHP表单验证功能
01-20
上面的表单使用如下验证规则： 字段 验证规则 Name 必需。必须包含字母和空格。 E-mail 必需。必须包含有效的电子邮件地址（包含 @ 和 .）。 Website 可选。如果选填，则必须包含有效的 URL。 Comment 可...
java自定义Scanner类似功能类的实例讲解
08-24
Java 自定义 Scanner 类似功能类的实例讲解 本文主要介绍了 Java 自定义 Scanner 类似功能类的实例讲解，具有很好的参考价值，希望对大家有所帮助。下面是对标题、描述、标签和部分内容的详细解释。 一、标题解释 ...
【JEECG技术博文】JEECG 简单实例讲解权限控制
fswhwd的博客
11-09 370
【JEECG技术博文】JEECG 简单实例讲解权限控制
表自定义表单+工作流.zip
10-15
自定义表单设计是低代码开发平台的核心功能之一，它使得非技术人员也能构建符合业务需求的表单。在这个项目中，用户可以通过图形化的界面设计表单，无需编写大量的代码。这种低代码的方式降低了开发门槛，提高了开发...
JEECG Online表单开发指南v3.7
04-25
JEECG Online表单开发指南v3.7
JEECG Online表单对外接口v3.7
04-04
JEECG 开发文档系列 ——————JEECG Online表单对外接口v3.7
jeecg入门学习_表单（单表）
strawberry265的博客
07-25 270
一.单表的使用1.添加表单并保存2. 同步数据库3.功能测试。
JEECG弹出框提交表单
weixin_30271335的博客
11-03 511
一、设备主页面(deviceMain.jsp)　　 <t:dgToolBar title="编辑设备" icon="icon-edit" url="deviceController.do?goDeviceDetail" funname="editMyDevice"></t:dgToolBar> // 编辑管理的设备 function editM...
JEECG表单配置模版生成规则和注意事项
publicman_的博客
05-31 371
1、自已写实体或添加字段时采用下划线转驼峰需在get方法添加注释，name值不分大小写。4、注意系统配置模版时不识别字段名含有下划线转驼峰；2、控件显示对应空间选择；1、文字显示对应字段名；一、模版显示对应在线表单内容；二、表单对应实体注意事项；
Jeecg创建表单页面步骤
m0_65037354的博客
01-09 925
2.选中该表，然后生成代码，可以先把代码放在桌面，然后将文件夹是包名称的文件复制到后端代码的jeecg-module-system/jeecg-system-biz/src/main/java/org/jeecg/modules中，将里面的vue3复制到前端代码中 src/views。1.在Online表单开发里面新建一个表单页面，可以修改数据库属性、页面属性、校验字段、外键、索引，新建完成之后然后同步数据库。4.然后在角色管理中为该账户把刚才的页面权限勾选上，完成。
Jeccg自定义弹窗（组件和页面）
qq_56597943的博客
04-21 2957
​书接上回，导师要换项目架构，选择了Jeecg，目前已经通过Jeecg的代码生成器搭建了个简单的前后端，数据库导师也搭完了，然后让我接手剩下的，完善需求。需要在列表数据的操作栏后添加对应按钮在中，找到操作栏函数/*** 操作栏*/return [label: '编辑',},label: '新增方案', // 一对多，页面弹窗},label: '新增疗效', // 一对一，组件弹窗},再定义相关函数，目前只在控制台打印一下，不做其他操作/*** 新增治疗方案*/
UI标签库专题十：JEECG智能开发平台 Form（form标签）
iteye_14984的博客
06-11 146
 &lt;!--[if !supportLists]--&gt;1.&lt;!--[endif]--&gt;Form（form标签） &lt;!--[if !supportLists]--&gt;1.1.&lt;!--[endif]--&gt;参数 属性名 类型 描述 是否必须 默认值 action string 表单提交地址 否 null items string 循环集...
jeecg自定义按钮如何获取表单的值
最新发布
10-18
在 Jeecg 中，自定义按钮获取表单值可以通过以下常见方法实现： ### 获取表单数据对象 在 Jeecg 中，如果使用的是 Ant Design 的表单组件，通常可以通过 `form` 实例来获取表单数据。假设在 React 项目中，示例代码如下： ```jsx import React from 'react'; import { Form, Button } from 'antd'; const MyForm = () => { const [form] = Form.useForm(); const handleCustomButtonClick = () => { const formValues = form.getFieldsValue(); console.log('表单值:', formValues); }; return ( <Form form={form}> {/* 表单字段 */} <Form.Item name="username" label="用户名"> <input placeholder="请输入用户名" /> </Form.Item> <Form.Item name="password" label="密码"> <input type="password" placeholder="请输入密码" /> </Form.Item> <Button type="primary" onClick={handleCustomButtonClick}> 自定义按钮 </Button> </Form> ); }; export default MyForm; ``` 在上述代码中，通过 `form.getFieldsValue()` 方法获取了整个表单的值。 ### 在 Jeecg 特定场景下 如果是在 Jeecg 的代码生成器生成的页面中，要获取表单值，可能需要结合 Jeecg 的一些特定 API 或组件属性。比如在 Jeecg 的弹窗表单中，可能会有一个 `ref` 来引用表单组件，然后通过该 `ref` 获取表单值。示例代码如下： ```jsx import React, { useRef } from 'react'; import { Modal, Form, Button } from 'antd'; import { JeecgForm } from '@jeecg/antd-online'; const MyModalForm = () => { const formRef = useRef(null); const handleCustomButtonClick = () => { const formValues = formRef.current.getFieldsValue(); console.log('表单值:', formValues); }; return ( <Modal visible={true}> <JeecgForm ref={formRef}> {/* 表单字段 */} <Form.Item name="email" label="邮箱"> <input placeholder="请输入邮箱" /> </Form.Item> <Button type="primary" onClick={handleCustomButtonClick}> 自定义按钮 </Button> </JeecgForm> </Modal> ); }; export default MyModalForm; ``` 在这个示例中，使用 `useRef` 创建了一个引用 `formRef` 来引用 `JeecgForm` 组件，然后在按钮点击事件中通过 `formRef.current.getFieldsValue()` 获取表单值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值