泛微OA开发技巧流程表单HTML扩展开发.docx
- 文档编号:11928578
- 上传时间:2023-04-16
- 格式:DOCX
- 页数:17
- 大小:55.87KB
泛微OA开发技巧流程表单HTML扩展开发.docx
《泛微OA开发技巧流程表单HTML扩展开发.docx》由会员分享,可在线阅读,更多相关《泛微OA开发技巧流程表单HTML扩展开发.docx(17页珍藏版)》请在冰豆网上搜索。
泛微OA开发技巧流程表单HTML扩展开发
泛微OA【开发技巧】流程表单HTML扩展开发(总13页)
仅限阅读请勿传播
当您阅读本方案时,即表示您同意不传播本方案的所有内容
流程表单HTML设计器
实现自定义控制表单元素的长度
及其他常见需求实现案例
版本v0.2
文档主题(Title)
【开发技巧】流程表单HTML扩展开发(推荐:
设计器实现设置表单元素的长度)
作者(Author)
胡顺
审批者(ToBeApprovedBy)
说明(Comments)
文件名称(FileName)
【开发技巧】流程表单HTML扩展开发(推荐:
设计器实现设置表单元素的长度).doc
序号
日期
版本
变更说明
修改人
注释
2017-12-19
0.1
创建目录功能点
刘泰宏
2018-2-1
0.2
完善各模块内容
胡顺
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样式文件
如(如图4)。
(图5)
3.手机端流程界面流程引入css样式文件
如(如图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)$/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)window.top.Dialog.alert("提醒:
"+tip+"!
");
returnpass;
}
6.2.实现效果
7.实现某个check框设置为必填的需求
7.1.代码块
jQuery(document).ready(function(){
checkCustomize=function(){
varissubmit=false;
if(jQuery("#field11359").attr("checked")){
window.top.Dialog.alert("提醒:
选择框已经选中!
");
issubmit=true;
}else{
window.top.Dialog.alert("提醒:
选择框未选择!
");
}
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(待办),文件中,如下图:
.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
varlis=jQuery('.remark:
eq('+i+')').children('.span_mc');
varux=[];
for(varj=0;j vartmp={}; tmp.dom=lis[j]; varremindTime=lis[j].innerHTML.substring(lis[j].innerHTML.length-20); varstr=remindTime.toString(); tmp.date=newDate(str.replace(/-/g,'/')); ux.push(tmp); } ux.sort(function(a,b){ returna.date-b.date; }); for(varg=0;g ul[i].appendChild(ux[g].dom); } jQuery('.remark').find('br').remove(); jQuery('.remark').show(); } } 2.在需要自主设置排序的单元格设置class名为remark(如果属性名称class已经存在,需在原有名称后空格后添加remark)。 注: class名为remark,不可更改。 具体效果如下图: 9.2.多个签字节点按时间先后倒序排序 1.将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp(已办)和ecology\workflow\request\WorkflowManageRequestHtml.jsp(待办)文件中,如下图: .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 varlis=jQuery('.remark: eq('+i+')').children('.span_mc'); varux=[]; for(varj=0;j vartmp={}; tmp.dom=lis[j]; varremindTime=lis[j].innerHTML.substring(lis[j].innerHTML.length-20); varstr=remindTime.toString(); tmp.date=newDate(str.replace(/-/g,'/')); ux.push(tmp); } ux.sort(function(a,b){ returnb.date-a.date; }); for(varg=0;g ul[i].appendChild(ux[g].dom); } jQuery('.remark').find('br').remove(); jQuery('.remark').show(); } } (图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(打印),文件中(可根据需求只添加其中某一文件代码) 如下图: .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(){ //删除所有的换行 jQuery('.remark').parent().find('br').remove(); }); 10.2.实现效果 原生界面: 修改后: 内容居左,署名居右; 11.多内容区域签字签字意见按时间排序 11.1.按时间先后顺序排序并调整格式 将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp(已办)和ecology\workflow\request\WorkflowManageRequestHtml.jsp(待办),文件中 .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 varlis=jQuery('.remark: eq('+i+')').children('.span_mc'); varux=[]; for(varj=0;j vartmp={}; tmp.dom=lis[j]; varremindTime=lis[j].innerHTML.substring(lis[j].innerHTML.length-20); varstr=remindTime.toString(); tmp.date=newDate(str.replace(/-/g,'/')); ux.push(tmp); } ux.sort(function(a,b){ returna.date-b.date; }); for(varg=0;g ul[i].appendChild(ux[g].dom); } jQuery('.remark').find('br').remove(); jQuery('.remark').show(); } } 效果如下: 11.2.按时间先后倒序排序并调整格式 将以下代码放在ecology\workflow\request\ViewRequestIframe.jsp(已办)和ecology\workflow\request\WorkflowManageRequestHtml.jsp(待办),文件中 .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 varlis=jQuery('.remark: eq('+i+')').children('.span_mc'); var
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 泛微 OA 开发 技巧 流程 表单 HTML 扩展