泛微OA开发技巧流程表单HTML扩展开发docWord文档下载推荐.docx
- 文档编号:18031218
- 上传时间:2022-12-13
- 格式:DOCX
- 页数:27
- 大小:19.91KB
泛微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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 泛微 OA 开发 技巧 流程 表单 HTML 扩展 doc