zoukankan      html  css  js  c++  java
  • .NET 开源表单设计器: SlickMaster开源表单设计器快速使用指南

    前言:在企业数据处理过程中,经常需要通过定制表单来输入业务数据。由于涉及的数据比较离散,并不同于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

  • 相关阅读:
    hadoop中namenode发生故障的处理方法
    开启虚拟机所报的错误:VMware Workstation cannot connect to the virtual machine. Make sure you have rights to run the program, access all directories the program uses, and access all directories for temporary fil
    Hbase的安装与部署(集群版)
    分别用反射、编程接口的方式创建DataFrame
    用Mapreduce求共同好友
    SparkSteaming中直连与receiver两种方式的区别
    privot函数使用
    Ajax无刷新显示
    使用ScriptManager服务器控件前后台数据交互
    数据库知识
  • 原文地址:https://www.cnblogs.com/slickflow/p/8832924.html
Copyright © 2011-2022 走看看