報表:JS中獲取控件數據/行號/列號,各控件變量名梳理

前面分享了在報表中需要獲取控件所在行號,以用來獲取所在行上的數據信息的業務需求,在前面分享的是用按鈕控件用來獲取當前所在行的,當實際應用中,我們還有可能用到其他多種控件,如:文本控件、數字控件、密碼控件、下拉框控件、下拉複選框控件、單選複選框控件、複選框組控件、日期控件、文件控件、下拉樹控件等等多種控件,前面分享的按鈕控件是通過 $btn 來獲取按鈕控件所在行的,其他控件用的就會有所不一樣了,下面把目前主要用到的控件類型以及獲取所在行時代碼的寫法分享一下。

1、報表界面設計

2、javascript事件編輯:

各控件所用代碼基本相似,此處截圖示例文本控件的代碼,其他控件的相關代碼在下面羅列:

(一)文本控件:

var $td=$(this.editComp).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,1,rownum);

(二)文本域控件:

var $td=$(this.editComp).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,2,rownum);

(三)數字控件:

var $td=$(this.editComp).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,3,rownum);

(四)密碼控件:

var $td=$(this.editComp).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,4,rownum);

(五)按鈕控件:

var $td=$(this.$btn).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,5,rownum);

(六)複選框控件:

var $td=$(this.$btn).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,6,rownum);

(七)單選複選框控件

var $td=$(this.$container).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,7,rownum);

(八)複選框組控件

var $td=$(this.$container).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,8,rownum);

(九)下拉框控件

var $td=$(this.editComp).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,9,rownum);

(十)下拉複選框控件

var $td=$(this.editComp).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,10,rownum);

(十一)日期控件

var $td=$(this.editComp).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,11,rownum);

(十二)文件控件

var $td=$(this.$uploadForm).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,12,rownum);

(十三)列表控件

var $td=$(this.element).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,13,rownum);

(十四)網頁控件

(十五)下拉樹控件

var $td=$(this.editComp).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,15,rownum);

(十六)視圖樹控件

var $td=$(this.element).parents("td")[0];
var rownum =contentPane.curLGP.getTDRow($td)-1;
contentPane.setCellValue(3,16,rownum);

3、效果圖:

如上,在報表的實際應用中,就可以使用多種控件,通過用javascript獲取控件當前行的部分或全部數據,進而傳給數據接口等,控制性地對數據處理、儲存等操作,提供了開發的方便性,提高效率;解決公式獲取到的是數組的問題,也解決了數據入庫總是要整個頁面進行入庫時耗時長、佔用內存大的問題。

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