泛微OA开发技巧流程表单HTML扩展开发docWord文档下载推荐.docx
《泛微OA开发技巧流程表单HTML扩展开发docWord文档下载推荐.docx》由会员分享，可在线阅读，更多相关《泛微OA开发技巧流程表单HTML扩展开发docWord文档下载推荐.docx（27页珍藏版）》请在冰豆网上搜索。
HMTL模式流程引入样式文件（一劳永逸）..............
实现隐藏表单元素表单边框的需求.................
代码块.............................................
实现效果...........................................
5.
实现表单未输入内容时悬浮提醒的效果.............
6.
实现提交时校验身份证号码的需求.................
.实现效果...........................................错误!
7.
实现某个check框设置为必填的需求...............
8.
html打印时解决签字意见多个空格问题............
9.
html同一节点多个签字节点排序。
................
多个签字节点按时间先后正序排序.....................
多个签字节点按时间先后倒序排序.....................
实现效果............................................
10.
html签字节点格式调整.........................
html签字节点格式调整为“内容居左，署名居右”
.....错误!
实现效果..........................................
11.
html签字按时间排序并调整格式.................
按时间先后顺序排序并调整格式.........................
按时间先后倒序排序并调整格式.........................
1.说明
难度：
★★★☆☆
预计时间：
1小时
涉及代码开发：
有
目标需求：
此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。
当不得不这么做的时
候，请参考该方案进行适当调整。
可以按照客户要求对时间流程表单进行适当改造。
流程表单上面布局、校验、样式等功能
可以jQuery的方式进行适当改造。
知识点：
基本信息：
背景知识：
1、在阅读本教程之前,需具备html和JavaScript基本知识。
2、在阅读本教程之前,需具备jsp页面读写的基本能力。
最终效果：
通过流程表单HTML设计器实现自定义控制表单元素的长度
实现隐藏表单原始边框
实现表单元素未输入内容时悬浮提醒的效果
html签字节点格式调整（内容在左，署名在右）
html签字节点按时间排序并调整格式
2.准备工作
1、准备一台和正式环境一致操作系统的服务器。
3.（推荐）实现自主设置表单元素的长度
将附件提供的上传到服务器的/css/width/目录下面。
css文件.zip
3.1.支持PC端及手机端HMTL模式流程表单（单个流程）
1.在代码块中单个流程引入css样式文件<
LINKhref="
/css/width/"
type=text/cssrel=STYLESHEET>
如（如图1）。
（图1）
2.在需要自主设置长度单元格式设置class例如图2里面的classw50表示设置这个框子里面的input长度为50px。
如果设置为w100则限制长度为100px，具体效果如图3
（图2）
（图3）
3.2.HMTL模式流程引入样式文件（一劳永逸）
1.新建流程界面流程引入css样式文件<
需要修改ecology/workflow/request/文件。
如（如图4）。
（图4）
查看及处理流程界面流程引入css样式文件<
rel=STYLESHEET>
需要修改ecology/workflow/request/。
type=text/css
（图5）
3.手机端流程界面流程引入css样式文件<
需要修改ecology/mobile/plugin/1/。
如（如图6）。
（图6）
4.实现隐藏表单元素表单边框的需求
4.1.代码块
<
style>
.excelOuterTableinput,
.excelOuterTableselect,
.excelOuterTable.e8_innerShow,
.excelOuterTable.e8_outScroll
{
border:
0px!
important;
}
/style>
4.2.实现效果
例：
原生页面
（图7）
开发修改后：
5.实现表单未输入内容时悬浮提醒的效
果
此方法只适用于输入框提示。
5.1.代码块
1.在代码块中插入代码
scripttype="
text/javascript"
>
$（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（{"
}）
.focus（function（）{
if（$（this）.val（）!
=oldVal）{$（this）.css（{"
#000"
}）}else{$（this）.val（"
）.css（{"
#
888"
}）}
.blur（function（）{
）{$（this）.val（oldVal）.css（{"
.keydown（function（）{$（this）.css（{"
}）}）;
/script>
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）$/（code））{
tip="
身份证号格式错误"
pass=false;
elseif（!
city[（0,2）]）{
地址编码错误
else{
eady（function（）{
if（jQuery（"
#field11359"
checked"
））{
提醒：
选择框已经选中!
issubmit=true;
}else{
提醒：
选择框未选择!
7.html打印时解决签字意见多个空格问
题
7.1.代码块
将以下代码块放在文件中，如下图：
jQuery（"
.span_mc"
）.each（function（）{
vara=（jQuery（this）.html（））;
emove（）;
pan_mc"
）.next（"
br"
）.remove（）;
）.parent（）.find（"
7.2.实现效果
删除空的签字意见和一个换行符
删除空的签字意见和全部换行符
8.（推荐）多内容区域多节点签字意见排
序
8.1.多个签字节点按时间先后正序排序
1.将以下代码放在ecology\workflow\request\（已办）和ecology\workflow\request\（待办），文
件中，如下图：
.excelTempDiv.td_edesign.remark{display:
none;
}
.excelTempDiv.td_edesign.span_mc{display:
block!
.excelTempDiv.td_edesign.span_mcspan{display:
block;
script>
$（document）.ready（function（）{
onSortDesc（）;
varonSortDesc=function（）{
varul=jQuery（'
.remark'
for（vari=0;
i<
;
i++）{
varlis=jQuery（'
.remark:
eq（'
+i+'
）'
）.children（'
.span_mc'
varux=[];
for（varj=0;
j<
j++）{
vartmp={};
=lis[j];
varremindTime=lis[j].（lis[j].-20）;
varstr=（）;
=newDate（/-/g,'
/'
））;
（tmp）;
（function（a,b）{
return-;
for（varg=0;
g<
g++）{
ul[i].appendChild（ux[g].dom）;
jQuery（'
）.find（'
br'
）.show（）;
2.在需要自主设置排序的单元格设置class名为remark（如果属性名称class已经存在，需在原有名称后空格后添加remark）。
注：
class名为remark，不可更改。
具体效果如下图：
8.2.多个签字节点按时间先后倒序排序
1.将以下代码放在ecology\workflow\request\（已办）和ecology\workflow\request\（待办）文件
中，如下图：
2在需要自主设置排序的单元格设置class名为remark（如果属性名称class已经存在，需在原有名称后
空格后添加remark）。
.实现效果
按时间先后顺序排序，如下图
9.（推荐）html表单签字节点格式调整
9.1.html签字节点格式调整为“内容居左，署名居右”
以下调整的格式为：
内容在居左，署名居右：
将以下代码放在ecology\workflow\request\（已办）和ecology\workflow\request\（待办）、
（打印），文件中（可根据需求只添加其中某一文件代码）
如下图：
text-align:
right;
.excelTempDiv.td_edesign.span_mc>
span:
first-child{display:
left;
img:
left;
max-height:
100px;
emark'
）.parent（）.find（'
/script>
9.2.实现效果
原生界面:
修改后：
内容居左，署名居右；
11.多内容区域签字签字意见按时间排序
.按时间先后顺序排序并调整格式
将以下代码放在ecology\workflow\request\（已办）和ecology\workflow\request\（待办），文件中
}/*排序前隐藏内容*/
span{display:
.rema
升级会员 