1、泛微OA开发技巧流程表单HTML扩展开发版本 文档主题(Title)【开发技巧】流程表单HTML扩展开发(推荐:设计器实现设置表单元素的长度)作者(Author)胡顺审批者(To Be Approved By)说明(Comments)文件名称(File Name)【开发技巧】流程表单HTML扩展开发(推荐:设计器实现设置表单元素的长度).doc序号日期版本变更说明修改人注释1. 2017-12-19创建目录功能点刘泰宏2. 2018-2-1完善各模块内容胡顺3. 4. 1. 说明难度:预计时间:1小时涉及代码开发:有目标需求: 此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素
2、的长度。当不得不这么做的时候,请参考该方案进行适当调整。 可以按照客户要求对时间流程表单进行适当改造。流程表单上面布局、校验、样式等功能可以jQuery的方式进行适当改造。知识点:基本信息: 背景知识:1、 在阅读本教程之前,需具备html和JavaScript基本知识。2、 在阅读本教程之前,需具备jsp页面读写的基本能力。最终效果: 通过流程表单HTML设计器实现自定义控制表单元素的长度 实现隐藏表单原始边框 实现表单元素未输入内容时悬浮提醒的效果 html签字节点格式调整(内容在左,署名在右) html签字节点按时间排序并调整格式2. 准备工作1、 准备一台和正式环境一致操作系统的服务器
3、。3. (推荐)实现自主设置表单元素的长度将附件提供的上传到服务器的/css/width/目录下面。3.1. 支持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/文件。如(如图4
4、)。(图4)2. 查看及处理流程界面流程引入css样式文件需要修改ecology/workflow/request/。如(如图4)。(图5)3. 手机端流程界面流程引入css样式文件需要修改ecology/mobile/plugin/1/。如(如图6)。(图6) 4. 实现隐藏表单元素表单边框的需求4.1. 代码块 .excelOuterTable input, .excelOuterTable select, .excelOuterTable .e8_innerShow, .excelOuterTable .e8_outScroll border: 0px !important; 4.2.
5、实现效果例:原生页面(图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,old
6、Val).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名为hold
7、er(如果属性名称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=false; v
8、ar 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:陕西,
9、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; else eady(function() checkCustomize = function() var issubmit=false; if(jQuery
10、(#field11359).attr(checked) 提醒:选择框已经选中!); issubmit=true; else 提醒:选择框未选择!); return issubmit; );7. html打印时解决签字意见多个空格问题7.1. 代码块将以下代码块放在ecologyworkflowrequest文件中,如下图:jQuery(document).ready(function() jQuery(.span_mc).each(function() var a=(jQuery(this).html(); emove(); pan_mc).next(br).remove(); pan_mc)
11、.parent().find(br).remove(); ); );7.2. 实现效果例:原生界面删除空的签字意见和一个换行符删除空的签字意见和全部换行符8. (推荐)多内容区域多节点签字意见排序8.1. 多个签字节点按时间先后正序排序1. 将以下代码放在ecologyworkflowrequest (已办)和ecologyworkflowrequest (待办),文件中,如下图:2. .excelTempDiv .td_edesign .remark display: none; .excelTempDiv .td_edesign .span_mc display: block !impor
12、tant; .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
13、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. 在需要自主设置排序的单元格设置class名为remark(如果属性名称class已经存在,需在原有名称后空格后添加remark) 。注: class名为remark,不可
14、更改。具体效果如下图:8.2. 多个签字节点按时间先后倒序排序1. 将以下代码放在ecologyworkflowrequest (已办)和ecologyworkflowrequest (待办)文件中,如下图:.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()
15、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) r
16、eturn - ; ); 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. (推荐)html表单签字节点格式调整9.1. html签字节点格式调整为“内容居左,署名居右”以下调整的格式为:
17、内容在居左,署名居右:将以下代码放在ecologyworkflowrequest (已办)和ecologyworkflowrequest (待办) 、ecologyworkflowrequest(打印),文件中(可根据需求只添加其中某一文件代码)如下图:.excelTempDiv .td_edesign .span_mc display: block !important;text-align: right;.excelTempDiv .td_edesign .span_mc span:first-child display: block;text-align: left;.excelTemp
18、Div .td_edesign .span_mc img:first-child display: block;text-align: left;max-height: 100px;$(document).ready(function() emark).parent().find(br).remove(); );9.2. 实现效果原生界面:修改后:内容居左,署名居右;11. 多内容区域签字签字意见按时间排序 . 按时间先后顺序排序并调整格式将以下代码放在ecologyworkflowrequest (已办)和ecologyworkflowrequest (待办),文件中.excelTempDi
19、v .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() onSortDesc(); ); var onSortDesc = function() var ul = jQuery(.remark); f
20、or(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(.re
21、mark).find(br).remove(); jQuery(.remark).show(); 效果如下:. 按时间先后倒序排序并调整格式将以下代码放在ecologyworkflowrequest (已办)和ecologyworkflowrequest (待办),文件中.excelTempDiv .td_edesign .remark display: none; /*排序前隐藏内容*/.excelTempDiv .td_edesign .span_mc display: block !important;text-align: right;.excelTempDiv .td_edesign
22、 .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(); 实现效果效果如下:
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1