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

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

总体来讲,自定义表单功能概括起来如下:

表单预览,动态报表展示(列表数据展示)

表单数据填报,支持多数据表同时填报,一对多数据表填报,单表多条数据批量填报等

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

二、自定义表单开发实例

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

1)创建自定义表单模板

2)设计表单

3)添加数据源

数据源类型分为两种(Java类正在积极实现中):

●数据库表

数据库表为直接指定该表单数据列填报时对应的数据库表

●动态SQL

主键作为查询条件,值从请求中的参数id中获取,获取方法格式为${id}。

4)生成表单

咱们以添加的“ds_1”数据源为例

5)预览表单

刷新列表后,选择添加的表单,点击“预览”,进入查看界面,分别选择三种模式进行操作。

进入该表单数据库,找到刚添加的数据的id,进入预览模式,输入id即可进行修改及查看,以“查看模式”为例:

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

2.复杂表单(一对多关系的多表实例)

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

环节。

1)添加表单

从表的列表控件设置界面:

2)表单预览

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

三、表单控件简介

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

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

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

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

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

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

以下拉框为例进行讲解:

3.宏控件

4.列表控件

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

5.POPUP控件

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

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

THE END
1.BootstrapHTML(五)图像基础样式图片变圆形bootstrap在之前的博客中,我们已经详细了解了 Bootstrap5 中诸多实用的组件和样式类,比如徽章与表格等,它们在网页布局和内容展示方面发挥着重要作用。 在这篇文章里,我们将深入探讨Bootstrap5 中图像相关的样式类,看看如何利用它们打造出更美观、更符合网页设计需求的图片展示效果。 https://blog.csdn.net/2402_83322742/article/details/144368546
2.Bootstrap5复羊与单羊菜鸟教程Bootstrap5 复选框与单选框 如果您希望用户从预设选项列表中选择任意数量的选项,可以使用复选框: 实例 [mycode3 type='html'] Option 1 [/mycode3] 尝试一下 » 复选框通过使用 class='form-check' 来确保标签和复选框有适当边距。 .form-check-label 类https://www.runoob.com/bootstrap5/bootstrap5-form-check-radio.html
3.Bootstrap5复羊与单羊Bootstrap5中文教程如果您希望用户从预设选项列表中选择任意数量的选项,可以使用复选框:<!DOCTYPE html> Bootstrap5 实例 https://m.w3cschool.cn/bootstrap5/bootstrap5-checkbox-and-radio-box.html
4.前端框架Bootstrap表单和图片引入bootstrap样式前 Paste_Image.png 引入bootstrap样式后 Paste_Image.png 5.复选框和单选框 //设置复选框,在一行 体育 音乐 例子 Paste_Image.png 引入bootstrap样式前 Paste_Image.png 引入bootstrap样式后 Paste_Image.png //设置禁用的复选框 音乐 例子 Paste_Image.png 引入bootstraphttps://www.jianshu.com/p/cf7d9a60496c
5.Bootstrap复羊,单羊美化特效插件描述:本特效是一款使用Font Awesome 字体图标来对Bootstrap复选框和单选按钮进行美化的CSS样式特效的代码。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。 使用方法 引入css 1 2 3 js 1 2 3 4 5 6 function changeState(el) { if (el.readOnly) el.checked=el.readOnly=falsehttps://www.jq22.com/jquery-info11319
6.Bootstrap5保姆级教程(十五):表单1.9 复选框与单选框 1.9.1 创建复选框 如果您希望用户从预设选项列表中选择任意数量的选项,可以使用复选框: 复选框.form-check-label 类添加到标签元素,.form-check 容器内添加 .form-check-input 类来设置复选框的样式。以下三个复选框,第一个默认选中,最后一个禁止选择:Option 1https://developer.aliyun.com/article/1497543
7.BootstrapV3.3.4组件通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。 按钮组中的工具提示和弹出框需要特别的设置 当为.btn-group中的元素应用工具提示或弹出框时,必须指定container: 'body'选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失https://www.iteye.com/blog/zzc1684-2217835
8.光年后台管理模板(LightYearAdmin)是一个基于Bootstrapv3.32019.03.30 修正bootstrap-datetimepicker图标bug,调整一些样式 2019.03.28 新增主题配色切换 颜色切换,主要针对logo,顶部,侧边栏 目前只在首页页面增加切换,并且未将设置存储到cookie 2019.03.25 微调单选框和复选框禁用下的颜色 2019.03.22 调整侧边栏隐藏/显示操作,开关改为一直可见,侧边栏自动隐藏临界值调整为1024pxhttps://gitee.com/len/Light-Year-Admin-Template
9.H+后台主题UI框架Bootstrap Table 778 Bootstrap table displays data in a tabular format and offers rich support to radio, checkbox, sort, pagination and so on. asDatepicker 779 A jQuery datepicker plugin for best . asColorpicker 780 A jQuery colorpicker for best . 行样式 ID 姓名 性别 评分 ID 姓名https://ks.hneao.cn/table_bootstrap.html