泛微OA开发技巧流程表单HTML扩展开发设计器实现设置表单元素的长度

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

2、涉及代码开发： 有目标需求：此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。 当不得不这么做的时候，请参考该方案进行适当调整。可以按照客户要求对时间流程表单进行适当改造。流程表单上面布局、校验、样式等功能可以 jQuery的方式进行适当改造。知识点：基本信息： 背景知识：1、 在阅读本教程之前 ,需具备 html和 JavaScript基本知识。2、 在阅读本教程之前 ,需具备 jsp 页面读写的基本能力。最终效果：通过流程表单HTML设计器实现自定义控制表单元素的长度实现隐藏表单原始边框实现表单元素未输入内容时悬浮提醒的效果html签字节点格式调整（内容在左，署名在

3、右）html签字节点按时间排序并调整格式准备工作1、 准备一台和正式环境一致操作系统的服务器。（ 推荐）实现自主设置表单元素的长度将附件提供的width.css上传到服务器的 /css/width/目录下面。支持 PC 端及手机端 HMTL模式流程表单（单个流程）在代码块中单个流程引入css 样式文件 如（如图 1）。（图 1）在需要自主设置长度单元格式设置class例如图 2里面的 classw50 表示设置这个框子里面的input长度为50px。如果设置为w100 则限制长度为100px，具体效果如图3（图 2）（图 3）HMTL 模式流程引入样式文件（一劳永逸）新建流程界面流程引入css

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

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

6、this).parent(.holder).attr(data-holder);if($(this).val()=)$(this).attr(value,oldVal).css(color:#88 8);$(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

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

8、(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:福建 ,36:江

9、西 ,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)$/i.test(code)tip = 身份证号格式错误; pass = false;else if(!citycode.substr(0,2

10、)tip = 地址编码错误 ; pass = false;else/18位身份证需要验证最后一位校验位if(code.length = 18) code = code.split();/ (ai Wi)(mod 11)/加权因子var factor = 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9,10, 5, 8, 4, 2 ;/校验位var parity = 1, 0, X, 9, 8, 7, 6, 5, 4, 3, 2 ;var sum = 0; var ai = 0;var wi = 0;for (var i = 0; i 17; i+)ai = codei;

11、 wi = factori;sum += ai * wi;var last = paritysum % 11; if(paritysum % 11 != code17)tip = 身份证号码校验位错误;pass =false;if(!pass) (提醒： +tip+!); return pass;实现效果实现某个 check框设置为必填的需求代码块jQuery(document).ready(function() checkCustomize = function() var issubmit=false;if(jQuery(#field11359).attr(checked)(提醒：选择框已

12、经选中!); issubmit=true;else(提醒：选择框未选择!);return issubmit;);h tml打印时解决签字意见多个空格问题代码块将以下代码块放在ecologyworkflowrequestPrintRequest.jsp文件中，如下图： jQuery(document).ready(function()jQuery(.span_mc).each(function() var a=jQuery.trim(jQuery(this).html();/console.log(=+a); if(=a)$(this).remove();/删 除 全 部 br jQuery(.

13、span_mc).next(br).remove();/删除空签字意见的下一个br/ jQuery(.span_mc).parent().find(br).remove();););实现效果例：原生界面删除空的签字意见和一个换行符删除空的签字意见和全部换行符（ 推荐）多内容区域多节点签字意见排序多个签字节点按时间先后正序排序1. 将以下代码放在 ecologyworkflowrequest ViewRequestIframe.jsp（已办）和 ecologyworkflowrequest WorkflowManageRequestHtml.jsp（待办），文件中，如下图：2.excelTemp

14、Div .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 ul.length; i+) var lis = jQue

15、ry(.remark:eq( + i + ).children(.span_mc);var ux = ;for(var j = 0; j lis.length; j+) var tmp = ;tmp.dom = lisj;var remindTime = lisj.innerHTML.substring(lisj.innerHTML.length-20);var str = remindTime.toString();tmp.date = new Date(str.replace(/-/g, /); ux.push(tmp);ux.sort(function(a, b) return a.da

16、te - b.date;);for(var g = 0; g ux.length; g+) uli.appendChild(uxg.dom);jQuery(.remark).find(br).remove(); jQuery(.remark).show();3. 在需要自主设置排序的单元格设置 class 名为 remark （如果属性名称 class 已经存在， 需在原有名称后空格后添加 remark ） 。注： class 名为 remark ， 不可更改。 具体效果如下图：多个签字节点按时间先后倒序排序1. 将以下代码放在 ecologyworkflowrequest ViewReque

17、stIframe.jsp（已办）和 ecologyworkflowrequest WorkflowManageRequestHtml.jsp（待办）文件中，如下图：.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 onS

18、ortDesc = function() var ul = jQuery(.remark);for(var i = 0; i ul.length; i+) var lis = jQuery(.remark:eq( + i + ).children(.span_mc);var ux = ;for(var j = 0; j lis.length; j+) var tmp = ;tmp.dom = lisj;var remindTime = lisj.innerHTML.substring(lisj.innerHTML.length-20);var str = remindTime.toString

19、();tmp.date = new Date(str.replace(/-/g, /); ux.push(tmp);ux.sort(function(a, b) return b.date - a.date;);for(var g = 0; g ux.length; g+) uli.appendChild(uxg.dom);jQuery(.remark).find(br).remove(); jQuery(.remark).show();（图 2）2 在需要自主设置排序的单元格设置 class 名为 remark（如果属性名称 class 已经存在，需在原有名称后空格后添加 remark ）

20、。注： class 名为 remark ，不可更改。 具体效果如下图：实现效果按时间先后顺序排序，如下图（推荐） html表单签字节点格式调整html签字节点格式调整为“内容居左，署名居右”以下调整的格式为：内容在居左，署名居右：将以下代码放在ecologyworkflowrequest ViewRequestIframe.jsp（已办） 和 ecologyworkflowrequest WorkflowManageRequestHtml.jsp（待办）、ecologyworkflowrequestPrintRequest.jsp（打印），文件中（可根据需求 只添加其中某一文件代码）如下图：.

21、excelTempDiv .td_edesign .span_mc display: block !important;text-align: right;.excelTempDiv.td_edesign.span_mcspan:first-childdisplay: block;text-align: left;.excelTempDiv.td_edesign.span_mcimg:first-childdisplay:block;text-align: left;max-height: 100px;$(document).ready(function() / 删除所有的换行jQuery(.

22、remark).parent().find(br).remove(););实现效果原生界面 :修改后：内容居左，署名居右；多内容区域签字签字意见按时间排序按时间先后顺序排序并调整格式将以下代码放在 ecologyworkflowrequest ViewRequestIframe.jsp（已办） 和 ecologyworkflowrequest WorkflowManageRequestHtml.jsp（待办），文件中.excelTempDiv .td_edesign .remark display: none; /*排序前隐藏内容*/.excelTempDiv.td_edesign.span_

23、mcdisplay: block !important;text-align: right;.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 ul.length; i+) varlis=jQuery(.remark:eq(+i+ ).children(.span_mc);var

24、 ux = ;for(var j = 0; j lis.length; j+) var tmp = ;tmp.dom = lisj;varremindTime= lisj.innerHTML.substring(lisj.innerHTML.length - 20);var str = remindTime.toString();tmp.date = new Date(str.replace(/-/g, /);ux.push(tmp);ux.sort(function(a, b) return a.date - b.date;);for(var g = 0; g ux.length; g+) uli.appendChild(uxg.dom);jQuery(.remark).find(br).remove(); jQuery(.remark).show();效果如下：按时间先后倒序排序并调整格式将以下代码放在 ecologyworkflowrequest ViewRequestIframe.jsp（已办） 和 ecologyworkflowrequest Wor