CN106202016A - 基于Bootstrap的自定义表单系统 - Google Patents
基于Bootstrap的自定义表单系统 Download PDFInfo
- Publication number
- CN106202016A CN106202016A CN201610526066.3A CN201610526066A CN106202016A CN 106202016 A CN106202016 A CN 106202016A CN 201610526066 A CN201610526066 A CN 201610526066A CN 106202016 A CN106202016 A CN 106202016A
- Authority
- CN
- China
- Prior art keywords
- list
- configuration
- layout
- information
- query result
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000013499 data model Methods 0.000 claims abstract description 16
- 230000000007 visual effect Effects 0.000 claims abstract description 8
- 238000013461 design Methods 0.000 claims description 10
- 230000002596 correlated effect Effects 0.000 claims 1
- 238000013523 data management Methods 0.000 abstract description 2
- 230000000694 effects Effects 0.000 description 6
- 238000012423 maintenance Methods 0.000 description 4
- 238000003860 storage Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 238000000034 method Methods 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000003631 expected effect Effects 0.000 description 1
- 230000014759 maintenance of location Effects 0.000 description 1
- 230000004899 motility Effects 0.000 description 1
- 230000008439 repair process Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/186—Templates
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了基于Bootstrap的自定义表单系统，属于表单数据管理技术领域，包括定义系统提供的表单元素控件，包括表单可视化编辑器，表单元素控件配置信息支持灵活的可扩展属性；表单基础信息和布局配置，以图形化界面和可拖动的组件来完成表单元素控件的选择和拖放，提供实时预览功能，展现表单缩略图；表单呈现，根据配置的表单元素和布局，正确的显示表单信息；表单的查询结果列表配置，根据表单配置信息，提供该表单查询结果列表中要显示的列及其相关的配置；表单实体数据模型动态创建，根据表单配置信息动态生成数据模型。本发明灵活便捷的配置用户需要的表单，支持PC电脑和移动终端都能兼容的表单呈现功能。
Description
技术领域
本发明涉及表单数据管理技术领域，具体地说是基于Bootstrap的自定义表单系统。
背景技术
随着移动互联网和智能手机的普及，广大用户访问互联网的习惯已由电脑转为通过移动终端来进行与生活工作相关的活动。如：移动办公、移动商务等。在我们的日常生活和工作中，随处可见各种填写表单的场景。例如：通信运营商的故障工单系统，都是由若干内容和格式不同的表单元素构成，运维人员只需根据故障填写相应的工单，就可发起一次修复故障的派遣单。这些工单的开发，主要有2种形式：
1、针对每个表单的内容，进行单一定制开发，即：每个表单都要开发一系列的数据模型存储、表单呈现逻辑。
2、提供预定义好的表单布局模版，由用户根据需要选择表单的布局并配置相应的表单元素，从而构成一张表单。
传统方式定义出的表单已不能更好的支持移动终端使用了。由此可知现有技术方案主要缺点包括以下几个方面：
1.对移动终端的支持度不好
首先，传统的表单呈现方式，多针对大屏幕PC电脑显示器开发，因此在这些设备上显示效果好，但是移动终端由于屏幕相对较小，传统表单在移动终端设备上显示效果较差。例如：在PC电脑显示器上全屏显示的一张表单，在通过移动终端访问时，会出现大幅度的滚动条，而拖动滚动条对于移动终端，尤其是手机来说，是很不方便的。因此会降低易用性。
2.表单布局和配置灵活性低
第一，针对不同表单单一开发其数据存储、表单呈现逻辑的方式存在开发工作量大，表单配置更改时修改量大，不易于维护，无法灵活配置表单布局等问题。
第二，针对提供预定义表单布局模版，再通过选定模版来确定表单布局的方式存在布局模版需要预定义，配置灵活度低，预定义模版内容可能与用户实际需求有差距等问题。
3.表单实体数据模型需先在数据库中建立
表单对应的存储数据的数据模型，需要先在数据库中创建。如果表单元素属性变更，数据模型中需要人工修改和维护。
发明内容
本发明的技术任务是针对以上不足之处，提供基于Bootstrap的自定义表单系统，灵活便捷的配置用户需要的表单，其具备配置灵活，同时支持PC电脑和移动终端都能兼容的表单呈现功能。
本发明解决其技术问题所采用的技术方案是：
基于Bootstrap的自定义表单系统，包括：
定义系统提供的表单元素控件，包括表单可视化编辑器，通过灵活的配置信息来定义表单元素控件的类型、数据格式， 表单元素控件配置信息支持灵活的可扩展属性；
表单基础信息和布局配置，以图形化界面和可拖动的组件来完成表单元素控件的选择和拖放，提供实时预览功能，展现表单缩略图；
表单呈现，根据配置的表单元素和布局，正确的显示表单信息，支持在移动终端采用流式布局正确的展现表单信息；
表单的查询结果列表配置，根据表单配置信息，提供该表单查询结果列表中要显示的列及其相关的配置，根据查询结果列表配置信息，生成该表单的查询结果列表；
表单实体数据模型动态创建，根据表单配置信息，动态生成数据模型。
对表单可视化编辑器进行功能区域划分，包括：已配置表单列表区域，可用表单控件列表区域，表单设计区域，表单控件属性配置区域，表单布局实时预览区域；通过设计器，新建表单，并编辑其基础信息；在基础信息保存后，继续选择想要使用的控件并拖放到设计区域，对该控件的相关属性进行个性化配置，该操作可重复进行，直到用户认为表单提供的功能达到预期；期间用户可根据实时预览图，调整控件属性或拖动调整各个控件的显示顺序；待配置好表单布局后，在查询结果列表配置选项卡中配置该表单的查询列表需要显示的列及其个性化配置，如果不配置，则默认显示全部表单元素属性。
对已配置的表单，根据其配置数据，生成该表单的编辑、查询呈现页面模版，其中使用Bootstrap技术对表单布局和查询结果列表进行流式布局控制，从而保证每个表单的呈现页面。
本发明的基于Bootstrap的自定义表单系统和现有技术相比，具有以下有益效果：
配置灵活、便捷，本发明的布局、表单元素的选定及配置均采用可视化配置。只需在可视化设计器中拖动需要使用的控件放置在设计区，并配置该控件的相应属性即可完成配置；可以通过实时预览功能，动态拖动已配置表单元素控件实现表单控件的显示顺序排序，配置十分灵活、方便；
表单元素控件配置扩展性高，系统中提供的可用表单元素控件本身定义了一些常用的属性配置，以满足日常需求，如果在使用中需要增加其他配置，只需在控件配置定义中增加扩展配置属性信息，即可完成，无需再修改代码。因此，本发明有很高的扩展性、灵活性；
对移动终端呈现显示兼容性高，由于引入Bootstrap技术提供的流式布局，本发明配置的表单，不仅在PC电脑端显示效果良好，而且对移动终端的显示效果提供良好的兼容性，从而为移动办公、移动商务等基于移动终端的操作，提供便捷的服务，满足越来越多的用户对移动终端使用的需求；
表单实体数据模型动态生成，维护便捷，维护复杂度低，本发明中配置的表单，在发布后，会自动根据表单配置信息生成实体数据模型，无需在数据库中预先定义数据模型。因此对表单数据模型的日常维护便捷度高、维护复杂度低。
具体实施方式
下面结合具体实施例对本发明作进一步说明。
基于Bootstrap的自定义表单系统，包括：
定义系统提供的表单元素控件，包括表单可视化编辑器，通过灵活的配置信息来定义表单元素控件的类型、数据格式， 表单元素控件配置信息支持灵活的可扩展属性；
表单基础信息和布局配置，以图形化界面和可拖动的组件来完成表单元素控件的选择和拖放，提供实时预览功能，展现表单缩略图；
表单呈现，根据配置的表单元素和布局，正确的显示表单信息，支持在移动终端采用流式布局正确的展现表单信息；
表单的查询结果列表配置，根据表单配置信息，提供该表单查询结果列表中要显示的列及其相关的配置，根据查询结果列表配置信息，生成该表单的查询结果列表；
表单实体数据模型动态创建，根据表单配置信息，动态生成数据模型。
对表单可视化编辑器进行功能区域划分，包括：已配置表单列表区域，可用表单控件列表区域，表单设计区域，表单控件属性配置区域，表单布局实时预览区域；通过设计器，新建表单，并编辑其基础信息；在基础信息保存后，继续选择想要使用的控件并拖放到设计区域，对该控件的相关属性进行个性化配置，该操作可重复进行，直到用户认为表单提供的功能达到预期；期间用户可根据实时预览图，调整控件属性或拖动调整各个控件的显示顺序；待配置好表单布局后，在查询结果列表配置选项卡中配置该表单的查询列表需要显示的列及其个性化配置，如果不配置，则默认显示全部表单元素属性。
对已配置的表单，根据其配置数据，生成该表单的编辑、查询呈现页面模版，其中使用Bootstrap技术对表单布局和查询结果列表进行流式布局控制，从而保证每个表单的呈现页面。
基于Bootstrap的自定义表单系统，
定义可用表单元素控件及其属性；
EasyUI实现对表单可视化设计器布局的呈现，包括已配置表单列表、可用组件列表、设计区域、表单元素组件属性配置区域等功能；
实现拖拽可用组件列表中相应控件放置设计区域，并对该控件属性进行配置和保存的功能；
对设计区域已放置的组件进行拖动排序并保存的功能；
实现在配置表单元素组件时显示实时预览的功能；
实现表单查询结果列表配置功能，方便用户定义需要显示在列表中的属性；
通过Bootstrap、JavaWeb等技术实现对已配置好的表单及其编辑、查询界面进行呈现的功能；
通过Java提供的相关技术，动态生成表单数据模型；
使用本发明来配置的表单，用户可根据自己预期的效果来配置表单布局和表单元素。用户可灵活的控制每个表单元素的各种配置，并根据实时预览效果，方便灵活的调整占用的列数，控件之间的显示顺序等。如果系统提供的表单元素控件中需要增加额外的配置项，只需在该控件的扩展配置属性中增加该配置项就能完成，无需额外编写程序来完成。因此本发明的配置灵活性高，易用性高，易于维护。并且由于本发明在表单显示引入了Bootstrap流式布局技术，使得表单显示页面既支持PC电脑端访问，又能为移动终端提供良好的显示效果。因此本发明对终端兼容性高。表单的数据存储模型，由系统动态创建和维护，无需人工修改和维护。
通过上面具体实施方式，所述技术领域的技术人员可容易的实现本发明。但是应当理解，本发明并不限于上述的具体实施方式。在公开的实施方式的基础上，所述技术领域的技术人员可任意组合不同的技术特征，从而实现不同的技术方案。
除说明书所述的技术特征外，均为本专业技术人员的已知技术。
Claims (3)
1.基于Bootstrap的自定义表单系统，其特征在于包括：
定义系统提供的表单元素控件，包括表单可视化编辑器，通过灵活的配置信息来定义表单元素控件的类型、数据格式， 表单元素控件配置信息支持灵活的可扩展属性；
表单基础信息和布局配置，以图形化界面和可拖动的组件来完成表单元素控件的选择和拖放，提供实时预览功能，展现表单缩略图；
表单呈现，根据配置的表单元素和布局，正确的显示表单信息，支持在移动终端采用流式布局正确的展现表单信息；
表单的查询结果列表配置，根据表单配置信息，提供该表单查询结果列表中要显示的列及其相关的配置，根据查询结果列表配置信息，生成该表单的查询结果列表；
表单实体数据模型动态创建，根据表单配置信息，动态生成数据模型。
2.根据权利要求1所述的基于Bootstrap的自定义表单系统，其特征在于对表单可视化编辑器进行功能区域划分，包括：已配置表单列表区域，可用表单控件列表区域，表单设计区域，表单控件属性配置区域，表单布局实时预览区域；通过设计器，新建表单，并编辑其基础信息；在基础信息保存后，继续选择想要使用的控件并拖放到设计区域，对该控件的相关属性进行个性化配置，该操作可重复进行，直到用户认为表单提供的功能达到预期；期间用户可根据实时预览图，调整控件属性或拖动调整各个控件的显示顺序；待配置好表单布局后，在查询结果列表配置选项卡中配置该表单的查询列表需要显示的列及其个性化配置，如果不配置，则默认显示全部表单元素属性。
3.根据权利要求1所述的基于Bootstrap的自定义表单系统，其特征在于对已配置的表单，根据其配置数据，生成该表单的编辑、查询呈现页面模版，其中使用Bootstrap技术对表单布局和查询结果列表进行流式布局控制，从而保证每个表单的呈现页面。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610526066.3A CN106202016A (zh) | 2016-07-06 | 2016-07-06 | 基于Bootstrap的自定义表单系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610526066.3A CN106202016A (zh) | 2016-07-06 | 2016-07-06 | 基于Bootstrap的自定义表单系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106202016A true CN106202016A (zh) | 2016-12-07 |
Family
ID=57466372
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610526066.3A Pending CN106202016A (zh) | 2016-07-06 | 2016-07-06 | 基于Bootstrap的自定义表单系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106202016A (zh) |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106610856A (zh) * | 2016-12-22 | 2017-05-03 | 金蝶软件（中国）有限公司 | 一种页面控件设置方法及装置 |
| CN107544806A (zh) * | 2017-09-04 | 2018-01-05 | 江苏中威科技软件系统有限公司 | 可视化表单绘制方法 |
| CN107861926A (zh) * | 2016-12-28 | 2018-03-30 | 平安科技（深圳）有限公司 | 单证模板配置方法及装置 |
| CN108959458A (zh) * | 2018-06-15 | 2018-12-07 | 南京国通智能科技有限公司 | 数据生成和使用方法、系统、介质及计算机设备 |
| CN110286908A (zh) * | 2019-07-01 | 2019-09-27 | 广州凡科互联网科技股份有限公司 | 一种基于控件式自定义表单的方法 |
| CN110413976A (zh) * | 2019-08-01 | 2019-11-05 | 南京信业能源科技有限公司 | 一种所见即所得的动态表单应用方式 |
| CN112131847A (zh) * | 2020-09-27 | 2020-12-25 | 北京北信源软件股份有限公司 | 基于React的可视化表单生成方法及系统 |
| CN112506506A (zh) * | 2020-10-30 | 2021-03-16 | 福建亿能达信息技术股份有限公司 | 一种电子病历浏览器页面的配置方法、装置、设备和介质 |
| CN112651718A (zh) * | 2020-12-31 | 2021-04-13 | 新奥数能科技有限公司 | 一种基于cim设备缺陷的动态表单处理方法及装置 |
| CN113626901A (zh) * | 2021-08-13 | 2021-11-09 | 北京南凯自动化系统工程有限公司 | 一种轨道交通基于Bootstrap的自定义工作流流程设计器 |
| CN113656487A (zh) * | 2021-07-28 | 2021-11-16 | 北京数码大方科技股份有限公司 | 信息系统中的对象数据展示方法及对象数据展示装置 |
| CN114936059A (zh) * | 2022-05-23 | 2022-08-23 | 北京达佳互联信息技术有限公司 | 媒介资源的展示方法、装置、电子设备及存储介质 |
-
2016
- 2016-07-06 CN CN201610526066.3A patent/CN106202016A/zh active Pending
Cited By (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106610856A (zh) * | 2016-12-22 | 2017-05-03 | 金蝶软件（中国）有限公司 | 一种页面控件设置方法及装置 |
| CN107861926A (zh) * | 2016-12-28 | 2018-03-30 | 平安科技（深圳）有限公司 | 单证模板配置方法及装置 |
| CN107544806A (zh) * | 2017-09-04 | 2018-01-05 | 江苏中威科技软件系统有限公司 | 可视化表单绘制方法 |
| CN108959458B (zh) * | 2018-06-15 | 2022-02-18 | 南京国通智能科技有限公司 | 数据生成和使用方法、系统、介质及计算机设备 |
| CN108959458A (zh) * | 2018-06-15 | 2018-12-07 | 南京国通智能科技有限公司 | 数据生成和使用方法、系统、介质及计算机设备 |
| CN110286908A (zh) * | 2019-07-01 | 2019-09-27 | 广州凡科互联网科技股份有限公司 | 一种基于控件式自定义表单的方法 |
| CN110413976A (zh) * | 2019-08-01 | 2019-11-05 | 南京信业能源科技有限公司 | 一种所见即所得的动态表单应用方式 |
| CN112131847A (zh) * | 2020-09-27 | 2020-12-25 | 北京北信源软件股份有限公司 | 基于React的可视化表单生成方法及系统 |
| CN112506506A (zh) * | 2020-10-30 | 2021-03-16 | 福建亿能达信息技术股份有限公司 | 一种电子病历浏览器页面的配置方法、装置、设备和介质 |
| CN112506506B (zh) * | 2020-10-30 | 2022-11-11 | 福建亿能达信息技术股份有限公司 | 一种电子病历浏览器页面的配置方法、装置、设备和介质 |
| CN112651718A (zh) * | 2020-12-31 | 2021-04-13 | 新奥数能科技有限公司 | 一种基于cim设备缺陷的动态表单处理方法及装置 |
| CN113656487A (zh) * | 2021-07-28 | 2021-11-16 | 北京数码大方科技股份有限公司 | 信息系统中的对象数据展示方法及对象数据展示装置 |
| CN113626901A (zh) * | 2021-08-13 | 2021-11-09 | 北京南凯自动化系统工程有限公司 | 一种轨道交通基于Bootstrap的自定义工作流流程设计器 |
| CN113626901B (zh) * | 2021-08-13 | 2024-04-30 | 北京南凯自动化系统工程有限公司 | 一种轨道交通基于Bootstrap的自定义工作流流程设计器 |
| CN114936059A (zh) * | 2022-05-23 | 2022-08-23 | 北京达佳互联信息技术有限公司 | 媒介资源的展示方法、装置、电子设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106202016A (zh) | 基于Bootstrap的自定义表单系统 | |
| US11042279B2 (en) | Generating graphical marks for graphical views of a data source | |
| US10521771B2 (en) | Interactive organization visualization tools for use in analyzing multivariate human-resource data of organizations | |
| US9105118B2 (en) | Galaxy views for visualizing large numbers of nodes | |
| CN105653644B (zh) | 一种页面构造器及页面构造方法 | |
| JP5892746B2 (ja) | 個別化コンテンツ・レイアウトのための方法、システム、およびプログラム（個別化コンテンツ・レイアウトのためのシステムおよび方法） | |
| CN110377858A (zh) | 一种可视化拖拽生成动态表单页面的系统及方法 | |
| CN105956830A (zh) | 一种基于j2ee框架的企业级可视化应用开发平台 | |
| CN103294711A (zh) | 一种确定网页中的页面元素的方法以及装置 | |
| US10448227B2 (en) | Mobile database access application development system and method | |
| CN106202358A (zh) | 一种推荐应用程序的方法及终端 | |
| CN105787034A (zh) | 数据展示的方法与装置 | |
| US20100088619A1 (en) | Interactive visualisation design time | |
| CN104679391B (zh) | 智能手表的图标显示方法及装置 | |
| CN102314414A (zh) | 可配置的主明细数据处理表格的实现方法 | |
| CN104123298B (zh) | 产品缺陷的分析方法和设备 | |
| CN102024182A (zh) | 资产信息管理系统 | |
| CN106779576A (zh) | 一种业务字段的配置方法 | |
| CN103873548B (zh) | 服务提供设备以及提供用户界面的方法 | |
| CN109164968A (zh) | 基于列表的交互方法以及装置 | |
| CN102868746B (zh) | 实现移动信息化的方法 | |
| CN108304114A (zh) | 一种可定制的列表交互系统 | |
| CN103795799A (zh) | 一种远程监控方法与系统 | |
| CN104199741A (zh) | 一种用于云计算环境的虚拟数据管理方法 | |
| CN107656733A (zh) | 一种业务对象的可视化处理方法和系统 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20161207 |