OA办公协同系统

当前位置：工程项目OA系统 > OA软件营销 > OA办公协同系统

协同OA软件HTML流程运用

申请免费试用、咨询电话：400-8352-114

第九部分泛普免费OA软件Html模式的流程应用

一. 泛普OA软件破解版接口说明

流程的html模式，允许用户自己写js代码，来对流程表单的数据进行操作

二. OA软件应用案例

1) 绑定表单字段，这个是为html模式流程开发的基础

 要绑定一个事件，首先要找到的是字段的id，其实就是对应的html控件的id。

找这个id是比较容易的，我们有下面3种方式来找到控件的id

i. 通过ie的工具查找，ie8在工具的菜单下面有个开发人员工具，如下图：

我要查找请假天数这个字段的id

可以看到字段的id为field10146。

同事我们还可以看到请假天数的span 的id为field10146span。

ii. 从表单上看，如下图

一样可以看到字段的id为10146。控件对应的id就为field10146。

iii. 从html模板里面查看，如下图

我们一样可以看到字段的id为10146。

 绑定事件

绑定事件可以通过jquery来实现，jquery绑定事件非常简单。

代码如下：

//绑定主字段

//文本框、浏览框、使用propertychange事件绑定

//下拉框使用change事件绑定

//check框不能通过值来判断，需要通过check框的checked属性来判断当前check框是否被选中了，绑定事件可以用click

//主字段命名规则，field+字段的id，如field10146 10146为字段的id

jQuery(document).ready(function(){

//文本框、浏览框

jQuery("#field10146").bind("propertychange",function(){

bindfield10146();

});

//下拉框

jQuery("#field10147").bind("change",function(){

alert("请假类型："+jQuery("#field10147").val());

});

//check框

jQuery("#field10161").bind("click",function(){

alert("check框："+jQuery("#field10161").attr("checked"));

});

//如果一进入页面就需要执行某件事，比如下面获得check框是否被选中

//alert("check框："+jQuery("#field10161").attr("checked"));

});

function bindfield10146(){

alert("请假天数："+jQuery("#field10146").val());

}

//绑定明细字段

jQuery(document).ready(function(){

//绑定已经存在的数据

//绑定明细表1，indexnum0 代表当前有多少行明细，包括删除的明细数据

//如果需要绑定明细表2，则需要把indexnum0改成indexnum1，明细表3，indexnum2，后面的类推

//明细字段的命名规则为field+字段的id+"_"+明细数据的行号

//field10150_0 字段id为10150 行号为0代办第一行

if(jQuery("#indexnum0").length>0){//判断该字段是否存在

var indexnum0 = jQuery("#indexnum0").val() * 1.0;

for(var index=0;index<indexnum0;index++){

//绑定核算部门字段

jQuery("#field10150_"+index).bind("propertychange",function(){

alert(this.value);

});

}

//动态绑定添加行的里面的字段，当前添加的行，行号等于明细表行数的值 - 1

//也就是indexnum0的值 - 1

jQuery("#indexnum0").bind("propertychange",function(){

var indexnum0 = this.value * 1.0 - 1;

//绑定核算部门字段

jQuery("#field10150_"+indexnum0).bind("propertychange",function(){

alert(this.value);

});

</script>

2）泛普OA管理系统html 模板之多tab页应用

这个功能实现其实很简单，就是在html模板里面，把流程的主字段table、明细表table分别使用div框起来，然后给div加上不同的id。然后再在页面上添加几个点击（onclick）事件，分别来隐藏或者显示不同的div里面的内容，就可以达到多tab页的效果了。

例子如下：

流程页面有3个明细表

我们加4个div来实现点击上面主表数据，明细表1，明细2，明细表3来显示不同的内容，也就是对流程页面的数据进行拆分。

整个html页面的代码如下：

<p>

span{

cursor:pointer;

font-size:12px;

}

#tab {width:398px;height:34px;border:1px #cfedff solid;border-bottom:0;}

#tab ul{margin:0;padding:0;}

#tab li{list-style:none;float:left;padding:0 30px;height:34px;line-height:34px;text-align:center;border-right:1px #ebf7ff solid;cursor:pointer;}

#tab li.now{color:#5299c4;background:#fff;font-weight:bold;}</style>

</p>

<tbody>

<tr>

<div align="center"><font style="font-size: 14pt; font-weight: bold">html 模板多tab页</font></div>

<ul>

</ul>

</div>

<tbody>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

<tbody>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

<tbody>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

<tbody>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

<tbody>

</tr>

<tr>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</div>

</td>

</tr>

</tbody>

</table>

function htmlChangeTab(obj,tabid){

jQuery("#maindata").hide();//隐藏主表数据

jQuery("#detaildata1").hide();//隐藏明细表1数据

jQuery("#detaildata2").hide();//隐藏明细表2数据

jQuery("#detaildata3").hide();//隐藏明细表3数据

jQuery("#"+tabid).show();//显示点击的tab页数据

jQuery("li").removeClass("now");//删除tab页样式

jQuery("#"+obj.id).addClass("now");//给当前点击的tab页加上样式

}

</script>

效果图如下：

3）泛普OA平台综合应用

下面这个例子将的是，根据页面上科目的值，到异构系统去查询该科目有哪些赋值核算项，然后再在页面上添加出对应的辅助核算字段让客户填写。

大家先看下实现的效果图：

实现该功能的步骤如下：

 实现改功能建议大家使用我们流程的自定义页面来写所需要的代码。因为写自定义页面，我们除了可以写js代码外，还能写java代码，这样实现该功能就简单化了。

 第一步，先通过绑定事件对科目进行绑定，添加一个监听事件

 第二步，添加的监听事件，当发现科目的值被修改时，则通过ajax去访问异构系统，查询对应的表，获得当前科目有哪些辅助核算项。

 第三步，获得了当前科目有哪些辅助核算项之后，大家需要自己去写出button的按钮（这部分可以结合视频一起观看，容易理解些）。这个button按钮的内容其实就是要跟我们正常点添加明细行生成出来的button按钮一样。这样做的一个好处是，我们不需要自己再去写后台保存辅助核算项的数据。

 这个具体的实现，大家可以观看视频，我们下面把实现该接口用到代码和文档建附件（巨人通力demo.rar）。

发布：2006-04-22 15:14 编辑：泛普软件 · admin [打印此页] [关闭]

协同OA软件HTML流程运用

相关栏目