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

1、泛微OA开发技巧流程表单HTML扩展开发推荐设计器实现设置表单元素的长度版本 v0.2文档主题(Title)【开发技巧】流程表单HTML扩展开发（推荐：设计器实现设置表单元素的长度）作者(Author)胡顺审批者(To Be Approved By)说明(Comments)文件名称(File Name)【开发技巧】流程表单HTML扩展开发（推荐：设计器实现设置表单元素的长度）.doc序号日期版本变更说明修改人注释2017-12-190.1创建目录功能点刘泰宏2018-2-10.2完善各模块内容胡顺1. 说明 62. 准备工作 73. 实现自主设置表单元素的长度 73.1. 支持PC端及手机端H

2、MTL模式流程表单（单个流程） 73.2. HMTL模式流程引入样式文件（一劳永逸） 84. 实现隐藏表单元素表单边框的需求 114.1. 代码块 114.2. 实现效果 115. 实现表单未输入内容时悬浮提醒的效果 125.1. 代码块 125.2. 实现效果 136. 实现提交时校验身份证号码的需求 156.1. 代码块 156.2. 实现效果 177. 实现某个check框设置为必填的需求 187.1. 代码块 188. html打印时解决签字意见多个空格问题 198.1. 代码块 198.2. 实现效果 209. html同一节点多个签字节点排序。 219.1. 多个签字节点按时间先后

3、正序排序 219.2. 多个签字节点按时间先后倒序排序 249.3. 实现效果 2610. html签字节点格式调整 2710.1. html签字节点格式调整为“内容居左，署名居右” 2710.2. 实现效果 2811. html签字按时间排序并调整格式 2911.1 按时间先后顺序排序并调整格式 2911.2. 按时间先后倒序排序并调整格式 301. 说明难度：预计时间：1小时涉及代码开发：有目标需求： 此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。当不得不这么做的时候，请参考该方案进行适当调整。 可以按照客户要求对时间流程表单进行适当改造。流程表单上面布局、校验

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

5、. 支持PC端及手机端HMTL模式流程表单（单个流程）1. 在代码块中单个流程引入css样式文件如（如图1）。（图1）2. 在需要自主设置长度单元格式设置class 例如图2 里面 的class w50 表示设置这个框子里面的input长度为50px。如果设置为w100 则限制长度为100px，具体效果如图3（图2）（图3）3.2. HMTL模式流程引入样式文件（一劳永逸）1. 新建流程界面流程引入css样式文件 需要修改ecology/workflow/request/AddRequestIframe.jsp文件。如（如图4）。（图4）2. 查看及处理流程界面流程引入css样式文件需要修改e

6、cology/workflow/request/ManageRequestNoFormIframe.jsp。如（如图4）。（图5）3. 手机端流程界面流程引入css样式文件需要修改ecology/mobile/plugin/1/client.jsp。如（如图6）。（图6）4. 实现隐藏表单元素表单边框的需求4.1. 代码块 .excelOuterTable input, .excelOuterTable select, .excelOuterTable .e8_innerShow, .excelOuterTable .e8_outScroll border: 0px !important; 4

7、.2. 实现效果例：原生页面（图7）开发修改后：5. 实现表单未输入内容时悬浮提醒的效果此方法只适用于输入框提示。5.1. 代码块1.在代码块中插入代码$(document).ready(function() inputTipText(););function inputTipText() $(divclass*=holder input) .each(function() if($(this).val() = ) var oldVal=$(this).parent(.holder).attr(data-holder); if($(this).val()=)$(this).attr(value

8、,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(function()$(this).css(color:#000); ); 2. 在需要自主设置提示内容的单元格设置class名为

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

10、e; 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:江西,37:山东,41:河南,42:湖北 ,43:湖南,44:广东,45:广西,46:海南,50:重庆,51:四川,52:贵州,53:云南,54:西藏 ,61

11、:陕西,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) tip = 地址编码错误; pass = false; else /18位身份证需要验证最后一位校验位 if(code.length = 18) code = code

12、.split(); /(aiWi)(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; wi = factori; sum += ai * wi; var last = paritysum % 11; if(paritysum % 11

13、 != code17) tip = 身份证号码校验位错误; pass =false; if(!pass) (提醒：+tip+!); return pass; 6.2. 实现效果7. 实现某个check框设置为必填的需求7.1. 代码块jQuery(document).ready(function() checkCustomize = function() var issubmit=false; if(jQuery(#field11359).attr(checked) (提醒：选择框已经选中!); issubmit=true; else (提醒：选择框未选择!); return issubmit

14、; );8. html打印时解决签字意见多个空格问题8.1. 代码块将以下代码块放在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(.span_mc).next(br).remove(); /删除空签字意见的下一个br / j

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

16、y: 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 = jQuery(.remark:eq( + i + ).chil

17、dren(.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.date - b.date; ); fo

18、r(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，不可更改。具体效果如下图：9.2. 多个签字节点按时间先后倒序排序1. 将以下代码放在ecologyworkflowrequest ViewRequestIframe.jsp（已办）和ecology

19、workflowrequest 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 onSortDesc = function() va

20、r 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(); tmp.date =

21、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） 。注： class名为remark，

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

23、iv .td_edesign .span_mc display: block !important;text-align: right;.excelTempDiv .td_edesign .span_mc span:first-child display: block;text-align: left;.excelTempDiv .td_edesign .span_mc img:first-child display: block;text-align: left;max-height: 100px;$(document).ready(function() /删除所有的换行 jQuery(.r

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

25、_edesign .span_mc display: 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+) var lis = jQuery(.remark:eq( + i +

26、 ).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.date - b.date; ); for(var g = 0; g ux.length; g+) uli.appendChild(uxg.dom); jQuery(.remark).find(br).remove(); jQuery(.remark).show(); 效果如下：11.2. 按时间先后倒序排序并调整格式将以下代码放在ecologyworkflowrequest ViewRequestIframe.jsp（已办）和ecologyworkflowrequest WorkflowManageRequestHtml.jsp（待办），文件中.e