報表:JS實現填寫後自動移出光標,解決控件值刷新不及時(實用性更強,適用於所有控件、大小型填報表)

之前發過一篇博客,也是解決報表中控件值刷新不及時的問題,經過後續的項目需求和項目實施,博主終於又發現另一種方法,可以在點擊按鈕時,移出光標,快速獲取控件值,同樣也達到了解決控件值刷新不及時的效果。

移出光標,意味着不管界面上有多少個控件,都可以不用在各個控件上單獨寫JS,只需要在按鈕上(或超鏈接)添加一個點擊的JS事件,即可一次性搞定,避免重複開發,報表更容易維護,提高開發效率,實用性更強。

在一些含有較多控件的報表中,點擊按鈕時,需要觸發事件,使前端把控件中的數據傳給後臺處理時。按常規做法,如果在點擊按鈕時,不事先移出光標,會導致最後一個控件只能獲取到舊的控件值,即表明控件值刷新不及時;如果之前我的博客中的方法,確實可以解決控件值刷新不及時的問題,這個的開發效率和維護成本,對控件只有三兩個的情況還是挺友好的,但是對有比較多控件的報表,就會大大降低開發效率,維護成本也漲了很多。如下圖,就要給20來個控件寫JS事件,費力不討好。

博主接下來介紹的這種方法,是只需要在按鈕控件(或其他超鏈接)中加入點擊的JS事件,在JS事件中,巧妙使用setTimeout()和其他自定義funtion()結合,就可以移出光標,及時刷新控件值,獲取到最新的控件值,不受控件的數量、控件的類型、控件的位置所影響,一步到位,提高開發效率,極大地降低了開發成本。

1、報表界面設計:

開發人員可以自定義整個報表界面,此處獲取控件值可以是支持所有控件,不同控件的控件值獲取方法,可以參考我前面的博客https://blog.csdn.net/wang1qqqq/article/details/85694695,本次示例爲文本控件。在按鈕控件中,按鈕是用來觸發後臺執行事件的,此處只示例獲取到所有控件值,並彈窗顯示出獲取到的控件值。

2、javascripts事件編輯:

優化前部分正常部署,只是普通的獲取控件值的方法,然後拼接控件值,彈窗返回;

優化後也同樣也採用普通的獲取控件值的方法,不過需要將獲取控件值的方法,跟setTimeout()函數結合起來,就可以達到獲取值之前移出光標的效果,及時刷新控件值。

(一)優化前

代碼如下:

var mc=contentPane.getCellValue(2,1);
var xb=contentPane.getCellValue(2,2);
var nl=contentPane.getCellValue(2,3);
var jg=contentPane.getCellValue(2,4);
alert("姓名:"+mc+";性別:"+xb+";年齡:"+nl+";籍貫:"+jg);

(二)優化後

代碼如下:

function remove(){
    function work(){
        var mc=contentPane.getCellValue(6,1);
        var xb=contentPane.getCellValue(6,2);
        var nl=contentPane.getCellValue(6,3);
        var jg=contentPane.getCellValue(6,4);
        alert("姓名:"+mc+";性別:"+xb+";年齡:"+nl+";籍貫:"+jg);
    }
    return work;
}
var work=remove()
setTimeout(work,0)

3、效果圖:

如上,在按鈕(或其他超鏈接)中添加點擊事件,使用JS中的setTimeout()函數和預定義的獲取值事件結合,就可以及時移出光標,及時刷新控件值,獲取當前最新的控件值,準確無誤地將前端數據傳給後臺,由後臺根據數據執行後臺預定義的行爲。

這種做法實現了移出光標,及時刷新控件值的效果,還更加優化了及時刷新控件值的方法,JS只需要一步到位,避免代碼重複開發,提高了開發效率,降低開發成本,大大提高了報表的實用性,也方便了開發人員對報表的維護。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章