泛微OA【开发技巧】流程表单HTML扩展开发(推荐：设计器实现设置表单元素的长度)

流程表单HTML扩展开发31/31泛微武汉耕聚，持续向上的力量！仅限阅读请勿传播当您阅读本方案时，即表示您同意不传播本方案的所有内容仅限阅读请勿传播当您阅读本方案时，即表示您同意不传播本方案的所有内容流程表单HTML设计器流程表单HTML设计器实现自定义控制表单元素的长度及其他常见需求实现案例版本v0.2文档简要信息:文档主题(Title)【开发技巧】流程表单HTML扩展开发（推荐：设计器实现设置表单元素的长度）作者(Author)胡顺审批者(ToBeApprovedBy)说明(Comments)文件名称(FileName)【开发技巧】流程表单HTML扩展开发（推荐：设计器实现设置表单元素的长度）.doc文档版本历史:序号日期版本变更说明修改人注释2017-12-190.1创建目录功能点刘泰宏2018-2-10.2完善各模块内容胡顺目录1. 说明 62. 准备工作 73. 实现自主设置表单元素的长度 73.1. 支持PC端及手机端HMTL模式流程表单（单个流程） 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. 多个签字节点按时间先后正序排序 219.2. 多个签字节点按时间先后倒序排序 249.3.实现效果 2610. html签字节点格式调整 2710.1. html签字节点格式调整为“内容居左，署名居右” 2710.2. 实现效果 2811.html签字按时间排序并调整格式 2911.1按时间先后顺序排序并调整格式 2911.2.按时间先后倒序排序并调整格式 30说明难度：★★★☆☆预计时间：1小时涉及代码开发：有目标需求：此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。当不得不这么做的时候，请参考该方案进行适当调整。可以按照客户要求对时间流程表单进行适当改造。流程表单上面布局、校验、样式等功能可以jQuery的方式进行适当改造。知识点：基本信息：背景知识：在阅读本教程之前,需具备html和JavaScript基本知识。在阅读本教程之前,需具备jsp页面读写的基本能力。最终效果：通过流程表单HTML设计器实现自定义控制表单元素的长度实现隐藏表单原始边框实现表单元素未输入内容时悬浮提醒的效果html签字节点格式调整（内容在左，署名在右）html签字节点按时间排序并调整格式准备工作准备一台和正式环境一致操作系统的服务器。（推荐）实现自主设置表单元素的长度将附件提供的width.css上传到服务器的/css/width/目录下面。支持PC端及手机端HMTL模式流程表单（单个流程）在代码块中单个流程引入css样式文件<LINKhref="/css/width/width.css"type=text/cssrel=STYLESHEET>如（如图1）。（图1）在需要自主设置长度单元格式设置class例如图2里面的classw50表示设置这个框子里面的input长度为50px。如果设置为w100则限制长度为100px，具体效果如图3（图2）（图3）HMTL模式流程引入样式文件（一劳永逸）新建流程界面流程引入css样式文件<LINKhref="/css/width/width.css"type=text/cssrel=STYLESHEET>需要修改ecology/workflow/request/AddRequestIframe.jsp文件。如（如图4）。（图4）查看及处理流程界面流程引入css样式文件<LINKhref="/css/width/width.css"type=text/cssrel=STYLESHEET>需要修改ecology/workflow/request/ManageRequestNoFormIframe.jsp。如（如图4）。（图5）手机端流程界面流程引入css样式文件<LINKhref="/css/width/width.css"type=text/cssrel=STYLESHEET>需要修改ecology/mobile/plugin/1/client.jsp。如（如图6）。（图6）实现隐藏表单元素表单边框的需求代码块<style>.excelOuterTableinput,.excelOuterTableselect,.excelOuterTable.e8_innerShow,.excelOuterTable.e8_outScroll{border:0px!important;}</style>实现效果例：原生页面（图7）开发修改后：实现表单未输入内容时悬浮提醒的效果此方法只适用于输入框提示。代码块1.在代码块中插入代码<scripttype="text/javascript">$(document).ready(function(){ inputTipText();});functioninputTipText(){$("div[class*=holder]input").each(function(){if($(this).val()==""){varoldVal=$(this).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(function(){$(this).css({"color":"#000"})});}});}</script>在需要自主设置提示内容的单元格设置class名为holder（如果属性名称class已经存在，需在原有名称后空格后添加holder），以及设置自定义属性为提示内容data-holder的值，例如图8里面的classw50表示设置这个输入框的提示内容为“请输入标题”，如图8。注：class名为holder，自定义属性名为data-holder，不可更改。具体效果如图9（图8）实现效果例：原生界面开发修改后：（图9）实现提交时校验身份证号码的需求代码块<scripttype="text/javascript">jQuery(document).ready(function(){checkCustomize=function(){varissubmit=false;varcard=jQuery("#field11365").val();issubmit=IdentityCodeValid(card);returnissubmit;};});functionIdentityCodeValid(code){varcity={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:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};vartip="";varpass=true;if(!code||!/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)){tip="身份证号格式错误";pass=false;}elseif(!city[code.substr(0,2)]){tip="地址编码错误";pass=false;}else{//18位身份证需要验证最后一位校验位if(code.length==18){code=code.split('');//∑(ai×Wi)(mod11)//加权因子varfactor=[7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];//校验位varparity=[1,0,'X',9,8,7,6,5,4,3,2];varsum=0;varai=0;varwi=0;for(vari=0;i<17;i++){ai=code[i];wi=factor[i];sum+=ai*wi;}varlast=parity[sum%11];if(parity[sum%11]!=code[17]){tip="身份证号码校验位错误";pass=false;}}}if(!pass)window.top.Dialog.alert("提醒："+tip+"!");returnpass;}</script>实现效果实现某个check框设置为必填的需求代码块jQuery(document).ready(function(){checkCustomize=function(){varissubmit=false;if(jQuery("#field11359").attr("checked")){window.top.Dialog.alert("提醒：选择框已经选中!");issubmit=true;}else{window.top.Dialog.alert("提醒：选择框未选择!");}returnissubmit;}});html打印时解决签字意见多个空格问题代码块将以下代码块放在ecology\workflow\request\PrintRequest.jsp文件中，如下图：<scripttype="text/javascript">jQuery(document).ready(function(){ jQuery(".span_mc").each(function(){ vara=jQuery.trim(jQuery(this).html()); //console.log("====>"+a); if(""==a){ $(this).remove(); //删除全部br jQuery(".span_mc").next("br").remove();//删除空签字意见的下一个br //jQuery(".span_mc").parent().find("br").remove(); } });});</script>实现效果例：原生界面删除空的签字意见和一个换行符删除空的签字意见和全部换行符（推荐）多内容区域多节点签字意见排序多个签字节点按时间先后正序排序将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办），文件中，如下图：

<style>.excelTempDiv.td_edesign.remark{display:none;}.excelTempDiv.td_edesign.span_mc{display:block!important;}.excelTempDiv.td_edesign.span_mcspan{display:block;}</style><script>$(document).ready(function(){onSortDesc();});varonSortDesc=function(){varul=jQuery('.remark');for(vari=0;i<ul.length;i++){varlis=jQuery('.remark:eq('+i+')').children('.span_mc');varux=[];for(varj=0;j<lis.length;j++){vartmp={};tmp.dom=lis[j];varremindTime=lis[j].innerHTML.substring(lis[j].innerHTML.length-20);varstr=remindTime.toString();tmp.date=newDate(str.replace(/-/g,'/'));ux.push(tmp);}ux.sort(function(a,b){returna.date-b.date;});for(varg=0;g<ux.length;g++){ul[i].appendChild(ux[g].dom);}jQuery('.remark').find('br').remove();jQuery('.remark').show();}}</script>在需要自主设置排序的单元格设置class名为remark（如果属性名称class已经存在，需在原有名称后空格后添加remark）。注：class名为remark，不可更改。具体效果如下图：多个签字节点按时间先后倒序排序将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办）文件中，如下图：<style>.excelTempDiv.td_edesign.remark{display:none;}.excelTempDiv.td_edesign.span_mc{display:block!important;}.excelTempDiv.td_edesign.span_mcspan{display:block;}</style><script>$(document).ready(function(){onSortDesc();});varonSortDesc=function(){varul=jQuery('.remark');for(vari=0;i<ul.length;i++){varlis=jQuery('.remark:eq('+i+')').children('.span_mc');varux=[];for(varj=0;j<lis.length;j++){vartmp={};tmp.dom=lis[j];varremindTime=lis[j].innerHTML.substring(lis[j].innerHTML.length-20);varstr=remindTime.toString();tmp.date=newDate(str.replace(/-/g,'/'));ux.push(tmp);}ux.sort(function(a,b){returnb.date-a.date;});for(varg=0;g<ux.length;g++){ul[i].appendChild(ux[g].dom);}jQuery('.remark').find('br').remove();jQuery('.remark').show();}}</script>（图2）2在需要自主设置排序的单元格设置class名为remark（如果属性名称class已经存在，需在原有名称后空格后添加remark）。注：class名为remark，不可更改。具体效果如下图：9.3.实现效果按时间先后顺序排序，如下图（推荐）html表单签字节点格式调整html签字节点格式调整为“内容居左，署名居右”以下调整的格式为：内容在居左，署名居右：将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办）、ecology\workflow\request\PrintRequest.jsp（打印），文件中（可根据需求只添加其中某一文件代码）如下图：<style>.excelTempDiv.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;}</style><script>$(document).ready(function(){//删除所有的换行jQuery('.remark').parent().find('br').remove();});</script>实现效果原生界面:修改后：内容居左，署名居右；11.多内容区域签字签字意见按时间排序11.1.按时间先后顺序排序并调整格式将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办），文件中<style>.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;}</style><script>$(document).ready(function(){onSortDesc();});varonSortDesc=function(){varul=jQuery('.remark');for(vari=0;i<ul.length;i++){varlis=jQuery('.remark:eq('+i+')').children('.span_mc');varux=[];for(varj=0;j<lis.length;j++){vartmp={};tmp.dom=lis[j];varremindTime=lis[j].innerHTML.substring(lis[j].innerHTML.length-20);varstr=remindTime.toString();tmp.date=newDate(str.replace(/-/g,'/'));ux.push(tmp);}ux.sort(function(a,b){returna.date-b.date;});for(varg=0;g<ux.length;g++){ul[i].appendChild(ux[g].dom);}jQuery('.remar