1. 概述
1.1 版本說明
| 報表服務器版本 | HTML5移動端展現插件版本 | App版本 | 功能變動 |
|---|---|---|---|
| 10.0 | V10.4.976 | V10.4.976 | 移動端支持複選框全選 |
1.2 問題描述
在使用我們的複選框控件的時候，如何實現點擊全選，則下面的所有信息都被選中呢？效果如下圖所示：
1.3 實現思路
在複選框中的初始化事件中把控件加入到一個全局數組裏，然後在全選複選框裏對數組裏的控件進行遍曆賦值。
2. PC端示例
2.1 準備數據
新建普通報表，新建數據庫查詢數據集 ds1，SQL 語句爲：SELECT * FROM Sales
2.2 設計表格
如下圖設計填報模板的表格樣式，其中 A2 單元格的左父格爲 B2。
A1、A2 單元格中添加「複選按鈕控件」，B2、C2、D2、E2、F2、G2 單元格中添加「文本控件」。
2.3 添加事件
1）選中 A1 單元格（全選複選框），添加一個狀态改變事件，如下圖所示：
JavaScript 代碼如下：
var flag=this.getValue(); //獲取當前複選框控件的狀态，true /false
for(var i=0;i<window.lineboxes.length;i++){ //循環遍曆每個複選控件
var cr=FR.cellStr2ColumnRow(window.lineboxes[i].options.location);
//由每個控件位置獲取行号列号
_g().setCellValue(cr.col, cr.row, flag); //逐一賦值當前狀态
}
2）選中 A2 單元格（單選複選框），添加一個初始化後事件，如下圖所示：
JavaScript 代碼如下：
if (!window.lineboxes) {
window.lineboxes = []; //控件加入到一個全局數組裏
}
lineboxes[lineboxes.length] = this;
3）通過上面的設置，可以在點擊全選複選框時，實現底下所有複選框被選中，取消全選，所有的複選框全不選。但是存在一個問題，如果單獨複選或不選中其中一個時，全選複選框不會自動判斷當前是否全選還是全不選。需要對單選複選框的值改變後進行設置，添加狀态改變後事件，如下圖所示：
JavaScript 代碼如下：
//A1爲一鍵全選按鈕的位置，可根據實際情況修改
//當前複選框未選擇時，設置全選不選中
if(this.getValue()==false){
_g().setCellValue('A1',null,false);
} else {
var allChecked=true;
//循環判斷所有複選框都選中時，将全選複選框選中
for(var i=0;i<lineboxes.length;i++){
if(lineboxes[i].getValue()==false){
allChecked=false;
}
}
//如果全選中時，自動讓A1全選複選框選中
_g().setCellValue('A1',null,allChecked);
}
2.4 效果預覽
保存模板，點擊填報預覽，PC 端效果如下所示：
3. 移動端示例
移動端實現複選框全選跟 PC 端在寫法上有2個不同的地方，分别如下：
移動端不支持直接用lineboxes，需要寫成window.lineboxes
移動端不支持setCellValue('A1',null,value)寫法，需要寫成setCellValue(0,0,value)
3.1 準備數據
新建普通報表，新建數據庫查詢數據集 ds1，SQL 語句爲：SELECT * FROM Sales
3.2 設計表格
如下圖設計填報模板的表格樣式，其中 A2 單元格的左父格爲 B2。
A1、A2 單元格中添加「複選按鈕控件」，B2、C2、D2、E2、F2、G2 單元格中添加「文本控件」。
3.3 添加事件
1）選中 A1 單元格（全選複選框），添加一個狀态改變事件，如下圖所示：
JavaScript 代碼如下：
var flag=this.getValue(); //獲取當前複選框控件的狀态，true /false
for(var i=0;i<window.lineboxes.length;i++){ //循環遍曆每個複選控件
var cr=FR.cellStr2ColumnRow(window.lineboxes[i].options.location);
//由每個控件位置獲取行号列号
_g().setCellValue(cr.col, cr.row, flag); //逐一賦值當前狀态
}
2）選中 A2 單元格（單選複選框），添加一個初始化後事件，如下圖所示：
JavaScript 代碼如下：
if (!window.lineboxes) {
window.lineboxes = []; //控件加入到一個全局數組裏
}
window.lineboxes[window.lineboxes.length] = this;
3）通過上面的設置，可以在點擊全選複選框時，實現底下所有複選框被選中，取消全選，所有的複選框全不選。但是存在一個問題，如果單獨複選或不選中其中一個時，全選複選框不會自動判斷當前是否全選還是全不選。需要對單選複選框的值改變後進行設置，添加狀态改變後事件，如下圖所示：
JavaScript 代碼如下：
//當前複選框未選擇時，設置全選不選中
if(this.getValue()==false){
_g().setCellValue('A1',null,false);
} else {
var allChecked=true;
//循環判斷所有複選框都選中時，将全選複選框選中
for(var i=0;i<window.lineboxes.length;i++){
if(window.lineboxes[i].getValue()==false){
allChecked=false;
}
}
//如果全選中時，自動讓A1全選複選框選中
_g().setCellValue('A1',null,allChecked);
}
3.4 效果預覽
保存報表，點擊移動端預覽，選擇填報預覽，App 端和 H5 端同時支持複選框全選，效果如下圖所示：
4. 模板下載
4.1 PC 端
已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實例\53-JS實現複選框控件全選.cpt
點擊下載模板：53-JS實現複選框控件全選.cpt
4.2 移動端
已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填報預覽JS實例\JS實現移動端複選框控件全選.cpt
點擊下載模板：JS實現移動端複選框控件全選.cpt
