版本 v0.2
1/ 31
泛微武汉 耕聚，持续向上的力量！
当您阅读本方案时，即表示您同意不传播本方案的所有内容 流程表单HTML设计器 及其他常见需求实现案例 实现自定义控制表单元素的长度 流程表单HTML扩展开发
文档简要信息: 文档主题(Title) 作者(Author) 审批者(To Be Approved By) 说明(Comments) 文件名称(File Name) 文档版本历史: 序号 1. 2. 3. 4.
2/ 31
泛微武汉 耕聚，持续向上的力量！
日期 2017-12-19 2018-2-1 版本 0.1 0.2 变更说明 创建目录功能点 完善各模块内容 修改人 刘泰宏 胡顺 注释 【开发技巧】流程表单HTML扩展开发（推荐：设计器实现设置表单元素的长度） 胡顺 【开发技巧】流程表单HTML扩展开发（推荐：设计器实现设置表单元素的长度）.doc 流程表单HTML扩展开发
目录
1. 2. 3.
3.1. 3.2.
说明 ................................................................................................................................ 5 准备工作 ........................................................................................................................ 6 实现自主设置表单元素的长度 ................................................................................. 6
支持PC端及手机端HMTL模式流程表单（单个流程） ........................................ 6 HMTL模式流程引入样式文件（一劳永逸） ............................................................ 8
4.
4.1. 4.2.
实现隐藏表单元素表单边框的需求 ..................................................................... 11
代码块 ........................................................................................................................ 11 实现效果 .................................................................................................................... 11
5.
5.1. 5.2.
实现表单未输入内容时悬浮提醒的效果 ............................................................ 12
代码块 ........................................................................................................................ 12 实现效果 .................................................................................................................... 13
6.
6.1. 6.2.
实现提交时校验身份证号码的需求 ..................................................................... 15
代码块 ........................................................................................................................ 15 实现效果 .................................................................................................................... 17
7.
7.1.
实现某个check框设置为必填的需求 ............................................................... 18
代码块 ........................................................................................................................ 18
8.
8.1. 8.2.
html打印时解决签字意见多个空格问题 .......................................................... 19
代码块 ........................................................................................................................ 19 实现效果 .................................................................................................................... 20
3/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
9.
9.1. 9.2.
html同一节点多个签字节点排序。 .................................................................. 21
多个签字节点按时间先后正序排序 ........................................................................ 21 多个签字节点按时间先后倒序排序 ........................................................................ 24
9.3. 实现效果 ................................................................................................................... 26
10. html签字节点格式调整 ..................................................................................... 27
10.1. html签字节点格式调整为“内容居左，署名居右” .............................................. 27 10.2. 实现效果 .................................................................................................................. 28
11. html签字按时间排序并调整格式 ................................................................... 29
11.1 按时间先后顺序排序并调整格式 .......................................................................... 29 11.2. 按时间先后倒序排序并调整格式 ........................................................................... 30
4/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
1. 说明
难度：★★★☆☆ 预计时间：1小时 涉及代码开发：有 目标需求：
此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。当不得不这么做的时候，请参考该方案进行适当调整。
可以按照客户要求对时间流程表单进行适当改造。
流程表单上面布局、校验、样式等功能 可以jQuery的方式进行适当改造。
知识点： 基本信息： 背景知识：
1、 在阅读本教程之前,需具备html和JavaScript基本知识。 2、 在阅读本教程之前,需具备jsp页面读写的基本能力。
最终效果：
通过流程表单HTML设计器实现自定义控制表单元素的长度 实现隐藏表单原始边框
实现表单元素未输入内容时悬浮提醒的效果 html签字节点格式调整（内容在左，署名在右） html签字节点按时间排序并调整格式
5/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
2. 准备工作
1、 准备一台和正式环境一致操作系统的服务器。
3. （推荐）实现自主设置表单元素的长度
将附件提供的width.css上传到服务器的/css/width/目录下面。
css文件 .zip
3.1. 支持PC端及手机端HMTL模式流程表单（单个流程）
1. 在代码块中单个流程引入css样式文件
如（如图1）。
6/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
（图1）
2. 在需要自主设置长度单元格式设置class 例如图2 里面 的class w50 表示设置这个框子里面的input
长度为50px。如果设置为w100 则限制长度为100px，具体效果如图3
7/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
（图2）
（图3）
3.2. HMTL模式流程引入样式文件（一劳永逸）
1. 新建流程界面流程引入css样式文件 需要修改ecology/workflow/request/AddRequestIframe.jsp文件。如（如图4）。
8/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
（图4）
2. 查看及处理流程界面流程引入css样式文件rel=STYLESHEET>需要修改ecology/workflow/request/ManageRequestNoFormIframe.jsp。如（如图4）。
9/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
（图5）
3. 手机端流程界面流程引入css样式文件
需要修改ecology/mobile/plugin/1/client.jsp。如（如图6）。
（图6）
10/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
4. 实现隐藏表单元素表单边框的需求
4.1. 代码块
4.2. 实现效果
例：原生页面
（图7）
开发修改后：
11/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
5. 实现表单未输入内容时悬浮提醒的效果
此方法只适用于输入框提示。
5.1. 代码块
1.在代码块中插入代码
2. 在需要自主设置提示内容的单元格设置class名为holder（如果属性名称class已经存在，需在原有
名称后空格后添加holder），以及设置自定义属性为提示内容data-holder的值，例如图8 里面 的class w50 表示设置这个输入框的提示内容为“请输入标题”， 如图8。注： class名为holder，自定义属性名为data-holder，不可更改。具体效果如图9
（图8）
5.2. 实现效果
例：原生界面
13/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
开发修改后：
（图9）
14/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
6. 实现提交时校验身份证号码的需求
6.1. 代码块
16/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
6.2. 实现效果
17/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
7. 实现某个check框设置为必填的需求
7.1. 代码块
jQuery(document).ready(function(){
checkCustomize = function(){ var issubmit=false;
if(jQuery(\"#field11359\").attr(\"checked\")){
window.top.Dialog.alert(\"提醒：选择框已经选中!\"); issubmit=true; }else{
window.top.Dialog.alert(\"提醒：选择框未选择!\"); }
18/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
return issubmit; } });
8. html打印时解决签字意见多个空格问题
8.1. 代码块
将以下代码块放在ecology\\workflow\\request\\PrintRequest.jsp文件中，如下图：
jQuery(\".span_mc\").each(function(){ var a=jQuery.trim(jQuery(this).html()); //console.log(\"====>\"+a); });
if(\"\"==a){ }
$(this).remove(); //删除全部br
jQuery(\".span_mc\").next(\"br\").remove();
// jQuery(\".span_mc\").parent().find(\"br\").remove();
//删除空签字意见的下一个br
19/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
8.2. 实现效果
例：原生界面
删除空的签字意见和一个换行符
20/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
删除空的签字意见和全部换行符
9. （推荐）多内容区域多节点签字意见排序
9.1. 多个签字节点按时间先后正序排序
1. 将以下代码放在ecology\\workflow\\request\\ ViewRequestIframe.jsp（已办）和ecology\\workflow\\request\\
WorkflowManageRequestHtml.jsp（待办），文件中，如下图：
22/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
2. 在需要自主设置排序的单元格设置class名为remark（如果属性名称class已经存在，需在原有名称
后空格后添加remark） 。注： class名为remark，不可更改。具体效果如下图：
23/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
9.2. 多个签字节点按时间先后倒序排序
1. 将以下代码放在ecology\\workflow\\request\\ ViewRequestIframe.jsp（已办）和ecology\\workflow\\request\\
WorkflowManageRequestHtml.jsp（待办）文件中，如下图：
（图2）
2在需要自主设置排序的单元格设置class名为remark（如果属性名称class已经存在，需在原有名称后空格后添加remark） 。注： class名为remark，不可更改。具体效果如下图：
25/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
9.3. 实现效果
按时间先后顺序排序，如下图
26/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
10. （推荐）html表单签字节点格式调整
10.1. html签字节点格式调整为“内容居左，署名居右”
以下调整的格式为：内容在居左，署名居右：
将以下代码放在ecology\\workflow\\request\\ ViewRequestIframe.jsp（已办）和ecology\\workflow\\request\\ WorkflowManageRequestHtml.jsp（待办） 、ecology\\workflow\\request\\PrintRequest.jsp（打印），文件中（可根据需求只添加其中某一文件代码） 如下图：
27/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
10.2. 实现效果
原生界面:
修改后：内容居左，署名居右；
28/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
11. 多内容区域签字签字意见按时间排序
11.1. 按时间先后顺序排序并调整格式
将以下代码放在ecology\\workflow\\request\\ ViewRequestIframe.jsp（已办）和ecology\\workflow\\request\\ WorkflowManageRequestHtml.jsp（待办），文件中
29/ 31
泛微武汉 耕聚，持续向上的力量！
流程表单HTML扩展开发
效果如下：
11.2. 按时间先后倒序排序并调整格式
将以下代码放在ecology\\workflow\\request\\ ViewRequestIframe.jsp（已办）和ecology\\workflow\\request\\ WorkflowManageRequestHtml.jsp（待办），文件中
11.3 实现效果
效果如下：
31/ 31
泛微武汉 耕聚，持续向上的力量！
因篇幅问题不能全部显示，请点此查看更多更全内容