《泛微oa【开发技巧】流程表单html扩展开发(推荐：设计器实现设置表单元素长度)》由会员分享，可在线阅读，更多相关《泛微oa【开发技巧】流程表单html扩展开发(推荐：设计器实现设置表单元素长度)（31页珍藏版）》请在金锄头文库上搜索。
1、 流程表单HTML扩展开发仅限阅读 请勿传播当您阅读本方案时，即表示您同意不传播本方案的所有内容流程表单HTML设计器实现自定义控制表单元素的长度及其他常见需求实现案例版本 v0.2文档简要信息:文档主题(Title)【开发技巧】流程表单HTML扩展开发（推荐：设计器实现设置表单元素的长度）作者(Author)胡顺审批者(To Be Approved By)说明(Comments)文件名称(File Name)【开发技巧】流程表单HTML扩展开发（推荐：设计器实现设置表单元素的长度）.doc文档版本历史:序号日期版本变更说明修改人注释1.2017-12-190.1创建目录功能点刘泰宏2.201
2、8-2-10.2完善各模块内容胡顺3.4.目录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.htm
3、l同一节点多个签字节点排序。219.1.多个签字节点按时间先后正序排序219.2.多个签字节点按时间先后倒序排序249.3. 实现效果2610.html签字节点格式调整2710.1. html签字节点格式调整为“内容居左，署名居右”2710.2. 实现效果2811. html签字按时间排序并调整格式2911.1 按时间先后顺序排序并调整格式2911.2. 按时间先后倒序排序并调整格式301. 说明难度：预计时间：1小时涉及代码开发：有目标需求： 此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。当不得不这么做的时候，请参考该方案进行适当调整。l 可以按照客户要求对时间流
4、程表单进行适当改造。流程表单上面布局、校验、样式等功能可以jQuery的方式进行适当改造。知识点：基本信息： 背景知识：1、 在阅读本教程之前,需具备html和JavaScript基本知识。2、 在阅读本教程之前,需具备jsp页面读写的基本能力。最终效果：l 通过流程表单HTML设计器实现自定义控制表单元素的长度l 实现隐藏表单原始边框l 实现表单元素未输入内容时悬浮提醒的效果l html签字节点格式调整（内容在左，署名在右）l html签字节点按时间排序并调整格式2. 准备工作1、 准备一台和正式环境一致操作系统的服务器。3. （推荐）实现自主设置表单元素的长度将附件提供的width.css
5、上传到服务器的/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/AddRequestIframe.jsp文件。如（如图4）。（图4）2
6、. 查看及处理流程界面流程引入css样式文件需要修改ecology/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_outScro
7、ll border: 0px !important; 4.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
8、).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); );
9、2. 在需要自主设置提示内容的单元格设置class名为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 = f
10、unction() 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:江西,37:山东,41:河南,42:湖北 ,43:湖南,44:广东,45:广西,46:海南,50:重庆,
11、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) tip = 地址编码错误; pass = false; else /18位身份证需要验证最后一位校验位 if(code.length = 18) code = code.sp
