泛微OA开发技巧流程表单HTML扩展开发推荐设计器实现设置表单元素的长度.docx
《泛微OA开发技巧流程表单HTML扩展开发推荐设计器实现设置表单元素的长度.docx》由会员分享，可在线阅读，更多相关《泛微OA开发技巧流程表单HTML扩展开发推荐设计器实现设置表单元素的长度.docx（18页珍藏版）》请在冰豆网上搜索。
泛微OA开发技巧流程表单HTML扩展开发推荐设计器实现设置表单元素的长度
版本v0.2
文档主题（Title）
【开发技巧】流程表单HTML扩展开发（推荐：
设计器实现设置表单元素的长度）
作者（Author）
胡顺
审批者（ToBeApprovedBy）
说明（Comments）
文件名称（FileName）
【开发技巧】流程表单HTML扩展开发（推荐：
设计器实现设置表单元素的长度）.doc
序号
日期
版本
变更说明
修改人
注释
2017-12-19
0.1
创建目录功能点
刘泰宏
2018-2-1
0.2
完善各模块内容
胡顺
1.说明6
2.准备工作7
3.实现自主设置表单元素的长度7
3.1.支持PC端及手机端HMTL模式流程表单（单个流程）7
3.2.HMTL模式流程引入样式文件（一劳永逸）8
4.实现隐藏表单元素表单边框的需求11
4.1.代码块11
4.2.实现效果11
5.实现表单未输入内容时悬浮提醒的效果12
5.1.代码块12
5.2.实现效果13
6.实现提交时校验身份证号码的需求15
6.1.代码块15
6.2.实现效果17
7.实现某个check框设置为必填的需求18
7.1.代码块18
8.html打印时解决签字意见多个空格问题19
8.1.代码块19
8.2.实现效果20
9.html同一节点多个签字节点排序。
21
9.1.多个签字节点按时间先后正序排序21
9.2.多个签字节点按时间先后倒序排序24
9.3.实现效果26
10.html签字节点格式调整27
10.1.html签字节点格式调整为“内容居左，署名居右”27
10.2.实现效果28
11.html签字按时间排序并调整格式29
11.1按时间先后顺序排序并调整格式29
11.2.按时间先后倒序排序并调整格式30
1.说明
难度：
★★★☆☆
预计时间：
1小时
涉及代码开发：
有
目标需求：
此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。
当不得不这么做的时候，请参考该方案进行适当调整。
可以按照客户要求对时间流程表单进行适当改造。
流程表单上面布局、校验、样式等功能
可以jQuery的方式进行适当改造。
知识点：
基本信息：
背景知识：
1、在阅读本教程之前,需具备html和JavaScript基本知识。
2、在阅读本教程之前,需具备jsp页面读写的基本能力。
最终效果：
通过流程表单HTML设计器实现自定义控制表单元素的长度
实现隐藏表单原始边框
实现表单元素未输入内容时悬浮提醒的效果
html签字节点格式调整（内容在左，署名在右）
html签字节点按时间排序并调整格式
2.准备工作
1、准备一台和正式环境一致操作系统的服务器。
3.（推荐）实现自主设置表单元素的长度
将附件提供的width.css上传到服务器的/css/width/目录下面。
3.1.支持PC端及手机端HMTL模式流程表单（单个流程）
1.在代码块中单个流程引入css样式文件
如（如图1）。
（图1）
2.在需要自主设置长度单元格式设置class例如图2里面的classw50表示设置这个框子里面的input长度为50px。
如果设置为w100则限制长度为100px，具体效果如图3
（图2）
（图3）
3.2.HMTL模式流程引入样式文件（一劳永逸）
1.新建流程界面流程引入css样式文件
需要修改ecology/workflow/request/AddRequestIframe.jsp文件。
如（如图4）。
（图4）
2.查看及处理流程界面流程引入css样式文件需要修改ecology/workflow/request/ManageRequestNoFormIframe.jsp。
如（如图4）。
（图5）
3.手机端流程界面流程引入css样式文件需要修改ecology/mobile/plugin/1/client.jsp。
如（如图6）。
（图6）
4.实现隐藏表单元素表单边框的需求
4.1.代码块
4.2.实现效果
例：
原生页面
（图7）
开发修改后：
5.实现表单未输入内容时悬浮提醒的效果
此方法只适用于输入框提示。
5.1.代码块
1.在代码块中插入代码
$（document）.ready（function（）{
inputTipText（）;
}）;
functioninputTipText（）{
$（"div[class*=holder]input"）
.each（function（）{
if（$（this）.val（）==""）{
varoldVal=$（this）.parent（".holder"）.attr（"data-holder"）;
if（$（this）.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"}）}）;
}
}）;
}
2.在需要自主设置提示内容的单元格设置class名为holder（如果属性名称class已经存在，需在原有名称后空格后添加holder），以及设置自定义属性为提示内容data-holder的值，例如图8里面的classw50表示设置这个输入框的提示内容为“请输入标题”，如图8。
注：
class名为holder，自定义属性名为data-holder，不可更改。
具体效果如图9
（图8）
5.2.实现效果
例：
原生界面
开发修改后：
（图9）
6.实现提交时校验身份证号码的需求
6.1.代码块
jQuery（document）.ready（function（）{
checkCustomize=function（）{
varissubmit=false;
varcard=jQuery（"#field11365"）.val（）;
issubmit=IdentityCodeValid（card）;
returnissubmit;
};
}）;
functionIdentityCodeValid（code）{
varcity={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:
"国外"};
vartip="";
varpass=true;
if（!
code||!
/^\d{6}（18|19|20）?
\d{2}（0[1-9]|1[12]）（0[1-9]|[12]\d|3[01]）\d{3}（\d|X）$/i.test（code））{
tip="身份证号格式错误";
pass=false;
}
elseif（!
city[code.substr（0,2）]）{
tip="地址编码错误";
pass=false;
}
else{
//18位身份证需要验证最后一位校验位
if（code.length==18）{
code=code.split（''）;
//∑（ai×Wi）（mod11）
//加权因子
varfactor=[7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
//校验位
varparity=[1,0,'X',9,8,7,6,5,4,3,2];
varsum=0;
varai=0;
varwi=0;
for（vari=0;i<17;i++）
{
ai=code[i];
wi=factor[i];
sum+=ai*wi;
}
varlast=parity[sum%11];
if（parity[sum%11]!
=code[17]）{
tip="身份证号码校验位错误";
pass=false;
}
}
}
if（!
pass）（"提醒：
"+tip+"!
"）;
returnpass;
}
6.2.实现效果
7.实现某个check框设置为必填的需求
7.1.代码块
jQuery（document）.ready（function（）{
checkCustomize=function（）{
varissubmit=false;
if（jQuery（"#field11359"）.attr（"checked"））{
（"提醒：
选择框已经选中!
"）;
issubmit=true;
}else{
（"提醒：
选择框未选择!
"）;
}
returnissubmit;
}
}）;
8.html打印时解决签字意见多个空格问题
8.1.代码块
将以下代码块放在ecology\workflow\request\PrintRequest.jsp文件中，如下图：
jQuery（document）.ready（function（）{
jQuery（".span_mc"）.each（function（）{
vara=jQuery.trim（jQuery（this）.html（））;
//console.log（"====>"+a）;
if（""==a）{
$（this）.remove（）;
//删除全部br
jQuery（".span_mc"）.next（"br"）.remove（）;
//删除空签字意见的下一个br
//jQuery（".span_mc"）.parent（）.find（"br"）.remove（）;
}
}）;
}）;
8.2.实现效果
例：
原生界面
删除空的签字意见和一个换行符
删除空的签字意见和全部换行符
9.（推荐）多内容区域多节点签字意见排序
9.1.多个签字节点按时间先后正序排序
1.将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办），文件中，如下图：
2.
3.在需要自主设置排序的单元格设置class名为remark（如果属性名称class已经存在，需在原有名称后空格后添加remark）。
注：
class名为remark，不可更改。
具体效果如下图：
9.2.多个签字节点按时间先后倒序排序
1.将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办）文件中，如下图：
（图2）
2在需要自主设置排序的单元格设置class名为remark（如果属性名称class已经存在，需在原有名称后空格后添加remark）。
注：
class名为remark，不可更改。
具体效果如下图：
9.3.实现效果
按时间先后顺序排序，如下图
10.（推荐）html表单签字节点格式调整
10.1.html签字节点格式调整为“内容居左，署名居右”
以下调整的格式为：
内容在居左，署名居右：
将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办）、ecology\workflow\request\PrintRequest.jsp（打印），文件中（可根据需求只添加其中某一文件代码）
如下图：
10.2.实现效果
原生界面:
修改后：
内容居左，署名居右；
11.多内容区域签字签字意见按时间排序
11.1.按时间先后顺序排序并调整格式
将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办），文件中
效果如下：
11.2.按时间先后倒序排序并调整格式
将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp（已办）和ecology\workflow\request\WorkflowManageRequestHtml.jsp（待办），文件中