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

流程表单HTML扩展开发1/31泛微武汉耕聚，持续向上的力量！版本v0.2仅限阅读请勿传播当您阅读本方案时，即表示您同意不传播本方案的所有内容流程表单HTML设计器实现自定义控制表单元素的长度及其他常见需求实现案例流程表单HTML扩展开发2/31泛微武汉耕聚，持续向上的力量！文档简要信息:文档主题(Title)【开发技巧】流程表单HTML扩展开发（推荐：设计器实现设置表单元素的长度）作者(Author)胡顺审批者(ToBeApprovedBy)说明(Comments)文件名称(FileName)【开发技巧】流程表单HTML扩展开发（推荐：设计器实现设置表单元素的长度）.doc文档版本历史:序号日期版本变更说明修改人注释1.2017-12-190.1创建目录功能点刘泰宏2.2018-2-10.2完善各模块内容胡顺3.4.流程表单HTML扩展开发3/31泛微武汉耕聚，持续向上的力量！目录1.说明................................................................................................................................52.准备工作........................................................................................................................63.实现自主设置表单元素的长度.................................................................................63.1.支持PC端及手机端HMTL模式流程表单（单个流程）........................................63.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.实现效果....................................................................................................................20流程表单HTML扩展开发4/31泛微武汉耕聚，持续向上的力量！9.html同一节点多个签字节点排序。..................................................................219.1.多个签字节点按时间先后正序排序........................................................................219.2.多个签字节点按时间先后倒序排序........................................................................249.3.实现效果...................................................................................................................2610.html签字节点格式调整.....................................................................................2710.1.html签字节点格式调整为“内容居左，署名居右”..............................................2710.2.实现效果..................................................................................................................2811.html签字按时间排序并调整格式...................................................................2911.1按时间先后顺序排序并调整格式..........................................................................2911.2.按时间先后倒序排序并调整格式...........................................................................30流程表单HTML扩展开发5/31泛微武汉耕聚，持续向上的力量！1.说明难度：★★★☆☆预计时间：1小时涉及代码开发：有目标需求：此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。当不得不这么做的时候，请参考该方案进行适当调整。可以按照客户要求对时间流程表单进行适当改造。流程表单上面布局、校验、样式等功能可以jQuery的方式进行适当改造。知识点：基本信息：背景知识：1、在阅读本教程之前,需具备html和JavaScript基本知识。2、在阅读本教程之前,需具备jsp页面读写的基本能力。最终效果：通过流程表单HTML设计器实现自定义控制表单元素的长度实现隐藏表单原始边框实现表单元素未输入内容时悬浮提醒的效果html签字节点格式调整（内容在左，署名在右）html签字节点按时间排序并调整格式流程表单HTML扩展开发6/31泛微武汉耕聚，持续向上的力量！2.准备工作1、准备一台和正式环境一致操作系统的服务器。3.（推荐）实现自主设置表单元素的长度将附件提供的width.css上传到服务器的/css/width/目录下面。css文件.zip3.1.支持PC端及手机端HMTL模式流程表单（单个流程）1.在代码块中单个流程引入css样式文件LINKhref=/css/width/width.csstype=text/cssrel=STYLESHEET如（如图1）。流程表单HTML扩展开发7/31泛微武汉耕聚，持续向上的力量！（图1）2.在需要自主设置长度单元格式设置class例如图2里面的classw50表示设置这个框子里面的input长度为50px。如果设置为w100则限制长度为100px，具体效果如图3流程表单HTML扩展开发8/31泛微武汉耕聚，持续向上的力量！（图2）（图3）3.2.HMTL模式流程引入样式文件（一劳永逸）1.新建流程界面流程引入css样式文件LINKhref=/css/width/width.csstype=text/cssrel=STYLESHEET需要修改ecology/workflow/request/AddRequestIframe.jsp文件。如（如图4）。流程表单HTML扩展开发9/31泛微武汉耕聚，持续向上的力量！（图4）2.查看及处理流程界面流程引入css样式文件LINKhref=/css/width/width.csstype=text/cssrel=STYLESHEET需要修改ecology/workflow/request/ManageRequestNoFormIframe.jsp。如（如图4）。流程表单HTML扩展开发10/31泛微武汉耕聚，持续向上的力量！（图5）3.手机端流程界面流程引入css样式文件LINKhref=/css/width/width.csstype=text/cssrel=STYLESHEET需要修改ecology/mobile/plugin/1/client.jsp。如（如图6）。（图6）流程表单HTML扩展开发11/31泛微武汉耕聚，持续向上的力量！4.实现隐藏表单元素表单边框的需求4.1.代码块style.excelOuterTableinput,.excelOuterTableselect,.excelOuterTable.e8_innerShow,.excelOuterTable.e8_outScroll{border:0px!important;}/style4.2.实现效果例：原生页面（图7）开发修改后：流程表单HTML扩展开发12