泛微OA【开发技巧】流程表单HTML扩展开发

《泛微OA【开发技巧】流程表单HTML扩展开发》由会员分享，可在线阅读，更多相关《泛微OA【开发技巧】流程表单HTML扩展开发（34页珍藏版）》请在装配图网上搜索。

1、仅限阅读仅限阅读请勿传播请勿传播当您阅读本方案时，即表示您同意不传播本方案的所有内容流程表单 HTML 设计器实现自定义控制表单元素的长度及其他常见需求实现案例版本【开发技巧】流程表单 HTML 扩展开发（推荐：设计器实现设置文档主题(Title)表单元素的长度）作者(Author)胡顺审批者(To Be Approved By)说明(Comments)【开发技巧】流程表单 HTML 扩展开发（推荐：设计器实现设置文件名称(File Name)表单元素的长度）.doc序号日期版本变更说明修改人注释1.2017-12-19创建目录功能点刘泰宏2.2018-2-1完善各模块内容胡顺3.4.目录目录

2、1.1.说明说明.错误!未定义书签。2.2.准备工作准备工作.错误!未定义书签。3.3.（推荐）实现自主设置表单元素的长度（推荐）实现自主设置表单元素的长度.错误!未定义书签。.支持 PC 端及手机端 HMTL 模式流程表单（单个流程）.错误错误!未定义书签。未定义书签。HMTL 模式流程引入样式文件（一劳永逸）.错误错误!未定义书签。未定义书签。4.4.实现隐藏表单元素表单边框的需求实现隐藏表单元素表单边框的需求.错误!未定义书签。.代码块.错误错误!未定义书签。未定义书签。实现效果.错误错误!未定义书签。未定义书签。5.5.实现表单未输入内容时悬浮提醒的效果实现表单未输入内容时悬浮提醒的效

3、果.错误!未定义书签。.代码块.错误错误!未定义书签。未定义书签。实现效果.错误错误!未定义书签。未定义书签。6.6.实现提交时校验身份证号码的需求实现提交时校验身份证号码的需求.错误!未定义书签。.代码块.错误错误!未定义书签。未定义书签。7.7.htmlhtml 打印时解决签字意见多个空格问题打印时解决签字意见多个空格问题.错误!未定义书签。.代码块.错误错误!未定义书签。未定义书签。实现效果.错误错误!未定义书签。未定义书签。8.8.（推荐）多内容区域多节点签字意见排序（推荐）多内容区域多节点签字意见排序.错误!未定义书签。.多个签字节点按时间先后正序排序.错误错误!未定义书签。未定义书

4、签。多个签字节点按时间先后倒序排序.错误错误!未定义书签。未定义书签。.实现效果.错误错误!未定义书签。未定义书签。9.9.（推荐）（推荐）htmlhtml 表单签字节点格式调整表单签字节点格式调整.错误!未定义书签。.html 签字节点格式调整为“内容居左，署名居右”.错误错误!未定义书签。未定义书签。实现效果.错误错误!未定义书签。未定义书签。修改后：内容居左，署名居右；修改后：内容居左，署名居右；.错误!未定义书签。11.11.多内容区域签字签字意见按时间排序多内容区域签字签字意见按时间排序.错误!未定义书签。.按时间先后顺序排序并调整格式.错误错误!未定义书签。未定义书签。.按时间先后

5、倒序排序并调整格式.错误错误!未定义书签。未定义书签。实现效果.错误错误!未定义书签。未定义书签。1.1.说明说明难度：难度：预计时间：预计时间：1 1 小时涉及代码开发：涉及代码开发：有目标需求：目标需求：此案例适用项目人员通过流程表单 HTML 设计器实现自定义控制表单元素的长度。当不得不这么做的时当不得不这么做的时候，请参考该方案进行适当调整。候，请参考该方案进行适当调整。可以按照客户要求对时间流程表单进行适当改造。流程表单上面布局、校验、样式等功能流程表单上面布局、校验、样式等功能可以可以 jQueryjQuery 的方式进行适当改造。的方式进行适当改造。知识点：知识点：基本信息：背景

6、知识：背景知识：1、在阅读本教程之前,需具备 html 和 JavaScript 基本知识。2、在阅读本教程之前,需具备 jsp 页面读写的基本能力。最终效果：最终效果：通过流程表单 HTML 设计器实现自定义控制表单元素的长度实现隐藏表单原始边框实现表单元素未输入内容时悬浮提醒的效果html 签字节点格式调整（内容在左，署名在右）html 签字节点按时间排序并调整格式2.2.准备工作准备工作1、准备一台和正式环境一致操作系统的服务器。3.3.（推荐）实现自主设置表单元素的长度（推荐）实现自主设置表单元素的长度将附件提供的上传到服务器的/css/width/目录下面。css文件.zip3.1.

7、3.1.支支持持 PCPC 端及手机端端及手机端 HMTLHMTL 模式流程表单（单个流程）模式流程表单（单个流程）1.在代码块中单个流程引入 css 样式文件如（如图 1）。（图 1）2.在需要自主设置长度单元格式设置class 例如图 2 里面 的 class w50 表示设置这个框子里面的input 长度为 50px。如果设置为 w100 则限制长度为 100px，具体效果如图 3（图 2）（图 3）3.2.3.2.H HMTLMTL 模式流程引入样式文件（一劳永逸）模式流程引入样式文件（一劳永逸）1.新建流程界面流程引入 css 样式文件需要修改 ecology/workflow/re

8、quest/文件。如（如图 4）。（图 4）2.查 看 及 处 理 流 程 界 面 流 程 引 入css 样 式 文 件 需要修改 ecology/workflow/request/。如（如图 4）。（图 5）3.手机端流程界面流程引入 css 样式文件需要修改 ecology/mobile/plugin/1/。如（如图 6）。（图 6）4.4.实现隐藏表单元素表单边框的需求实现隐藏表单元素表单边框的需求4.1.4.1.代代码块码块 .excelOuterTable input,.excelOuterTable select,.excelOuterTable.e8_innerShow,.exc

9、elOuterTable.e8_outScrollborder:0px!important;4.2.4.2.实实现效果现效果例：原生页面（图 7）开发修改后：5.5.实现表单未输入内容时悬浮提醒的效实现表单未输入内容时悬浮提醒的效果果此方法只适用于输入框提示。5.1.5.1.代代码块码块1.在代码块中插入代码$(document).ready(function();function inputTipText()inputTipText();$(divclass*=holder input).each(function()if($(this).val()=)var oldVal=$(this).

10、parent(.holder).attr(data-holder);if($(this).val()=)$(this).attr(value,oldVal).css(color:#888);$(this).css(color:#888).focus(function()if($(this).val()!=oldVal)$(this).css(color:#000)else$(this).val().css(color:#888).blur(function()if($(this).val()=)$(this).val(oldVal).css(color:#888).keydown(functi

11、on()$(this).css(color:#000););2.在需要自主设置提示内容的单元格设置 class 名为 holder（如果属性名称 class 已经存在，需在原有名称后空格后添加 holder），以及设置自定义属性为提示内容 data-holder 的值，例如图 8 里面 的class w50 表示设置这个输入框的提示内容为“请输入标题”，如图 8。注：class 名为 holder，自定义属性名为 data-holder，不可更改。具体效果如图 9（图 8）5.2.5.2.实实现效果现效果例：原生界面开发修改后：（图 9）6.6.实现提交时校验身份证号码的需求实现提交时校验身份

12、证号码的需求6.1.6.1.代代码块码块jQuery(document).ready(function()checkCustomize=function()var issubmit=false;var card=jQuery(#field11365).val();issubmit=IdentityCodeValid(card);return issubmit;);function IdentityCodeValid(code)var city=11:北京,12:天津,13:河北,14:山西,15:内蒙古,21:辽宁,22:吉林,23:黑龙江,31:上海,32:江苏,33:浙江,34:安徽,35

13、:福建,36:江西,37:山东,41:河南,42:湖北,43:湖南,44:广东,45:广西,46:海南,50:重庆,51:四川,52:贵州,53:云南,54:西藏,61:陕西,62:甘肃,63:青海,64:宁夏,65:新疆,71:台湾,81:香港,82:澳门,91:国外;var tip=;var pass=true;if(!code|!/d6(18|19|20)d2(01-9|112)(01-9|12d|301)d3(d|X)$/(code)tip=身份证号格式错误;pass=false;else if(!city(0,2)tip=地址编码错误;pass=false;elseeady(func

14、tion()checkCustomize=function()var issubmit=false;if(jQuery(#field11359).attr(checked)提醒：选择框已经选中!);issubmit=true;else 提醒：选择框未选择!);return issubmit;);7.7.htmlhtml 打印时解决签字意见多个空格问打印时解决签字意见多个空格问题题7.1.7.1.代代码块码块将以下代码块放在 ecologyworkflowrequest文件中，如下图：jQuery(document).ready(function()jQuery(.span_mc).each(f

15、unction()var a=(jQuery(this).html();emove();pan_mc).next(br).remove();pan_mc).parent().find(br).remove();););7.2.7.2.实实现效果现效果例：原生界面删除空的签字意见和一个换行符删除空的签字意见和一个换行符删除空的签字意见和全部换行符删除空的签字意见和全部换行符8.8.（推荐）多内容区域多节点签字意见排（推荐）多内容区域多节点签字意见排序序8.1.8.1.多个签字节点按时间先后正序排序多个签字节点按时间先后正序排序1.将以下代码放在 ecologyworkflowrequest（已办

16、）和 ecologyworkflowrequest（待办），文件中，如下图：2.excelTempDiv.td_edesign.remark display:none;.excelTempDiv.td_edesign.span_mc display:block!important;.excelTempDiv.td_edesign.span_mc span display:block;$(document).ready(function()onSortDesc(););var onSortDesc=function()var ul=jQuery(.remark);for(var i=0;i ;i

17、+)var lis=jQuery(.remark:eq(+i+).children(.span_mc);var ux=;for(var j=0;j ;j+)var tmp=;=lisj;var remindTime=lisj.(lisj.-20);var str=();=new Date(/-/g,/);(tmp);(function(a,b)return -;);for(var g=0;g ;g+)uli.appendChild(uxg.dom);jQuery(.remark).find(br).remove();jQuery(.remark).show();3.在需要自主设置排序的单元格设

18、置 class 名为 remark（如果属性名称 class 已经存在，需在原有名称后空格后添加 remark）。注：class 名为 remark，不可更改。具体效果如下图：8.2.8.2.多多个签字节点按时间先后倒序排序个签字节点按时间先后倒序排序1.将以下代码放在 ecologyworkflowrequest（已办）和ecologyworkflowrequest（待办）文件中，如下图：.excelTempDiv.td_edesign.remark display:none;.excelTempDiv.td_edesign.span_mc display:block!important;.

19、excelTempDiv.td_edesign.span_mc span display:block;$(document).ready(function()onSortDesc(););var onSortDesc=function()var ul=jQuery(.remark);for(var i=0;i ;i+)var lis=jQuery(.remark:eq(+i+).children(.span_mc);var ux=;for(var j=0;j ;j+)var tmp=;=lisj;var remindTime=lisj.(lisj.-20);var str=();=new Da

20、te(/-/g,/);(tmp);(function(a,b)return -;);for(var g=0;g ;g+)uli.appendChild(uxg.dom);jQuery(.remark).find(br).remove();jQuery(.remark).show();（图 2）2 在需要自主设置排序的单元格设置 class 名为 remark（如果属性名称 class 已经存在，需在原有名称后空格后添加 remark）。注：class 名为 remark，不可更改。具体效果如下图：.实现效果实现效果按时间先后顺序排序，如下图9.9.（推荐）（推荐）htmlhtml 表单签字节点

21、格式调整表单签字节点格式调整9.1.9.1.htmlhtml 签字节点格式调整为“内容居左，署名居右”签字节点格式调整为“内容居左，署名居右”以下调整的格式为：内容在居左，署名居右：将以下代码放在ecologyworkflowrequest（已办）和ecologyworkflowrequest（待办）、ecologyworkflowrequest（打印），文件中（可根据需求只添加其中某一文件代码）如下图：.excelTempDiv.td_edesign.span_mc display:block!important;text-align:right;.excelTempDiv.td_edesi

22、gn.span_mc span:first-child display:block;text-align:left;.excelTempDiv.td_edesign.span_mcimg:first-childdisplay:block;text-align:left;max-height:100px;$(document).ready(function()emark).parent().find(br).remove(););9.2.9.2.实现效果实现效果原生界面:修改后：内容居左，署名居右；11.11.多内容区域签字签字意见按时间排序多内容区域签字签字意见按时间排序.按时间先后顺序排序并

23、调整格式按时间先后顺序排序并调整格式将以下代码放在 ecologyworkflowrequest（已办）和 ecologyworkflowrequest（待办），文件中.excelTempDiv.td_edesign.remark display:none;/*排序前隐藏内容*/.excelTempDiv.td_edesign.span_mc display:block!important;text-align:right;.excelTempDiv.td_edesign.span_mc span display:block;text-align:left;$(document).ready(

24、function()onSortDesc(););var onSortDesc=function()var ul=jQuery(.remark);for(var i=0;i ;i+)var lis=jQuery(.remark:eq(+i+).children(.span_mc);var ux=;for(var j=0;j ;j+)var tmp=;=lisj;var remindTime=lisj.(lisj.-20);var str=();=new Date(/-/g,/);(tmp);(function(a,b)return -;);for(var g=0;g ;g+)uli.appen

25、dChild(uxg.dom);jQuery(.remark).find(br).remove();jQuery(.remark).show();效果如下：.按时间先后倒序排序并调整格式按时间先后倒序排序并调整格式将以下代码放在 ecologyworkflowrequest（已办）和 ecologyworkflowrequest（待办），文件中.excelTempDiv.td_edesign.remark display:none;/*排序前隐藏内容*/.excelTempDiv.td_edesign.span_mc display:block!important;text-align:rig

26、ht;.excelTempDiv.td_edesign.span_mc span display:block;text-align:left;$(document).ready(function()onSortDesc(););var onSortDesc=function()var ul=jQuery(.remark);for(var i=0;i ;i+)var lis=jQuery(.remark:eq(+i+).children(.span_mc);var ux=;for(var j=0;j ;j+)var tmp=;=lisj;var remindTime=lisj.(lisj.-20);var str=();=new Date(/-/g,/);(tmp);(function(a,b)return -;);for(var g=0;g ;g+)uli.appendChild(uxg.dom);jQuery(.remark).find(br).remove();jQuery(.remark).show();实现效果实现效果效果如下：