【JEECG技术博文】JEECG简单实例讲解自定义表单功能

Myth丶恋晨 2022-05-28 13:59 271阅读 0赞

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

作者：任杰 [http://blog.csdn.net/renjie0520/article/details/50286503][http_blog.csdn.net_renjie0520_article_details_50286503]

# 一、自定义表单功能简介 #

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

#     总体来讲，自定义表单功能概括起来如下： #

#         1）表单预览，动态报表展示（列表数据展示） #

#         2）表单数据填报，支持多数据表同时填报，一对多数据表填报，单表多条数据批量填报等 #

#     自定义表单支持用户自定义模板，同时也有大量丰富的标准表单控件，使得用户能够快速灵活的设计个性化、多样化的表单，从而大大提高工作效率、降低用户工作成本。 #

#  #

# 二、自定义表单开发实例 #

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

1）创建自定义表单模板 ![Center][]

#### 2）设计表单![Center 1][] ####

#### 3）添加数据源 ####

数据源类型分为两种（Java类正在积极实现中）

*  数据库表

数据库表为直接指定该表单数据列填报时对应的数据库表 ![Center 2][]

*  动态SQL

主键作为查询条件，值从请求中的参数id中获取，获取方法格式为$\{id\}。 ![Center 3][]

![Center 4][]

### 4）生成表单 ###

咱们以添加的“ds\_1”数据源为例 ：

![Center 5][]

### 5）预览表单 ###

###     刷新列表后，选择添加的表单，点击“预览”，进入查看界面，分别选择三种模式进行操作。![Center 6][]![Center 7][] ###

进入该表单数据库，找到刚添加的数据的id，进入预览模式，输入id即可进行修改及查看，以“查看模式”为例： ![Center 8][] ![Center 9][]

至此单个表单的生成及数据添加演示完成。

## 2.复杂表单（一对多关系的多表实例） ##

一对多关系的多表关系，请先设置好主从表关系：即外键关系。添加主数据表的数据源及从表的数据源的步骤与单表添加数据源的步骤类似不在赘述，直接进入添加表单环节。

### 1）添加表单![Center 10][] ###

从表的列表控件设置界面： ![Center 11][]

### 2）表单预览 ###

一对多表单的数据添加、修改、查看模式的操作步骤与单表类似。下图展示一对多表的“添加模式”的界面：

![Center 12][]

# 三、表单控件简介 #

JEECG只能开发平台自定义表单具有丰富的表单控件，能够结合当前数据源，快速的设置表单元素的展示类型。

![Center 13][]

## 1.单行输入框、多行输入框 ##

单行输入框及多行输入框大体上功能类似，差异不大，请亲自比对差异！

下面仅以单行输入框为例讲解：

![Center 14][]

![Center 15][]

![Center 16][]

![Center 17][]

## 2.下拉框、单选框及复选框 ##

下拉框、单选框及复选框最大的特色就是与本平台字典功能结合，选定字典后，自动生成对应的内容。

以下拉框为例进行讲解：

![Center 18][]

![Center 19][]

![Center 20][]

3.宏控件

宏控件主要是用来格式化时间及自动提取并展示当前用户的信息：

![Center 21][]

## 4.列表控件 ##

列表控件的功能及使用已经在上述讲过，再此介绍下详细的属性及使用心得：

![Center 22][]

![Center 23][]

![Center 24][]

## 5.POPUP控件 ##

该控件比较特殊，结合JEECG智能平台的ONLINE动态报表配置功能实现列表值的生成。

![Center 25][]

至此，JEECG开源平台的自定义表单功能及表单控件就讲解完毕了，表单的具体使用需要大家亲自尝试，如果问题，可以在JEECG官方网站寻求资料及帮助。

祝大家工作顺利！

[http_blog.csdn.net_renjie0520_article_details_50286503]: http://blog.csdn.net/renjie0520/article/details/50286503
[Center]: /images/20220528/58f29aec9d9d478d8c61e153709a869d.png
[Center 1]: /images/20220528/c700fa194e204fb98b03ba153b52d5fd.png
[Center 2]: /images/20220528/02a667f60ddf4f519e45a8ce20dc84f9.png
[Center 3]: /images/20220528/eb7d3754d6614241b11127c31807c6f8.png
[Center 4]: /images/20220528/07a7a35ae4824b788f750c0de11285e7.png
[Center 5]: /images/20220528/a9eff7a7ddef428da865d28aa07a0f0b.png
[Center 6]: https://img-blog.csdn.net/20151213194433624?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 7]: /images/20220528/066331dee17f4cb1bb7d7fd83c33c517.png
[Center 8]: https://img-blog.csdn.net/20151213202232811?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 9]: /images/20220528/cda895bf96ef4d7aa1ab8409912663a8.png
[Center 10]: /images/20220528/2f8aaf0257914f89966c272cbcb5cbae.png
[Center 11]: /images/20220528/946c5473aabb408ebc539b793bdd41f6.png
[Center 12]: /images/20220528/455c904e1d6d4145a96c7ba5547f2d60.png
[Center 13]: /images/20220528/f4640276518b4f90aff8ff3658b8c106.png
[Center 14]: /images/20220528/3e5b9772dd7e4925a7a0dafc055d9730.png
[Center 15]: /images/20220528/d9fae7aa350c4ebf875803827891e4f9.png
[Center 16]: /images/20220528/e918edd4a6404a35afdc9200b9b1fb3c.png
[Center 17]: /images/20220528/ae746178b84a47d681eba142a7ebfc87.png
[Center 18]: /images/20220528/034abedd787b419c86693d22b57b063f.png
[Center 19]: /images/20220528/90dc58f21775406d98f1f2991ef4956d.png
[Center 20]: /images/20220528/d8aa1e4773d14dc3be65edc88238e4f4.png
[Center 21]: /images/20220528/183cfe7d8c724407800560d5a7b026dd.png
[Center 22]: /images/20220528/52f4136a1a8d44a4b5d04429402f3579.png
[Center 23]: /images/20220528/b1d98d0b010f4744b39d371ef2bd93ca.png
[Center 24]: /images/20220528/ea61db8258a74ae98a798db34236779b.png
[Center 25]: /images/20220528/f1730dbc1c7d40599f8428a93a692cd0.png