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

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

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

申請(qǐng)免費(fèi)試用、咨詢電話：400-8352-114

第九部分泛普免費(fèi)OA軟件Html模式的流程應(yīng)用

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

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

二. OA軟件應(yīng)用案例

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

 要綁定一個(gè)事件，首先要找到的是字段的id，其實(shí)就是對(duì)應(yīng)的html控件的id。

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

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

我要查找請(qǐng)假天數(shù)這個(gè)字段的id

可以看到字段的id為field10146。

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

ii. 從表單上看，如下圖

一樣可以看到字段的id為10146?？丶?duì)應(yīng)的id就為field10146。

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

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

 綁定事件

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

代碼如下：

//綁定主字段

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

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

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

//主字段命名規(guī)則，field+字段的id，如field10146 10146為字段的id

jQuery(document).ready(function(){

//文本框、瀏覽框

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

bindfield10146();

});

//下拉框

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

alert("請(qǐng)假類型："+jQuery("#field10147").val());

});

//check框

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

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

});

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

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

});

function bindfield10146(){

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

}

//綁定明細(xì)字段

jQuery(document).ready(function(){

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

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

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

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

//field10150_0 字段id為10150 行號(hào)為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);

});

}

//動(dòng)態(tài)綁定添加行的里面的字段，當(dāng)前添加的行，行號(hào)等于明細(xì)表行數(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頁應(yīng)用

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

例子如下：

流程頁面有3個(gè)明細(xì)表

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

整個(gè)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();//隱藏明細(xì)表1數(shù)據(jù)

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

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

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

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

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

}

</script>

效果圖如下：

3）泛普OA平臺(tái)綜合應(yīng)用

下面這個(gè)例子將的是，根據(jù)頁面上科目的值，到異構(gòu)系統(tǒng)去查詢?cè)摽颇坑心男┵x值核算項(xiàng)，然后再在頁面上添加出對(duì)應(yīng)的輔助核算字段讓客戶填寫。

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

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

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

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

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

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

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

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

相關(guān)欄目：

相關(guān)文章：

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

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

功能介紹

聯(lián)系方式

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

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

咨詢：400-8352-114

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

QQ在線咨詢

電話咨詢：
4008352114

QQ在線咨詢