泛微OA开发技巧流程表单HTML扩展开发.docx
《泛微OA开发技巧流程表单HTML扩展开发.docx》由会员分享,可在线阅读,更多相关《泛微OA开发技巧流程表单HTML扩展开发.docx(27页珍藏版)》请在冰豆网上搜索。
泛微OA开发技巧流程表单HTML扩展开发
版本
文档主题(Title)
【开发技巧】流程表单HTML扩展开发(推荐:
设计器实现设置表单元素的长度)
作者(Author)
胡顺
审批者(ToBeApprovedBy)
说明(Comments)
文件名称(FileName)
【开发技巧】流程表单HTML扩展开发(推荐:
设计器实现设置表单元素的长度).doc
序号
日期
版本
变更说明
修改人
注释
1.
2017-12-19
创建目录功能点
刘泰宏
2.
2018-2-1
完善各模块内容
胡顺
3.
4.
1.说明
难度:
★★★☆☆
预计时间:
1小时
涉及代码开发:
有
目标需求:
此案例适用项目人员通过流程表单HTML设计器实现自定义控制表单元素的长度。
当不得不这么做的时候,请参考该方案进行适当调整。
可以按照客户要求对时间流程表单进行适当改造。
流程表单上面布局、校验、样式等功能
可以jQuery的方式进行适当改造。
知识点:
基本信息:
背景知识:
1、在阅读本教程之前,需具备html和JavaScript基本知识。
2、在阅读本教程之前,需具备jsp页面读写的基本能力。
最终效果:
通过流程表单HTML设计器实现自定义控制表单元素的长度
实现隐藏表单原始边框
实现表单元素未输入内容时悬浮提醒的效果
html签字节点格式调整(内容在左,署名在右)
html签字节点按时间排序并调整格式
2.准备工作
1、准备一台和正式环境一致操作系统的服务器。
3.(推荐)实现自主设置表单元素的长度
将附件提供的上传到服务器的/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/文件。
如(如图4)。
(图4)
2.查看及处理流程界面流程引入css样式文件需要修改ecology/workflow/request/。
如(如图4)。
(图5)
3.手机端流程界面流程引入css样式文件需要修改ecology/mobile/plugin/1/。
如(如图6)。
(图6)
4.实现隐藏表单元素表单边框的需求
4.1.代码块
.excelOuterTableinput,
.excelOuterTableselect,
.excelOuterTable.e8_innerShow,
.excelOuterTable.e8_outScroll
{
border:
0px!
important;
}
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)$/(code)){
tip="身份证号格式错误";
pass=false;
}
elseif(!
city[(0,2)]){
tip="地址编码错误";
pass=false;
}
else{
eady(function(){
checkCustomize=function(){
varissubmit=false;
if(jQuery("#field11359").attr("checked")){
"提醒:
选择框已经选中!
");
issubmit=true;
}else{
"提醒:
选择框未选择!
");
}
returnissubmit;
}
});
7.html打印时解决签字意见多个空格问题
7.1.代码块
将以下代码块放在ecology\workflow\request\文件中,如下图:
jQuery(document).ready(function(){
jQuery(".span_mc").each(function(){
vara=(jQuery(this).html());
emove();
pan_mc").next("br").remove();
pan_mc").parent().find("br").remove();
}
});
});
7.2.实现效果
例:
原生界面
删除空的签字意见和一个换行符
删除空的签字意见和全部换行符
8.(推荐)多内容区域多节点签字意见排序
8.1.多个签字节点按时间先后正序排序
1.将以下代码放在ecology\workflow\request\(已办)和ecology\workflow\request\(待办),文件中,如下图:
2.
.excelTempDiv.td_edesign.remark{display:
none;}
.excelTempDiv.td_edesign.span_mc{display:
block!
important;}
.excelTempDiv.td_edesign.span_mcspan{display:
block;}
$(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('.remark').find('br').remove();
jQuery('.remark').show();
}
}
3.在需要自主设置排序的单元格设置class名为remark(如果属性名称class已经存在,需在原有名称后空格后添加remark)。
注:
class名为remark,不可更改。
具体效果如下图:
8.2.多个签字节点按时间先后倒序排序
1.将以下代码放在ecology\workflow\request\(已办)和ecology\workflow\request\(待办)文件中,如下图:
.excelTempDiv.td_edesign.remark{display:
none;}
.excelTempDiv.td_edesign.span_mc{display:
block!
important;}
.excelTempDiv.td_edesign.span_mcspan{display:
block;}
$(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('.remark').find('br').remove();
jQuery('.remark').show();
}
}
(图2)
2在需要自主设置排序的单元格设置class名为remark(如果属性名称class已经存在,需在原有名称后空格后添加remark)。
注:
class名为remark,不可更改。
具体效果如下图:
.实现效果
按时间先后顺序排序,如下图
9.(推荐)html表单签字节点格式调整
9.1.html签字节点格式调整为“内容居左,署名居右”
以下调整的格式为:
内容在居左,署名居右:
将以下代码放在ecology\workflow\request\(已办)和ecology\workflow\request\(待办)、ecology\workflow\request\(打印),文件中(可根据需求只添加其中某一文件代码)
如下图:
.excelTempDiv.td_edesign.span_mc{display:
block!
important;text-align:
right;}
.excelTempDiv.td_edesign.span_mc>span:
first-child{display:
block;text-align:
left;}
.excelTempDiv.td_edesign.span_mc>img:
first-child{display:
block;text-align:
left;max-height:
100px;}
$(document).ready(function(){
emark').parent().find('br').remove();
});
9.2.实现效果
原生界面:
修改后:
内容居左,署名居右;
11.多内容区域签字签字意见按时间排序
.按时间先后顺序排序并调整格式
将以下代码放在ecology\workflow\request\(已办)和ecology\workflow\request\(待办),文件中
.excelTempDiv.td_edesign.remark{display:
none;}/*排序前隐藏内容*/
.excelTempDiv.td_edesign.span_mc{display:
block!
important;text-align:
right;}
.excelTempDiv.td_edesign.span_mc>span{display:
block;text-align:
left;}
$(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('.remark').find('br').remove();
jQuery('.remark').show();
}
}
效果如下:
.按时间先后倒序排序并调整格式
将以下代码放在ecology\workflow\request\(已办)和ecology\workflow\request\(待办),文件中
.excelTempDiv.td_edesign.remark{display:
none;}/*排序前隐藏内容*/
.excelTempDiv.td_edesign.span_mc{display:
block!
important;text-align:
right;}
.excelTempDiv.td_edesign.span_mc>span{display:
block;text-align:
left;}
$(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('.remark').find('br').remove();
jQuery('.remark').show();
}
}
实现效果
效果如下: