js分析报表居中

最新推荐文章于 2024-12-26 11:24:32 发布

qq_22806243

最新推荐文章于 2024-12-26 11:24:32 发布

阅读量344

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js css

本文链接：https://blog.youkuaiyun.com/qq_22806243/article/details/103175774

js 专栏收录该内容

2 篇文章

订阅专栏

本文分享了一段实用的JavaScript代码，用于实现报表在不同情况下（单个多sheet、冻结与否）的居中显示效果，通过动态调整margin-left值确保报表在页面上美观呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js分析报表居中

因为经常要用，贴上来保存一下：

//判断是否为多sheet
ms = $('.html-content').length;
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 {
//判断当前sheet是否有冻结
ff=$(".frozen-table").length
//单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();}
}
}