JS实现分页预览改变指定行的行高/列宽

1.1 版本

1.2 预期效果

用户在进行报表设计时，需要改变指定行的行高或改变指定列的列宽，如下图所示：

1.3 实现思路

可以通过给指定行增加「加载结束」事件，或添加按钮控件，对按钮添加「点击事件」实现指定行改变行高。本文将以改变第 3 行的行高为 35，第 3 列的列宽为 60 ，为例进行说明。

11.0.10 之前版本单元格行高相关 JS 接口可参考：修改行高列宽接口

11.0.10 及之后版本单元格行高相关 JS 接口可参考：表格行列对象接口

2.1 示例一

2.1.1 打开报表

打开模板：%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式报表.cpt

2.1.2 添加事件

1）11.0.10 之前版本：菜单栏点击「模板>模板 Web 属性>分页预览设置」，选择「为该模板单独设置」，然后添加「加载结束事件」，如下图所示：

 JavaScript 代码如下：

_g().setRowHeight(3,35);

2）11.0.10 及之后版本：菜单栏点击「模板>模板 Web 属性>分页预览设置」，选择「为该模板单独设置」，然后添加「加载结束事件」，如下图所示：

2.1.3 效果预览

保存报表，点击「分页预览」，效果如下图所示：

注：不支持移动端

2.2 示例二

2.2.1 打开模板

打开模板：%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式报表.cpt

2.2.2 添加按钮

1）编辑参数面板，取消勾选「点击查询前不显示报表内容」，如下图所示：

2）添加按钮控件，将按钮名称设置为：改变行高，如下图所示：

2.2.3 添加点击事件

1）11.0.10 之前版本的JS代码为：_g().setRowHeight(3,35);，如下图所示：

2）11.0.10 及之后版本JS代码为：_g().getRow(3).setHeight(35);，如下图所示：

2.2.4 效果预览

保存报表，点击「分页预览」，效果如 1.2 节所示。

注：不支持移动端

与 2.1 节和 2.2 节示例步骤类似，仅需要修改 JavaScript 代码即可，不再重复赘述，以改变表格的第 3 列的列宽为 60 为例，如下所示：

1）11.0.10 之前版本的JavaScript 代码如下：

_g().setColWidth(3,60)

2）11.0.10 及之后版本的JavaScript 代码如下：

_g().getColumn(3).setWidth(60);

1）修改行高和列宽时，所在的行和列存在最小行高和列宽，例如单元格的行高是 20，里面的文字内容占了 18，当调整格子高度是 10 的时候指定行高不会小于文字的高度，调整以后的效果是行高变成 18 。

2）JS 接口支持将行高调整至 0 。