前言:在企业数据处理过程中,经常需要通过定制表单来输入业务数据。由于涉及的数据比较离散,并不同于ERP系统的紧密关联数据。假如由开发人员每个增加页面,工作量会比较大,后期后期的维护很升级也耗费时间和精力。所以表单设计器是一个实现动态表单的解决办法,用户无需重复编写表单代码就可以管理表单和存储表单数据。
1. 表单设计器
表单设计器是一款基于Bootstrap3风格的WEB应用,操作过程描述主要是将左侧面板控件拖动到表单编辑区域进行排版,每个控件可以编辑对应的数据库字段属性,常见属性有:字段类型,输入格式,控件名称等。等所有界面字段编辑保存后,生成表单模板的HTML文本。从而可以预览正式的表单加载页面。这样在表单集成业务应用系统中,生成正式的运行页面。在运行阶段,页面控件的输入数值可以被保存在后端对应的数据库表中。
1.1 控件类型
常见的控件类型主要有:输入文本框,下拉框,单选按钮,复选按钮,多选列表,命令按钮和数据表格等。其中如文本等类型的控件对应数据库的输入字段,而如按钮类型的控件只是在界面上显示而已,并不对应于数据库的字段。
1.2 HTML内容
表单定义内容被存储成HTML内容,便于表单后期解析加载。其中HTML的Bootstrap框架样式和脚本文件只需要记录路径就可以。通过表的设计器上的预览功能界面上,就可以看到完整的HTML输出内容和页面布局。
1.3 高级控件功能实现
a) 文件上传组件
表单附件是依附于表单的文档数据,比如WORD、EXCEL、PDF和JPEG文件等。在表单设计器控件中,文件上传组件采用了第三方组件FineUpload完成这一控件功能。表单定义的HTML内容中包含了上传组件类型,在表单解析器中将会加载FineUpload控件的样式和脚本,并通过上传页面完整实现文件上传到后端服务器的过程。
文件上传到服务器端后,可以对接用户自有的文件系统,也可以比如阿里云或其它云端存储系统。
b) 数据表格组件
在一个表单中为了展现关联数据,可以设置数据表格控件来读取数据库其它表单实体数据。数据表格采用ag-grid控件,主要是考虑复杂数据格式的处理和编辑。
1.4 表单解析器
表单解析器是把表单定义的HTML内容重新加载到页面DIV控件中,对于简单控件类型,直接加载预留的控件格式定义就可以,但是对于高级控件,如文件上传和数据表格控件,则需要额外读取这些控件的样式或者脚本,或者其它标准定义好的页面,从而完成这些控件的所实现的表单高级功能。
2. 表单数据存储
常见的表单数据存储有XML格式,或者预留的多列数据库结构定义以及EAV模型存储。在SlickMaster表单设计器项目中,优先采用了EVA模型,主要考虑的是系统的数据存储和后期读取效率的平衡。EAV模型也被知名电商公司Magento应用于产品数据定义,确实很好地解决了表单定义、表单数据存储和表单数据查询等关键问题。
2.1 EAV模型解释
EAV是Entity-Attribute-Value的缩写,用于存储表单实体、属性定义和属性数值。跟传统关系型数据库不同的是:实际表数据库存储时是key-value格式的行记录存储,而关系型数据库是多列数据存储。
2.2 表单数据行列转置
数据读取虽然可以通过行记录方法读取出来,其中一行读取一条属性名称和属性数值。但是通常的行记录是希望包含多列数据同时拼凑出一条。所以数据库记录需要行列转置(Pivot)来实现表单数据实体的读取。虽然属性不是固定对象字段类型,但是仍然可以通过.NET的dynamic类型来操作处理。再有,这些动态类型的实体数据,在前端展现也可以通过每次动态生成的列标题来加载展现,最终实现了数据的用户友好体验展现。
3. 表单和工作流引擎的集成
表单可以跟引擎组件集成在一起完成文档的审批流转。其中表单数据的保存、接收、流转、撤销、退回、废弃和结束等通用按钮都是可以被标准化定义出来。而表单解析器则是通过把表单设计器定义好的表单HTML内容加载在动态表单的展现区域。
4. 总结:
表单设计器用于解决常见的比如调查问卷填写,或企业管理数据的录入和维护,其主要功能是渲染生成HTML表单,存储结构化数据。在高级应用功能是集成工作流引擎组件,完成表单审批流转。
5. DEMO
演示地址:http://demo.slickflow.com/smd/
6. 社区版源代码
SlickMaster项目开源地址:
http://github.com/besley/slickmaster
7. 企业版授权说明
1) Demo仅作为功能演示使用,如需获取产品完整源代码和开发文档,请申请企业版商业授权。
2) QQ群:233248778
3) EMail: sales@ruochisoft.com