JS Center the Report Body in Data Analysis Preview Mode

  • Last update:  2020-12-16
  • I. Overview

    1.1 Requirement

    In Pagination Preview and Data Entry Preview modes, users can choose report alignment options. While in Data Analysis Preview mode, the report is aligned to the left by default and users cannot make other alignment options. How to make the report centrally aligned in Data Analysis Preview mode?


    1.2  Solution

    In Data Analysis mode, add a Loading End event to center the report.

    II. Sample

    2.1Add an event

    Open the template, click [Template] >[Web Attributes] >[Data Analysis Settings], and check [Individually set for the template]. In the [Event Settings], add a Loading End event. See the demonstration below:

     

    Input the following JavaScript codes:

    ms = $('.html-content').length;// Define whether there are many sheets
    if (ms != 0){
       //There are many sheets
       ff=$(".frozen-table",$('.html-content:visible')).length// Define whether the current sheet is frozen
    if (ff == 0) {
       //Not frozen
       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 {
       //Frozen
       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// Define whether the current sheet is frozen
       //There is a single sheet
       if (ff == 0) {
           // The sheet is not frozen
           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 {
       //The sheet is frozen
       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 Preview

    Save the template and click [Data Analysis Preview]. The preview effect on a PC is shown as below:

     

     

    III. Download the template

    Attachment List


    Theme: Report Application
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy