JS控制工具栏居中/居右显示

1. 描述

在实际项目中，有时客户会要求把工具栏的按钮居中显示或者居右显示，这时就会用到这个功能。

2.1 打开报表

打开%FR_HOME%/WebReport/WEB-INF/reportlets/doc/Advanced/Father.cpt

2.2 模板设计

点击菜单模板>模板web属性>分页预览设置，选择“为该模板单独设置”添加加载起始事件，js为：

$('.x-toolbar').css('vertical-align','middle'); $('table').css({'margin-left':'auto','margin-right':'auto'});

如图所示：
222

2.3 效果查看

点击分页预览，可见工具栏居中显示。
222

3.1 报表设计

打开%FR_HOME%/WebReport/WEB-INF/reportlets/doc/Advanced/Father.cpt

参照上述过程，点击菜单模板>模板web属性>分页预览设置，选择“为该模板单独设置”添加加载起始事件，js为：

$('.x-toolbar').css('vertical-align','middle'); $('table').css({'float':'right'});

3.2 效果查看

点击分页预览，可见工具栏居右显示。
222

当同时使用顶部工具栏和底部工具栏时，使用上面的方法会使两个工具栏都居右显示，如下图所示：

222

如只需将顶部工具栏居右显示，可点击菜单模板>模板web属性>分页预览设置，选择“为该模板单独设置”添加加载起始事件，添加js为：

$('.x-toolbar').eq(0).css('vertical-align','middle'); $('table').eq(0).css({'float':'right'});

点击分页预览，效果如下图所示：

222
若只下想设置底部工具栏为居右显示，则将js修改为：

$('.x-toolbar').eq(2).css('vertical-align','middle'); $('table').eq(2).css({'float':'right'});

点击分页预览后，即可看到底部工具栏居右显示。

注：需要添加加载起始事件，添加加载结束时间不起作用。

主题： 二次开发

标签：已验证工具栏按钮居中按钮居右

文档内容仅供参考，如果你需要获取更多帮助，请咨询帆软技术支持
关于技术问题，您还可以通过帆软论坛获取帮助，论坛上有非常多的大神，有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题，可以联系帆软传说哥（微信ID：frbiaoge）