网页表单文档设计及技术实现

在很多业务流程应用中，业务审批单的样式、内容多变，然而系统对业务表单数据并不敏感，因此，不使用对应的关系型数据表，而采用NoSQL技术来优化设计。因为NoSQL无需事先为要存储的数据建立字段，随时可以存储自定义的数据格式。按NoSQL的特性，可以灵活进行schema结构（列定义）的修改，理论上应该可以很好支持这些多样表单的持久化保存。基于上述原因，业务审批单采用网页表单文档设计。

网页表单设计

首先，我们看一看在HTML表单元素（对象）中使用自定义属性的示例：

<input fieldid="name" fieldtype="char" size=50>名称</input><br>
通过自定义属性“fieldtype”来定义数据类型。<br>
<input fieldid="old" fieldtype="number" size=20 value="42">年龄</input><br>

网页表单数据字段定义

为了避免浏览器兼容性问题，通过自定义属性的方式来定义表单文档数据项，定义规则如下：

属性名称 作用说明 备注
fieldid 数据字段名称 避免与id冲突，单独命名
fieldtype 数据字段类型 支持主流number、text、datetime等
fieldsize 字段长度 主要是定义number、text等长度
fieldname 字段名称 定义中文名称
subtable 子表的列数 适用于嵌套多行子表结构，在table控件中定义
subid 子表的列名定义 适用于嵌套多行子表结构

对应JSON数据格式如下：

{数据字段名称1:value1,数据字段名称2:value2,数据字段名称n
:valuen}

网页表单数据选择列表的数据定义

待续…

主从结构，动态增加数据行

如图所示，在HTML文档中，表单中一对多的从表（多行输入数据的table）定义如下：

<button id="testtable" type="button" onclick="insertRow()">测试插入一行</button><br>

<table id="dynamictable" fieldid="subdatas" subtable="3" border="1" cellspacing="0" width="400">
  <tr>
    <td>数据名称</td><td>数据类型</td><td>数值</td>
  </tr>
  <tr>
    <td><input type="text" subid="fieldid" subcol=0 name="fieldid" size=50></td>
    <td><input type="text" subid="fieldtype" subcol=1 name="fieldtype" size=20></td>
    <td><input type="text" subid="fieldvalue" subcol=2 name="fieldvalue" size=20></td>
  </tr>
</table>

使用JavaScript技术实现的动态添加一行的代码如下：

//定义插入一行表格的函数
function insertRow(){
  var dytb_id = ‘dynamictable‘;
  var dy_row_num = document.getElementById(dytb_id).rows.length;
  //取table中第二行单元格集合
  var dy_row = document.getElementById(dytb_id).rows[1].cells;
  //在table末尾，追加一行
  var dytb=document.getElementById(dytb_id).insertRow(dy_row_num);

  for (i = 0;i<dy_row.length; i++){
    var dy_td = dytb.insertCell(i);
    dy_td.innerHTML = dy_row[i].innerHTML;
  }
}

通过上面示例，在表单文档设计中，需要定义规则如下：

  • 动态增加行首先定义表头，再定义出一行输入控件；
  • 增加行的识别定义，用以确认是从表多行数据；
  • 每个单元格的定义，与表单数据字段定义方式一样。

网页表单解析

虽然通过网页文档做为审批表单，但也需要支持简捷的数据识别和简易的统计查询，这里采用MongoDB数据库做为底层数据库支撑。

解析目的及用处：

  • 解析文档中的数据字段及数值，并形成JSON数据；
  • 在文档中定义数据字段、业务规则，用以与流程衔接，需要解析定义；
  • 在文档中的定义，避开关系型数据复杂的管理，此模型可以追溯早期Lotus Notes/Domino数据库模型。

文档解析方式为通过遍历方式解析表单，表单数据形式涉及到单表及主从结构。而且，需要表单快速开发工具支撑。

网页表单定义解析

网页表单定义解析主要用于获取表单数据模型，用以为数据统计分析模型提供服务，形成数据接口模型。

网页表单业务数据解析

演示界面如下图所示。

HTML文档定义如下：

<body>
<h1>表单元素遍历测试 JavaScript</h1>
<p id="demo" >这是表单数据解析示例.</p>
<div>
<input id="name" fieldtype="char">名称</input><br>
通过自定义属性“fieldtype”来定义数据类型。<br><br>

<button id="testtable" type="button" onclick="insertRow()">测试插入一行</button>&nbsp&nbsp
<button id="test" type="button" onclick="getallelem()">测试解析表单数据</button><br><br>
<input fieldid="title" fieldtype="text" value="测试申请单" size=100>标题</input><br>
<input fieldid="old" fieldtype="number" value="42" size=100>年龄</input><br>
多行子表单，字段属性定义为“subid”，表单按数据字段属性定义，标识出含有子表，属性为“subtable”单独定义列数，其他不变。
<table id="dynamictable" fieldid="subdatas" subtable="3" border="1" cellspacing="0" width="400">
<tr>
<td>数据名称</td><td>数据类型</td><td>数值</td>
</tr>
<tr>
<td><input type="text" subid="fieldid" subcol=0 name="fieldid" size=50></td>
<td><input type="text" subid="fieldtype" subcol=1 name="fieldtype" size=20></td>
<td><input type="text" subid="fieldvalue" subcol=2 name="fieldvalue" size=20></td>
</tr>
</table>
<br><input fieldid="flag" fieldtype="text" value="end" size=100>结束标志</input><br>
</div>
</body>

提取表单数据到JSON格式字符串的JavaScript函数如下所示：

function getallelem(){
    var elems = document.getElementsByTagName("*");
    var ret_json = "";  //定义返回JSON数据字符串
    var n = 0;          //JSON数据起点
    var m = 0;          //JSON嵌套子文档起点
    var subcolumns = 0;  //多行表单列数
    var subrows = 0;     //多行表单数据行数
    var row_num = 1;     //默认是一行数据

    for(var i=0;i<elems.length;i++){
        if (elems[i].hasAttribute("fieldid") && !(elems[i].hasAttribute("subtable"))){
            if (n == 0){
                ret_json += "\"" +elems[i].getAttribute("fieldid") + "\":\"" + elems[i].value + "\"";
            }else{
                ret_json += ",\"" + elems[i].getAttribute("fieldid") + "\":\"" + elems[i].value + "\"";
            }
            n++;
        }else{
            if (elems[i].hasAttribute("subtable")){
                subcolumns = elems[i].getAttribute("subtable");
                var tbl_id = elems[i].id;
                //取表单数据行数
                subrows = document.getElementById(tbl_id).rows.length - 1;
                ret_json += "\",\"" + elems[i].getAttribute("fieldid") + "\":[{\"";
                m = 0;
            }else{
                if (elems[i].hasAttribute("subid") && (m < subcolumns)){
                    if (m == 0){
                        ret_json += elems[i].getAttribute("subid") + "\":\"" + elems[i].value + "\"";
                    }else{
                        ret_json += ",\"" + elems[i].getAttribute("subid") + "\":\"" + elems[i].value + "\"";
                    }
                    m++;
                }else{
                    if (elems[i].hasAttribute("subid")){
                        ret_json += "},{\"" + elems[i].getAttribute("subid") + "\":\"" + elems[i].value + "\"";
                        m = 1;
                        row_num++;
                    }
                }
                if ((row_num == subrows) && (row_num>0) && (m == subcolumns)){
                    ret_json += "}]";
                    m=0,row_num=0;
                }
            }
        }
    }
    alert("{" + ret_json + "}");
}

网页表单文档存储

保存操作及事务处理

在保存网页表单文档操作中，需要把文档存储到MongoDB、和关系型数据库，二者不在一个事务中。因此，可以使用Cordys平台自动流程模型进行事务管理。

Created with Rapha?l 2.1.2函数函数HTMLHTML事务管理流程事务管理流程存储MongoDB环节存储MongoDB环节存储业务实例环节存储业务实例环节解析HTML文档（）生成JSON数据（）启动流程（）调用存储表单数据Webservice（）调用存储业务实例数据Webservice（）

保存操作及非事务管理方式

Created with Rapha?l 2.1.2函数函数HTMLHTML非事务管理非事务管理存储MongoDB环节存储MongoDB环节存储业务实例环节存储业务实例环节解析HTML文档（）生成JSON数据（）保存文档操作（）调用存储表单数据Webservice（）调用存储业务实例数据Webservice（）回写保存完毕Webservice（）

由于作者水平有限，欢迎反馈交流。

参考：

JavaScript遍历HTML表单元素及表单定义 肖永威 2015.5

Cordys BOP 4平台开发实战——MongoDB提供文档服务（1） 肖永威 2015.4

时间： 2024-10-23 14:22:25

网页表单文档设计及技术实现的相关文章

OpenCASCADE(一) VS2017+OpenCASCADE+MFC 下载配置安装运行单文档程序画个基本图形

原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/12368154.html 一.下载OpenCASCADE 官网下载是: http://www.opencascade.org/getocc/download/loadocc/ 我的百度云已经下载好的是: 链接:https://pan.baidu.com/s/1D-fw8vspKTOZ8GmAGBSVGw 提取码:mzp3 下载后运行完毕就是这样: 二.VS2017 MFC单文档配置OpenCA

VC项目开发之单文档多视图实现-非分割窗口[转]

k_eckel:http://www.mscenter.edu.cn/blog/k_eckel 多视图是VC开发中经常要用到的技术之一,一般地实现单文档多视图有两种方式 1)通过视图分割的技术(使用CSplitterWnd实现),将窗口分割为多个部分,每个部分显示各自显示不同的视图,这种技术实现起来比较简单,并且相关的资料也很多. 2)通过一个文档关联多个视图,窗口显示整个视图. 第二种实现较第一种复杂,这里给出详细的实现方法. Step 1:使用VC 6.0新建一个Project,命名为:Mu

单文档程序结构

创建过程 下面展示建一个单文档程序的过程,在MFC Application Wizard中第一步做如下选择 不妨Project style选择MFC stardard,Visual style and colors选择Windows Native/Default,其他的选项将创建不同样式的界面. 下一步Compound document support按默认选择None: 下一步是Document Template String文档模板字符串的设置,用于设置文档视结构的一些属性,如下 各选项的意

C++MFC编程笔记day07 MFC单文档绘图保存、多文档绘图保存

完善绘图例子(day06中的),加上保存功能 1 设计和编写图形类 CShape 1.1 成员变量 CPoint m_ptBegin; CPoint m_ptEnd; UINT m_nType; 1.2 支持序列化 1.2.1 继承自CObject 1.2.2 添加序列化的声明宏和实现宏 1.2.3 重写虚函数Serilize(),在函数中,完成成员变量的序列化 2 由于保存多个图形,引入MFC的集合类CObArray,保存的是CObject 对象的地址. 3 图形数据需要保存到文档类中,在该类

windows程序设计——飞机大战笔记（单文档文件登陆界面）

//////////////2015/07/21//////////////// /////////////by xbw/////////////////////// /////////////环境 VS 2013//////////// 飞机大战做的差不多了,闲来无事加点高大上的东西,关于单文档的登陆界面::: 界面有点丑,但是足够账号登陆了,,先试一把: 还不错吧,该有的都有了:: 下面说一下过程 ...... 首先,我们要在资源视图中创建一个Dialog对话框::: 先大体画一下这个对话框

转:CEF嵌入到单文档mfc

1.下载: http://www.magpcss.net/cef_downloads/下载cef binary 1.1364.1123 windows.zip(可能要FQ,百度goagent教程,最好使用谷歌浏览器FQ下载,因为goagent有chrome的插件) 2.编译: http://dev.chromium.org/developers/how-tos/build-instructions-windows(可能要搭建许多开发环境,考验你网速的时候到了) 如果没法编译,去我的资源下载,就是

MFC学习（七） 单文档程序

1 MFC单文档程序的主要类 (1)文档类(Document) 即应用程序处理的数据对象,文档一般从 MFC 中 CDocument 中派生.CDocument 类用于相应数据文件的读取以及存储 Cview 类所需要观察和处理的信息. (2)视类(View) 视相当于文档在应用程序中的观察窗口,它确定了用户对文档的观察方式和用户编辑文档的方式.对于图形来说视就好比我们进行绘图工作的画布,对图形的操作都是在视上进行的.另外,视类中有一个重要的成员函数 OnDraw() 函数.重载的 OnDraw(

20个jQuery插件，帮你打造完美网页表单

网页表单主要是用来从用户那里收集一些必要的信息,是网页设计中不可或缺的一环.一个设计良好的表单能更有效的获取用户信息,也会给用户带来更好地 使用体 验.基于这一点,很多设计师开始使用jQuery来创建网页表单.而使用jQuery表单插件会让你的网页表单脱颖而出. 为 此,我们收集了一些不同类型的jQuery表单插件和读者分享.在下面这些jQuery表单插件中,有些能改变表单的外观并同时兼容各种浏览 器:有些用于表单验证并方便管理员和用户的操作:还有一些则是非常流行的日历表单和下拉列表表单.我们希

【VC编程技巧】窗体?3.5对单文档或者多文档程序制作启动画面

(一)概要: 文章描述了怎样通过Visual C++ 2012或者Visual C++ .NET,为单文档或者多文档程序制作启动画面.在Microsoft Visual Studio 6.0中对于单文档程序(SDI)我们可以很方便利用微软提供的组件Visual C++ Component (Splash Screen).因为在Microsoft Visual Studio 6.0以后的版本或者Visual C++ .NET没有提供这个组件,我们可以通过自定义对话框来实现Splash Screen