自適應屬性

1

版本。

注1：2018-12-27 之前的 JAR 包需要安裝自適應插件。

注2：本文僅適用於 PC 端，行動端自適應方法請參見：【通用】行動端自適應。

2

應用場景。

1. PC 端，使用者預覽範本希望能夠根據螢幕決議度自適應。

3

功能簡介。

1. 普通報表和複合式報表可設定表格自適應（橫向自適應、雙向自適應）、字體自適應。

2. 決策報表可設定表格自適應（預設、橫向自適應、雙向自適應）、字體自適應。

注：資料分析預覽不支援自適應屬性。

1

設定。

1. 設定方式：點選【範本】→【PC 端自適應屬性】，點選【PC 端報表塊自適應屬性】面板，有兩種設定，如下圖1所示。

2. 【採用伺服器設定】：預設選中【採用伺服器設定】，設定對設計器下所有【採用伺服器設定】的範本均生效。

3. 【為該範本單獨設定】：選擇【為該範本單獨設定】，則【字體】和【表格】自適應設定僅對當前範本生效。

2

自適應邏輯。

1. 自適應邏輯如下表格所示。

注1：一定比例為 0.4，瀏覽器中報表的寬高 / 正文寬高 < 0.4

注2：參數介面不自適應。

注3：當設定有【凍結行】時，列高被限制，雙向自適應則不生效，等同於【橫向自適應或不自適應】。

1

設定方式。

1. 設定方式：點選【範本】→【PC 端自適應屬性】，點選【PC 端報表塊自適應屬性】面板，有兩種設定，如下圖1所示。

2. 【採用伺服器設定】：預設選中【採用伺服器設定】，設定對設計器下所有【採用伺服器設定】的範本均生效。

3. 【為該範本單獨設定】：選擇【為該範本單獨設定】，則【字體】和【表格】自適應設定僅對當前範本生效。

2

自適應邏輯。

1. 開啓自適應後預覽報表時，瀏覽器端報表的呈現效果和螢幕決議度有一定的聯動。

2. body 大小表示的是畫布真實大小，當 body 大小和螢幕決議度大小一致時，範本預覽時會顯示真實大小，不會縮放；當 body 大小和螢幕決議度大小不一致時，會以螢幕決議度和 body 大小的比例產生縮放。同一範本，在低決議度電腦下預覽時縮放比例更大，所以適合高決議度螢幕下的報表在低決議度螢幕下預覽時，會比較容易出現捲動條。如下圖1、圖2所示。

3. 使用者在設計報表時，若報表最終需要在多種不同的決議度電腦下預覽，推薦在低決議度電腦上做範本，需要開啓字體自適應，範本完成後，在高決議度電腦上測試預覽時，如果有細微不適應問題，微調一下即可。

注1：一定比例為 0.4，瀏覽器中報表的寬高 / 正文寬高 < 0.4。

注2：報表塊存在凍結時，報表塊自適應不生效。

注3：IE8 及以下版本的瀏覽器，不支援決策報表自適應。

注4：僅在表格預設自適應時，決策報表的懶載入邏輯方生效，其他自適應邏輯下不生效。

注5：開啓字體自適應後，報表塊組件和 Tab 塊中的報表塊，預覽時字體大小不能完全保持一致。

3

佈局方式

1. 預覽後瀏覽器視窗縮放，與body 佈局方式 有關，如下圖所示。

1. 本文的【PC 端自適應屬性／PC 端報表塊自適應屬性】對行動端不生效。

2. 行動端自適應設定請參見：【通用】行動端自適應。

1

1. 問題描述：範本設定橫向自適應後，預覽字體模糊。

2. 解決方案：橫向自適應會預留捲動條，因此右側出現一點空白，導致字體顯示稍微模糊，屬於正常效果。使用者若希望字體清楚，可設定雙向自適應。

2

1. 問題描述：決策報表設定 PC 端雙向自適應，body 雙向自適應，報表塊雙向自適應後，改變瀏覽器頁面大小，還是會出現捲動條。

2. 原因分析：屬於系統 DPI 問題，決議度為 1920*1080 ，縮放率為 125% 時，會出現橫向捲動條，前臺會隱藏該捲動條，但捲動條依然是存在的。

3. 解決方案：將縮放設定為 100%  。若因報表塊內容過多而導致捲動條產生，可以透過限制內容或隱藏捲動條的方法去除捲動條，請參見：隱藏捲動條 。

3

1. 問題描述：決策報表中，當報表塊中設定了凍結，在自適情況下，出現報表內容沒有撐滿全螢幕，四週有空白的問題。

2. 解決方案：可使用新自適應插件解決此問題，具體可參考：決策報表新自適應插件。若瀏覽器縮放或全螢幕下，報表塊下方出現空白問題，可以給 body 新增一個初始化事件，調整顯示。事件代碼內容如下代碼塊所示。

$(window).resize(function () {
var width = FR.windowWidth; //獲取瀏覽器視窗長度。
var height = FR.windowHeight;//獲取瀏覽器視窗高度。
//調整報表form的長寬。
var from = _g().getWidgetByName('form')
if (form.oriWidth === width && form.oriHeight === height) {
return;
}
form.oriWidth = width;
form.oriHeight = height;
//載入報表內容。
form.loadContentPane(true);
}
);