JS实现自定义工具栏高度

1.1 版本

1.2 预期效果

报表预览时，工具栏高度是固定的，若需要自定义工具栏的高度，例如自定义工具栏长 300 ，高 100，如下图所示：

1.3 实现思路

在「模板 Web 属性>分页预览设置」中添加「加载结束」事件，利用 JS 控制工具栏的高度。

2.1 准备模板

准备一个空白模板。

2.2 添加事件

打开模板，点击「模板>模板 Web 属性>分页预览设置」，选择为「该模板单独设置」，添加一个「加载结束」事件，如下图所示：

JavaScript 代码如下：

_g().getToolbar().setStyle({
    width: 300,
    height: 100
});

若出现由于工具栏高度增加，页面整体下移将原本页面上最下面一行的数据会被挡住的情况，可使用如下代码：

_g().getToolbar().setStyle(

{ height: 50, width: 100 }
);
$(window).trigger('resize');
_g().getToolbar().setStyle(

{ height: 50, width: 100 }
);

2.3 效果预览

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

注：不支持移动端。

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具栏JS实例\08-JS实现自定义工具栏高度.cpt

点击下载模板：08-JS实现自定义工具栏高度.cpt