历史版本6 :JS实现报表在数据分析模式下居中显示 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
1.1 问题描述
目前,报表以数据分析模式预览时,默认都是靠左显示的。有时会想以数据分析模式预览时,要求报表居中显示,可是数据分析模式并不具备分页预览或填报预览的功能:报表显示位置设置项。
分页预览设置:
填报预览设置:
数据分析设置:
注:数据分析没有报表显示位置选项
1.2 实现思路编辑
在数据分析模式,通过给报表添加加载结束 JS 事件,来实现报表居中。
2. 示例编辑
2.1 操作步骤
打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\OrderReport\Order_5.cpt
点击模板>模板 Web 属性>数据分析设置,选择为该模板单独设置,在事件设置中添加一个加载结束事件:
JS 代码如下:
ms = $('.html-content').length;//判断是否为多sheet
if (ms != 0){
//多sheet
ff=$(".frozen-table",$('.html-content:visible')).length//判断当前sheet是否有冻结
if (ff == 0) {
//未冻结
var slmargin = ($(".content-container").width()-$(".sheet-container div:first-child",$('.html-content:visible')).width())/2;
if (slmargin > 0) {
$('.sheet-container',$('.html-content:visible')).css('margin-left',slmargin);
$(".x-table",$('.html-content:visible')).css('left',slmargin);
$(window).resize();
}
}
else {
//冻结
var slmargin=($(".content-container").width()-$('.x-table',$('#frozen-center'),$('.html-content:visible')).width()-$('.x-table',$('#frozen-west'),$('.html-content:visible')).width())/2;
if (slmargin > 0) {
$('.sheet-container',$('.html-content:visible')).css('margin-left',slmargin);
$(window).resize();
}
}
}
else {
ff=$(".frozen-table").length//判断当前sheet是否有冻结
//单sheet
if (ff == 0) {
//未冻结
slmargin = ($(".content-container").width() - $(".sheet-container div:first-child").width()) /2;
if (slmargin > 0) {
$('.sheet-container').css('margin-left',slmargin);
$(".x-table").css('left',slmargin);
$(window).resize();
}
}
else {
//冻结
slmargin=($(".content-container").width()-$('.x-table',$('#frozen-center')).width()-$('.x-table',$('#frozen-west')).width())/2;
if (slmargin > 0) {
$('.sheet-container').css('margin-left',slmargin);
$(window).resize();}
}
}
2.2 效果预览
保存模板,点击数据分析预览,PC 端效果如下所示:
3.模板下载编辑
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\数据分析JS实例\01-JS实现报表在数据分析模式下居中显示.cpt
点击下载模板:JS实现报表在数据分析模式下居中显示.cpt