《泛微OA开发技巧流程表单HTML扩展开发推荐设计器实现设置表单元素地长度》由会员分享，可在线阅读，更多相关《泛微OA开发技巧流程表单HTML扩展开发推荐设计器实现设置表单元素地长度（38页珍藏版）》请在金锄头文库上搜索。
1、word仅限阅读 请勿传播当您阅读本方案时，即表示您同意不传播本方案的所有内容流程表单HTML设计器实现自定义控制表单元素的长度与其他常见需某某现案例文档主题(Title)【开发技巧】流程表单HTML扩展开发推荐：设计器实现设置表单元素的长度作者(Author)胡顺审批者(To Be Approved By)说明(ments)文件名称(File Name)【开发技巧】流程表单HTML扩展开发推荐：设计器实现设置表单元素的长度.doc序号日期版本变更说明修改人注释1.2017-12-19创建目录功能点X泰宏2.2018-2-1完善各模块内容胡顺3.4.目录1.说明62.准备工作73.实现自主设置
2、表单元素的长度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.多个签字节点按时间
3、先后倒序排序249.3. 实现效果2610.html签字节点格式调整2710.1. html签字节点格式调整为“内容居左，署名居右2710.2. 实现效果2811. html签字按时间排序并调整格式2911.1 按时间先后顺序排序并调整格式2911.2. 按时间先后倒序排序并调整格式301. 说明难度：预计时间：1小时涉与代码开发：有目标需求： 此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。当不得不这么做的时候，请参考该方案进展适当调整。l 可以按照客户要求对时间流程表单进展适当改造。流程表单上面布局、校验、样式等功能可以jQuery的方式进展适当改造。知识点：根本
4、信息： 背景知识：1、 在阅读本教程之前,需具备html和JavaScript根本知识。2、 在阅读本教程之前,需具备jsp页面读写的根本能力。最终效果：l 通过流程表单HTML设计器实现自定义控制表单元素的长度l 实现隐藏表单原始边框l 实现表单元素未输入内容时悬浮提醒的效果l html签字节点格式调整内容在左，署名在右l html签字节点按时间排序并调整格式2. 准备工作1、 准备一台和正式环境一致操作系统的服务器。3. 推荐实现自主设置表单元素的长度将附件提供的width.css上传到服务器的/css/width/目录下面。3.1. 支持PC端与手机端HMTL模式流程表单单个流程1. 在
5、代码块中单个流程引入css样式文件如如图1。图12. 在需要自主设置长度单元格式设置class 例如图2 里面 的class w50 表示设置这个框子里面的input长度为50px。如果设置为w100 如此限制长度为100px，具体效果如图3图2图33.2. HMTL模式流程引入样式文件一劳永逸1. 新建流程界面流程引入css样式文件 需要修改ecology/workflow/request/AddRequestIframe.jsp文件。如如图4。图42. 查看与处理流程界面流程引入css样式文件需要修改ecology/workflow/request/ManageRequestNoFormI
6、frame.jsp。如如图4。图53. 手机端流程界面流程引入css样式文件需要修改ecology/mobile/plugin/1/client.jsp。如如图6。图64. 实现隐藏表单元素表单边框的需求4.1. 代码块.excelOuterTableinput,.excelOuterTableselect,.excelOuterTable .e8_innerShow,.excelOuterTable .e8_outScroll border: 0px !important; 4.2. 实现效果例：原生页面图7开发修改后：5. 实现表单未输入内容时悬浮提醒的效果此方法只适用于输入框提示。5.1
7、. 代码块$(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).css(color:#888); $(this) .css(color:#888) .focus(function() if(
8、$(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名为holder如果属性名称class已经存在，需在原有名称后空格后添加holder，以与设置自定义属性为提示内容data-holder的值，例如图
9、8 里面 的class w50 表示设置这个输入框的提示内容为“请输入标题， 如图8。注： class名为holder，自定义属性名为data-holder，不可更改。具体效果如图9图85.2. 实现效果例：原生界面开发修改后：图96. 实现提交时校验某某的需求6.1. 代码块jQuery(document).ready(function() checkCustomize = function() var issubmit=false; var card=jQuery(#field11365).val(); issubmit = IdentityCodeValid(card); return
10、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:某某,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.split(); /(aiWi)(mod 11) /加权因子
