OA辦公協(xié)同系統(tǒng)

當前位置：工程項目OA系統(tǒng) > OA軟件營銷 > OA辦公協(xié)同系統(tǒng)

協(xié)同OA軟件HTML流程運用

申請免費試用、咨詢電話：400-8352-114

第九部分泛普免費OA軟件Html模式的流程應用

一. 泛普OA軟件破解版接口說明

流程的html模式，允許用戶自己寫js代碼，來對流程表單的數(shù)據(jù)進行操作

二. OA軟件應用案例

1) 綁定表單字段，這個是為html模式流程開發(fā)的基礎

 要綁定一個事件，首先要找到的是字段的id，其實就是對應的html控件的id。

找這個id是比較容易的，我們有下面3種方式來找到控件的id

i. 通過ie的工具查找，ie8在工具的菜單下面有個開發(fā)人員工具，如下圖：

我要查找請假天數(shù)這個字段的id

可以看到字段的id為field10146。

同事我們還可以看到請假天數(shù)的span 的id為field10146span。

ii. 從表單上看，如下圖

一樣可以看到字段的id為10146?？丶膇d就為field10146。

iii. 從html模板里面查看，如下圖

我們一樣可以看到字段的id為10146。

 綁定事件

綁定事件可以通過jquery來實現(xiàn)，jquery綁定事件非常簡單。

代碼如下：

//綁定主字段

//文本框、瀏覽框、使用propertychange事件綁定

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

//check框不能通過值來判斷，需要通過check框的checked屬性來判斷當前check框是否被選中了，綁定事件可以用click

//主字段命名規(guī)則，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"));

});

//如果一進入頁面就需要執(zhí)行某件事，比如下面獲得check框是否被選中

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

});

function bindfield10146(){

alert("請假天數(shù)："+jQuery("#field10146").val());

}

//綁定明細字段

jQuery(document).ready(function(){

//綁定已經存在的數(shù)據(jù)

//綁定明細表1，indexnum0 代表當前有多少行明細，包括刪除的明細數(shù)據(jù)

//如果需要綁定明細表2，則需要把indexnum0改成indexnum1，明細表3，indexnum2，后面的類推

//明細字段的命名規(guī)則為field+字段的id+"_"+明細數(shù)據(jù)的行號

//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);

});

}

//動態(tài)綁定添加行的里面的字段，當前添加的行，行號等于明細表行數(shù)的值 - 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管理系統(tǒng)html 模板之多tab頁應用

這個功能實現(xiàn)其實很簡單，就是在html模板里面，把流程的主字段table、明細表table分別使用div框起來，然后給div加上不同的id。然后再在頁面上添加幾個點擊（onclick）事件，分別來隱藏或者顯示不同的div里面的內容，就可以達到多tab頁的效果了。

例子如下：

流程頁面有3個明細表

我們加4個div來實現(xiàn)點擊上面主表數(shù)據(jù)，明細表1，明細2，明細表3來顯示不同的內容，也就是對流程頁面的數(shù)據(jù)進行拆分。

整個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();//隱藏主表數(shù)據(jù)

jQuery("#detaildata1").hide();//隱藏明細表1數(shù)據(jù)

jQuery("#detaildata2").hide();//隱藏明細表2數(shù)據(jù)

jQuery("#detaildata3").hide();//隱藏明細表3數(shù)據(jù)

jQuery("#"+tabid).show();//顯示點擊的tab頁數(shù)據(jù)

jQuery("li").removeClass("now");//刪除tab頁樣式

jQuery("#"+obj.id).addClass("now");//給當前點擊的tab頁加上樣式

}

</script>

效果圖如下：

3）泛普OA平臺綜合應用

下面這個例子將的是，根據(jù)頁面上科目的值，到異構系統(tǒng)去查詢該科目有哪些賦值核算項，然后再在頁面上添加出對應的輔助核算字段讓客戶填寫。

大家先看下實現(xiàn)的效果圖：

實現(xiàn)該功能的步驟如下：

 實現(xiàn)改功能建議大家使用我們流程的自定義頁面來寫所需要的代碼。因為寫自定義頁面，我們除了可以寫js代碼外，還能寫java代碼，這樣實現(xiàn)該功能就簡單化了。

 第一步，先通過綁定事件對科目進行綁定，添加一個監(jiān)聽事件

 第二步，添加的監(jiān)聽事件，當發(fā)現(xiàn)科目的值被修改時，則通過ajax去訪問異構系統(tǒng)，查詢對應的表，獲得當前科目有哪些輔助核算項。

 第三步，獲得了當前科目有哪些輔助核算項之后，大家需要自己去寫出button的按鈕（這部分可以結合視頻一起觀看，容易理解些）。這個button按鈕的內容其實就是要跟我們正常點添加明細行生成出來的button按鈕一樣。這樣做的一個好處是，我們不需要自己再去寫后臺保存輔助核算項的數(shù)據(jù)。

 這個具體的實現(xiàn)，大家可以觀看視頻，我們下面把實現(xiàn)該接口用到代碼和文檔建附件（巨人通力demo.rar）。

發(fā)布：2006-04-22 15:14 編輯：泛普軟件 · admin [打印此頁] [關閉]

相關欄目：

上一篇：協(xié)同OA軟件8.5新功能之流程郵件外發(fā)

下一篇：協(xié)同OA軟件的概念如此多，某CIO的非官方分析

功能介紹

聯(lián)系方式

成都公司：成都市成華區(qū)建設南路160號1層9號

重慶公司：重慶市江北區(qū)紅旗河溝華創(chuàng)商務大廈18樓

咨詢：400-8352-114

加微信，免費獲取試用系統(tǒng)

QQ在線咨詢

電話咨詢：
4008352114

QQ在線咨詢