历史版本7 :JS实现分页预览改变指定行的行高/列宽 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本功能变更
11.0-
11.0.10优化了表格接口,历史接口会保留,但后期不会再迭代优化。新接口层级明显,功能完善,用户可升级使用新接口。新接口从 表格对象>表格行列>单元格对象 三级,层层定位表格中的元素,帮用户快速实现各种复杂应用场景。详情请参考:表格历史接口

1.2 预期效果

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

1.gif

2.gif

1.3 实现思路

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

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

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

2. 改变行高编辑

2.1 示例一

2.1.1 打开报表

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

2.1.2 添加事件

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

5.png

 JavaScript 代码如下:

_g().setRowHeight(3,35);

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

2023-01-29_10-43-24.png

2.1.3 效果预览

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

注:不支持移动端

2.2 示例二

2.2.1 打开模板

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

2.2.2 添加按钮

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

6.png

3)添加按钮控件,将按钮名称设置为:改变行高,如下图所示:

7.png

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 节所示。

注:不支持移动端

3. 改变列宽编辑

与 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);

4. 注意事项编辑

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

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