2.1 准备数据

新建普通报表，新建数据库查询数据集 ds1，SQL 语句为：SELECT * FROM Sales

2.2 设计表格

如下图设计填报模板的表格样式，其中 A3 单元格的左父格为 B3。

A2、A3 单元格中添加「复选按钮控件」，C1、D1、E1、F1、G1、C3、D3、E3、F3、G3 单元格中添加「文本控件」，H5单元格添加按钮控件。

给A3的复选按钮控件设置控件名称：box。该名称可自定义，但如果修改了此名称，后续JS代码中的控件名称box也需要同步修改。

2.3 全选功能实现

1)选中 A2 单元格(全选复选框)，添加一个状态改变事件，如下图所示：

JavaScript 代码如下：var flag = this.getValue();

//获取当前值

var boxes = _g().getWidgetsByName("box");

//获取当前页的复选按钮控件数组

if (typeof(boxes[0]) != "undefined") {

for (i = 0; i < boxes.length; i++) {

var cr=FR.cellStr2ColumnRow(boxes[i].options.location);

//获取行列号对象

_g().setCellValue(0,cr.col,cr.row,flag);

//如果控件大于1个，则遍历赋值

}

} else {

var cr=FR.cellStr2ColumnRow(boxes.options.location);

//获取行列号对象

_g().setCellValue(0,cr.col,cr.row,flag);

//如果控件只有1个，则直接赋值

}

2)选中 A3 单元格(单选复选框)，添加一个状态改变事件，如下图所示：

JavaScript 代码如下：

var isAllChecked = true;

//设置标记状态为选中

var boxes = _g().getWidgetsByName("box");

//获取当前页的复选按钮控件数组

if (typeof(boxes[0]) != "undefined") {

for (i = 0; i < boxes.length; i++) {

isAllChecked = boxes[i].getValue() == true ? isAllChecked : false;

//如果控件大于1个，则遍历获取值，一旦出现未选中状态的按钮，则将标记值改为false

}

} else {

isAllChecked = boxes.getValue();

//如果控件只有1个，则直接获取控件值，并传给标记值

}

_g().setCellValue(0, 0, 1, isAllChecked);

//将标记值赋给A2单元格

3)通过上面的设置，可以在点击全选复选框时，实现底下所有复选框被选中；取消全选，所有的复选框全不选。但是存在一个问题，当使用了填报分页时，翻页后全选按钮的状态不会更新，此时需要在A2单元格(全选复选框)，添加一个初始化后事件来解决。

JavaScript 代码如下：setTimeout(function() {

var isAllChecked = true;

//设置标记状态为选中

var boxes = _g().getWidgetsByName("box");

//获取当前页的复选按钮控件数组

if (typeof(boxes[0]) != "undefined") {

for (i = 0; i < boxes.length; i++) {

isAllChecked = boxes[i].getValue() == true ? isAllChecked : false;

//如果控件大于1个，则遍历获取值，一旦出现未选中状态的按钮，则将标记值改为false

}

} else {

isAllChecked = boxes.getValue();

//如果控件只有1个，则直接获取控件值，并传给标记值

}

_g().setCellValue(0, 0, 1, isAllChecked);

//将标记值赋给A2单元格

}, 50)

2.4 批量删除行功能实现

选中 H5 单元格(按钮控件)，添加一个点击事件，如下图所示：

JavaScript 代码如下：var boxes = _g().getWidgetsByName("box");

//获取当前页的复选按钮控件数组

var cells = [];

if (typeof(boxes[0]) != "undefined") {

for (i = 0; i < boxes.length; i++) {

if (boxes[i].selected()) {

cells.push(boxes[i].options.location); //如果控件大于1个，则遍历判断是否选中，将选中的控件所在的单元格编号塞进数组中

}

}

} else {

if (boxes.selected()) {

cells.push(boxes.options.location);

//如果控件只有1个，则直接判断是否选中，选中的话把单元格编号塞进数组中

}

}

_g().deleteRows(cells);

//根据单元格编号删除行

注：批量删除行功能不支持移动端

2.5 批量修改功能实现

给C1、D1、E1、F1、G1单元格的控件，添加编辑结束事件，如下图所示：

JavaScript 代码如下：var boxes = _g().getWidgetsByName("box");

//获取当前页的复选按钮控件数组

var value = this.getValue();

//获取当前控件值

if (typeof(boxes[0]) != "undefined") {

for (i = 0; i

if (boxes[i].getValue() == true) {

var row = FR.cellStr2ColumnRow(boxes[i].options.location).row;

//获取行号

var col = FR.cellStr2ColumnRow(this.options.location).col;

//获取列号

_g().setCellValue(0, col, row, value);

//如果控件大于1个，则遍历修改选中行当前列的值

}

}

} else {

if (boxes.getValue() == true) {

var row = FR.cellStr2ColumnRow(boxes.options.location).row;

//获取行号

var col = FR.cellStr2ColumnRow(this.options.location).col;

//获取列号

_g().setCellValue(0, col, row, value);

//如果控件只有1个，则直接判断是否选中，选中的话修改当前列的值

}

}

2.6 效果预览

保存模板，点击填报预览。

PC 端效果如下所示：

移动端效果如下所示：