文档章节

表单引擎呈现部分-代码实现逻辑结构详解

ccflow-黄志敏
 ccflow-黄志敏
发布于 2018/08/06 19:47
字数 1189
阅读 114
收藏 1

基于上篇文章我们只做了简单了两种设计思想的对比,没有深入说明实现原理。

本章节我们的重点说明表单引擎系统基于关系型数据库设计的实现原理以及CCBPM实现的重点代码结构。

表单引擎系统是由表单设计器和表单解析器和表单模板三部分组成。

表单设计器为表单设计入口,通过表单设计器的表单设计将表单组成元素存储到数据表中,在进行表单展示过程中,通过表单解析器进行对表单模板数据进行解析和拼接,生成网页内容进行展示。

表单设计器

实现原理详解

驰骋工作流引擎-傻瓜表单实现原理

 

代码详解,

在Designer.htm初始化界面中,工具栏按钮直接在表单上进行展示。

新建组件时,弹出FieldTypeList.htm页面。实现对各种类型的组件新增功能。

新建字段时,执行AddF方法,弹出页面。

function AddF() {

    var url = 'FieldTypeList.htm?DoType=AddF&FK_MapData=' + GetQueryString('FK_MapData');

    var h = 500;

    var w = 600;

    var l = (screen.width - w) / 2;

    var t = (screen.height - h) / 2;

    var s = 'width=' + w + ', height=' + h + ', top=' + t + ', left=' + l;

    s += ', toolbar=no, scrollbars=no, menubar=no, location=no, resizable=no';

    var b = window.showModalDialog(url, 'ass', s);

    window.location.href = window.location.href;

}

FieldTypeList.htm页面详解

新建字段时弹出该页面,该接页面在初始化加载时将组件控件进行展示

在点击保存触发时,将控件信息记录到对应的组件数据表中。

控件在数据库中的存储//求出选择的字段类型.

            MapAttr attr = new MapAttr();
            attr.Name = newName;
            attr.KeyOfEn = newNo;
            attr.FK_MapData = this.FK_MapData;
            attr.LGType = FieldTypeS.Normal;
            attr.MyPK = this.FK_MapData + "_" + newNo;
            attr.GroupID = iGroupID;
            attr.MyDataType = fType;

            int colspan = attr.ColSpan;
            attr.Para_FontSize = 12;
            int rows = attr.UIRows;

            if (attr.MyDataType == DataType.AppString)
            {
                attr.UIWidth = 100;
                attr.UIHeight = 23;
                attr.UIVisible = true;
                attr.UIIsEnable = true;
                attr.ColSpan = 1;
                attr.MinLen = 0;
                attr.MaxLen = 50;
                attr.MyDataType = DataType.AppString;
                attr.UIContralType = UIContralType.TB;
                attr.Insert();
                return "url@../../Comm/En.htm?EnName=BP.Sys.FrmUI.MapAttrString&MyPK=" + attr.MyPK;
            }

普通文本类型、日期类型、数值类型、枚举类型、外键类型在Sys_Mapatrr中进行存储。附件控件,在Sys_FrmAttachment附件表中存储。普通标签类型在Sys_FrmLab表中存储。

更多控件类型存储,请参考代码实现。

表单解析器

表单解析器工作原理为从存储组件的数据表中获取存储数据表以及组件表的相互关系,以JSON数据格式返回至展示界面。展示界面介绍JSON数据后通过JS脚本解析,分别对各种控件文本控件、数据控件、日期控件、枚举控件、外键控件、附件控件、明细表控件、审核组件控件等的解析予以不同的字符串拼接展示。最终以htm网页的形式展示出来。

表单解析器代码详解

表单设计器由同一入口文件传入的设计类型判断加载设计器的类型为傻瓜表单设计器还是自由表单设计器。

Designer.htm页面初始化函数如下:

一般处理程序方法实现:

Designer.htm页面加载设计器

使用data接受返回的json数据。

对json里面的三个对象<Sys_Mapdata、Sys_MapAttr、Sysy_GroupField>做拼接table。

普通文本类型、日期类型、数值类型、枚举类型、外键类型的表单实现,在实现过程中将根据控件属性,权限<只读、可编辑、不可见>、默认值填充等进行加载。

 html += "<td class='FDesc'>" + GenerLabel(mapAttr) + "</td>";
 html += "<td ColSpan=" + mapAttr.ColSpan + "><div id='DIV_" + mapAttr.KeyOfEn + "'><input class='form-control' style='width:99%;margin:3px;' maxlength=" + mapAttr.MaxLen + "  name='TB_" + mapAttr.KeyOfEn + "' id='TB_" + mapAttr.KeyOfEn + "' type='text' " + (mapAttr.UIIsEnable == 1 ? '' : ' disabled="disabled"') + "/></div></td>";
 html += "</tr>";

附件控件的表单实现

var frameUrl = "<iframe ID='F" + athEn.MyPK + "' frameborder=0 style='padding:0px;border:0px;width:100%;height:" + athEn.H + "px;'  leftMargin='0'  topMargin='0' src='" + src + "'  scrolling='auto'  /></iframe>";
return "<tr><td colspan=4 id='TD" + athEn.MyPK + "' style='width:" + athEn.H + "px;'>" + frameUrl + "</td></tr>";

明细表、从表控件展示

var src = "MapDtlDe.htm?DoType=Edit&FK_MapData=" + pageParam.fk_mapdata + "&FK_MapDtl=" + dtl[0].No;
var frameUrl = "<iframe ID='F" + dtl[0].No + "' frameborder=0 style='padding:0px;border:0px;width:100%;height:" + dtl[0].H + "px;'  leftMargin='0'  topMargin='0' src='" + src + "'  scrolling='auto'  /></iframe>";
return "<tr><td colspan=4 id='TD" + dtl[0].No + "'>" + frameUrl + "</td></tr>";

审核组件控件展示

var src = "../../WorkOpt/WorkCheck.htm?WorkID=0&FK_Flow=" + fk_flow + "&FK_Node=" + nodeID + "&FK_MapData=" + pageParam.fk_mapdata;
var frameUrl = "<iframe ID='FWC' frameborder=0 style='padding:0px;border:0px;width:100%;height:" + h + "px;' leftMargin='0' topMargin='0' src='" + src + "' scrolling='auto'  /></iframe>";
return "<tr><td colspan=4 style='width:100%;height:" + h + "px;' id='FWC' >" + frameUrl + "</td></tr>";

更多实现过程,请参考代码。

© 著作权归作者所有

共有 人打赏支持
ccflow-黄志敏

ccflow-黄志敏

粉丝 3
博文 23
码字总数 13776
作品 0
济南
程序员
私信 提问
基于Linux环境的Web.py框架介绍

前言 客户端和Web服务器的交互过程可以概括为:Web服务器接收客户端的请求后,由Web应用服务器对浏览器的请求进行处理,将生成的响应传递给Web服务器,再由Web服务器返回给客户端。为了简化W...

元宵大师
2018/07/27
0
0
驰骋工作流引擎 - ccflow

开源的驰骋工作流引擎简介 驰骋工作流引擎研发与2003年,具有.net与java两个版本,它们代码结构、数据库结构、设计思想、功能组成、操作手册完全相同。流程表单模版两个版本完全通用。 CCFl...

ccflow
2009/06/05
0
20
小程序 发送模板消息的功能实现

☹. 背景 微信消息通知 的区别: 此处参考京东购物的消息通知如下(也就是在下想要实现的效果): ❶ 前期准备 ①. 首先,微信小程序官方文档为我们提供了指导 --- 【发送模板消息】 我们可以...

moTzxx
2018/09/05
0
0
我的python学习--第十天

上午: 作业讲解 div的使用 bootstrap的调用 下午: 扒页面 jinja2模板继承 系统流程 return false的作用(见第九天) 模态框 一、复习 1、一个完整开发项目要素 1.MVC----控制器(逻辑端),视图...

yaoliang833
2016/09/05
0
0
Trailblazer 简介

Trailblazer 位于Rails顶端,是,thin web 服务器的一个层(layer)。它温和的实施封装,有直观的代码结构,并且提供面向对象的架构。 坚果壳内:trailblazer允许你跟操作数据对象一样编写无逻...

oschina
2014/11/29
1K
4

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
42分钟前
0
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
4
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部