1、 流程表单 HTML 扩展开发1/ 31泛微武汉 耕聚，持续向上的力量！版本 v0.2仅限阅读 请勿传播当您阅读本方案时，即表示您同意不传播本方案的所有内容流程表单 HTML 设计器实现自定义控制表单元素的长度及其他常见需求实现案例流程表单 HTML 扩展开发2/ 31泛微武汉 耕聚，持续向上的力量！文档简要信息:文档主题(Title) 【开发技巧】流程表单 HTML 扩展开发（推荐：设计器实现设置表单元素的长度）作者(Author) 胡顺审批者(To Be Approved By)说明(Comments)文件名称(File Name) 【开发技巧】流程表单 HTML 扩展开发（推荐：设计器实
2、现设置表单元素的长度）.doc文档版本历史:序号 日期 版本 变更说明 修改人 注释1. 2017-12-19 0.1 创建目录功能点 刘泰宏2. 2018-2-1 0.2 完善各模块内容 胡顺3.4.流程表单 HTML 扩展开发3/ 31泛微武汉 耕聚，持续向上的力量！目录1. 说明 62. 准备工作 .73. 实现自主设置表单元素的长度 73.1. 支持 PC 端及手机端 HMTL 模式流程表单（单个流程） .73.2. HMTL 模式流程引入样式文件（一劳永逸） 84. 实现隐藏表单元素表单边框的需求 .114.1. 代码块 114.2. 实现效果 115. 实现表单未输入内容时悬浮提醒
3、的效果 125.1. 代码块 125.2. 实现效果 136. 实现提交时校验身份证号码的需求 .156.1. 代码块 156.2. 实现效果 177. 实现某个 check 框设置为必填的需求 .187.1. 代码块 188. html 打印时解决签字意见多个空格问题 198.1. 代码块 198.2. 实现效果 20流程表单 HTML 扩展开发4/ 31泛微武汉 耕聚，持续向上的力量！9. html 同一节点多个签字节点排序。 .219.1. 多个签字节点按时间先后正序排序 219.2. 多个签字节点按时间先后倒序排序 249.3. 实现效果 .2610. html 签字节点格式调整 .2
4、710.1. html 签字节点格式调整为“内容居左，署名居右” 2710.2. 实现效果 2811. html 签字按时间排序并调整格式 2911.1 按时间先后顺序排序并调整格式 2911.2. 按时间先后倒序排序并调整格式 .30流程表单 HTML 扩展开发5/ 31泛微武汉 耕聚，持续向上的力量！1.说明难度：预计时间：1 小时涉及代码开发：有目标需求：此案例适用项目人员通过流程表单 HTML 设计器实现自定义控制表单元素的长度。 当不得不这么做的时候，请参考该方案进行适当调整。 可以按照客户要求对时间流程表单进行适当改造。流程表单上面布局、校验、样式等功能可以 jQuery 的方式进
5、行适当改造。知识点：基本信息： 背景知识：1、 在阅读本教程之前,需具备 html 和 JavaScript 基本知识。2、 在阅读本教程之前,需具备 jsp 页面读写的基本能力。最终效果： 通过流程表单 HTML 设计器实现自定义控制表单元素的长度 实现隐藏表单原始边框 实现表单元素未输入内容时悬浮提醒的效果 html 签字节点格式调整（内容在左，署名在右） html 签字节点按时间排序并调整格式流程表单 HTML 扩展开发6/ 31泛微武汉 耕聚，持续向上的力量！2.准备工作1、 准备一台和正式环境一致操作系统的服务器。3.（推荐）实现自主设置表单元素的长度将附件提供的 width.css
6、 上传到服务器的/css/width/目录下面。css文 件 .zip3.1. 支持 PC 端及手机端 HMTL 模式流程表单（单个流程）1. 在代码块中单个流程引入 css 样式文件如（如图 1） 。流程表单 HTML 扩展开发7/ 31泛微武汉 耕聚，持续向上的力量！（图 1）2. 在需要自主设置长度单元格式设置 class 例如图 2 里面 的 class w50 表示设置这个框子里面的 input长度为 50px。如果设置为 w100 则限制长度为 100px，具体效果如图 3流程表单 HTML 扩展开发8/ 31泛微武汉 耕聚，持续向上的力量！（图 2）（图 3）3.2. HMTL
7、模式流程引入样式文件（一劳永逸）1. 新建流程界面流程引入 css 样式文件 需要修改 ecology/workflow/request/AddRequestIframe.jsp 文件。如（如图 4） 。流程表单 HTML 扩展开发9/ 31泛微武汉 耕聚，持续向上的力量！（图 4）2. 查看及处理流程界面流程引入 css 样式文件需要修改 ecology/workflow/request/ManageRequestNoFormIframe.jsp。如（如图 4） 。流程表单 HTML 扩展开发10/ 31泛微武汉 耕聚，持续向上的力量！（图 5）3. 手机端流程界面流程引入 css 样式文件
8、需要修改 ecology/mobile/plugin/1/client.jsp。如（如图 6） 。（图 6）流程表单 HTML 扩展开发11/ 31泛微武汉 耕聚，持续向上的力量！4.实现隐藏表单元素表单边框的需求4.1. 代码块.excelOuterTable input,.excelOuterTable select,.excelOuterTable .e8_innerShow,.excelOuterTable .e8_outScroll border: 0px !important; 4.2. 实现效果例：原生页面（图 7）开发修改后：流程表单 HTML 扩展开发12/ 31泛微武汉 耕
9、聚，持续向上的力量！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“,oldVal
10、).css(“color“:“#888“); $(this) .css(“color“:“#888“) 流程表单 HTML 扩展开发13/ 31泛微武汉 耕聚，持续向上的力量！.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()$(th
11、is).css(“color“:“#000“); ); 2. 在需要自主设置提示内容的单元格设置 class 名为 holder（如果属性名称 class 已经存在，需在原有名称后空格后添加 holder） ，以及设置自定义属性为提示内容 data-holder 的值，例如图 8 里面 的class w50 表示设置这个输入框的提示内容为“请输入标题” ， 如图 8。注： class 名为 holder，自定义属性名为 data-holder，不可更改。 具体效果如图 9（图 8）5.2. 实现效果例：原生界面流程表单 HTML 扩展开发14/ 31泛微武汉 耕聚，持续向上的力量！开发修改后：
12、（图 9）流程表单 HTML 扩展开发15/ 31泛微武汉 耕聚，持续向上的力量！6.实现提交时校验身份证号码的需求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:“ 河北
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:“陕西“,62:“甘肃“,63:“ 青海“,64:“宁夏“,65:“新疆“,71:“ 台湾“,81:“香港“,82:“澳门“,91:“国外 “;var tip = “;var pass= true;if
14、(!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.split();/(aiWi)(mod 11)/加权因子var factor = 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8,
15、 4, 2 ;/校验位流程表单 HTML 扩展开发16/ 31泛微武汉 耕聚，持续向上的力量！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 流程表单 HTML 扩展开发17/ 31泛微武汉 耕聚，持续向上的力量！6.2. 实现效果流程表单 HTML 扩展开发18/ 31泛微武汉 耕聚，持续向上的力量！7.实现某个 check 框设置为必填的需求7.1. 代码块jQuery(document).ready(function()checkCustom
16、ize = function()var issubmit=false;if(jQuery(“#field11359“).attr(“checked“)window.top.Dialog.alert(“提醒：选择框已经选中!“);issubmit=true;elsewindow.top.Dialog.alert(“提醒：选择框未选择!“); 流程表单 HTML 扩展开发19/ 31泛微武汉 耕聚，持续向上的力量！return issubmit; );8.html 打印时解决签字意见多个空格问题8.1. 代码块将以下代码块放在 ecologyworkflowrequestPrintRequest.
17、jsp 文件中，如下图：jQuery(document).ready(function()jQuery(“.span_mc“).each(function()var a=jQuery.trim(jQuery(this).html();/console.log(“=“+a);if(“=a)$(this).remove(); /删除全部 brjQuery(“.span_mc“).next(“br“).remove();/删除空签字意见的下一个 br/ jQuery(“.span_mc“).parent().find(“br“).remove();); );流程表单 HTML 扩展开发20/ 31泛
18、微武汉 耕聚，持续向上的力量！8.2. 实现效果例：原生界面删除空的签字意见和一个换行符流程表单 HTML 扩展开发21/ 31泛微武汉 耕聚，持续向上的力量！删除空的签字意见和全部换行符9.（推荐）多内容区域多节点签字意见排序9.1. 多个签字节点按时间先后正序排序1. 将以下代码放在 ecologyworkflowrequest ViewRequestIframe.jsp（已办）和ecologyworkflowrequest WorkflowManageRequestHtml.jsp（待办） ，文件中，如下图：.excelTempDiv .td_edesign .remark displa
19、y: none; .excelTempDiv .td_edesign .span_mc display: block !important; .excelTempDiv .td_edesign .span_mc span display: block; 流程表单 HTML 扩展开发22/ 31泛微武汉 耕聚，持续向上的力量！$(document).ready(function() onSortDesc(););var onSortDesc = function() var ul = jQuery(.remark);for(var i = 0; i 流程表单 HTML 扩展开发23/ 31泛微武
20、汉 耕聚，持续向上的力量！2. 在需要自主设置排序的单元格设置 class 名为 remark（如果属性名称 class 已经存在，需在原有名称后空格后添加 remark） 。注： class 名为 remark，不可更改。具体效果如下图：流程表单 HTML 扩展开发24/ 31泛微武汉 耕聚，持续向上的力量！9.2. 多个签字节点按时间先后倒序排序1. 将以下代码放在 ecologyworkflowrequest ViewRequestIframe.jsp（已办）和ecologyworkflowrequest WorkflowManageRequestHtml.jsp（待办）文件中，如下图：
21、.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 （图 2）2 在需要自主设置排序的单元
22、格设置 class 名为 remark（如果属性名称 class 已经存在，需在原有名称后空格后添加 remark） 。注： class 名为 remark，不可更改。具体效果如下图：流程表单 HTML 扩展开发26/ 31泛微武汉 耕聚，持续向上的力量！9.3. 实现效果按时间先后顺序排序，如下图流程表单 HTML 扩展开发27/ 31泛微武汉 耕聚，持续向上的力量！10. （推荐）html 表单签字节点格式调整10.1. html 签字节点格式调整为“内容居左，署名居右”以下调整的格式为：内容在居左，署名居右：将以下代码放在 ecologyworkflowrequest ViewReque
23、stIframe.jsp（已办）和 ecologyworkflowrequest WorkflowManageRequestHtml.jsp（待办） 、ecologyworkflowrequestPrintRequest.jsp（打印） ，文件中（可根据需求只添加其中某一文件代码）如下图：.excelTempDiv .td_edesign .span_mc display: block !important;text-align: right;.excelTempDiv .td_edesign .span_mc span:first-child display: block;text-alig
24、n: left;.excelTempDiv .td_edesign .span_mc img:first-child display: block;text-align: left;max-height: 100px;$(document).ready(function() /删除所有的换行jQuery(.remark).parent().find(br).remove(););流程表单 HTML 扩展开发28/ 31泛微武汉 耕聚，持续向上的力量！10.2. 实现效果原生界面:修改后：内容居左，署名居右；流程表单 HTML 扩展开发29/ 31泛微武汉 耕聚，持续向上的力量！11. 多内容区
25、域签字签字意见按时间排序 11.1. 按时间先后顺序排序并调整格式将以下代码放在 ecologyworkflowrequest ViewRequestIframe.jsp（已办）和 ecologyworkflowrequest WorkflowManageRequestHtml.jsp（待办） ，文件中.excelTempDiv .td_edesign .remark display: none; /*排序前隐藏内容*/.excelTempDiv .td_edesign .span_mc display: block !important;text-align: right;.excelTem
26、pDiv .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 流程表单 HTML 扩展开发30/ 31泛微武汉 耕聚，持续向上的力量！效果如下：11.2. 按时间先后倒序排序并调整格式将以下代码放在 ecologyworkflowrequest ViewRequestIframe.jsp（已办）和 ecol
27、ogyworkflowrequest WorkflowManageRequestHtml.jsp（待办） ，文件中.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(function() onS
28、ortDesc(););var onSortDesc = 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();tmp.date = new Date(str.replace(/-/g, /);
