1. 程式人生 > >報表:JS中獲取控制元件資訊時,各控制元件變數名梳理

報表:JS中獲取控制元件資訊時,各控制元件變數名梳理

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

1、報表介面設計

2、javascripts事件編輯:

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

(一)文字控制元件:

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、效果圖:

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