SAP Fiori Elements List Report Smart Table 列項目寬度計算的奧妙

這是 Jerry 2021 年的第 36 篇文章，也是汪子熙公眾號總共第 312 篇原創文章。

Jerry 之前寫的 SAP Fiori Elements 系列文章：

在沒有任何前端開發經驗的基礎上, 創建第一個 SAP Fiori Elements 應用

答網友提問：使用 SAP Fiori Tools 創建的 Fiori Elements 應用，如何進行二次開發？

本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 服務器上

深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field

[深入理解 SAP Fiori Elements 工作原理系列之二：如何給 SAP Fiori Elements 應用添加自定義按鈕](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492320&idx=1&sn=8e294788e4002f1關于 list Report 模板里 Smart Table 控件里不同列項目的寬度問題，也有很多朋友私下里問我：

比如這個問題：

“當我生成頁面的時候，column 沒有用光控件的空間，在傳統開發上，我們可以操控 column 的 width 屬性。但是在Fiori Elements 開發中并沒有碰到相應的參數。 請問您知道我可以通過什么參數控制嘛？”

因為我日常工作用的是 Angular 而非 SAP Fiori Elements，所以這些問題只有業余時間研究。此類問題我通常的做法是，在設法尋找解決方案之前 (如何通過代碼調整 Smart Table 列項目的寬度)，先做一些調研，搞清楚當前行為的實現原理。這樣下次遇到新的列項目寬度的相關需求，之前調研學到的知識說不定能夠重用。

Jerry 之前的文章 SAP Fiori Elements 框架里 Smart Table 控件的工作原理介紹，向大家揭秘了 Smart Table 控件里的列項目，來自 OData 元數據里擁有 com.sap.vocabiularies.UI.LineItem 注解的模型字段。但是當時我們沒有關于列項目的寬度 (width) 進行討論。

在 Chrome 開發者工具里，查看任意兩個列項目的寬度，發現單位均為 rem:

px, em 和 rem 都是 css 的長度單位，其中 px 即像素，相對于顯示器屏幕分辨率而言，在互聯網早期應用里使用得比較多。而 em 和 rem 是相對長度單位，前者相對于其父元素，后者相對于文檔根元素，在響應式頁面設計里廣泛使用。

通過 Jerry 之前這篇文章 Jerry的Fiori原創文章合集 里介紹的調試技巧，我成功找到了 Smart Table 運行時計算列項目寬度的代碼位置。簡言之，Fiori Elements list Report 模板里 Smart Table 每個列項目的初始寬度，同樣取決于其 OData 元數據。

打開 Chrome 開發者工具，切換到 Sources 標簽頁，快捷鍵 Ctrl + O，在彈出對話框里輸入 SmartTable，這樣可以快速打開其實現文件 SmartTable.js:

該文件第 3817 行，_calcCoumnWidth 函數, 即 Smart Table 列項目寬度的計算實現源代碼。

從源代碼里的注釋可知，Fiori Elements 基于 OData 元數據里的屬性來計算列項目的寬度 (Calculates the column width from the metadata attributes).

The optimal column width is calculated with creating the longest possible sample of the created model type.

根據模型字段的類型，構造出該類型允許的最長內容的例子數據，即可計算出該列理論上的寬度。

計算列項目寬度函數 calcCoumnWidth 的輸入參數：

oField：該列項目字段的 OData 元數據

bAdditionalProperty：boolean 類型，表明計算寬度時，除了字段 OData 元數據本身，是否還需要考慮其他因素

mConfig：計算寬度時使用的配置項，包含寬度的最大，最小值，默認值和其他配置標志位

這個函數實現代碼里信息量很大：

計算寬度使用的配置對象，mConfig 的值，是在代碼里以近似硬編碼的方式填充的。從上圖能夠看出，Fiori Elements Smart Table 的列項目寬度，最大值為 19；如果計算時不考慮額外屬性，最小寬度值為 2，否則為 1；如果 OData 元數據里提供的屬性，不足以計算出一個合適的寬度值，則使用代碼第 3822 行維護的默認寬度：在考慮額外屬性情況下，默認寬度為 4，否則為 8；單位為 rem.

接下來為計算列項目寬度做準備。

第 3833 行的字符 w, 是為了針對字段元數據類型為 Edm.String, 即字符串類型的列項目做準備的。此類型字段，在元數據里還有另一個屬性 MaxLength, 即字符串最大長度。

例如一個 MaxLength 為 40 的字符串類型字段，Smart Table 計算其寬度的邏輯就是，運行時生成一個由 40 個 w 字符組成的字符串，計算其渲染出來后占據的寬度，將該寬度值作為此列項目最終顯示在界面上的寬度。

字段類型不同，其理論上最長的可能值也不同。比如上圖第 3842 行開始的代碼提到，類型 Edm.Int16, 理論的最長值為 32768, 占據 5 個字符的位置；Edm.Int32 則理論最多占據 9 個字符位，因為其最大值為 2147483648. 依次類推。

下圖的 4 個 IF-ELSE 分支，分別對應著類型為 Byte, Time, Boolean 和 String 字段的寬度計算。下面我們來了解最簡單的字符串類型的列項目寬度計算邏輯。

下圖三個標號處的主要邏輯：字段 MainProductCategory, 類型為 Edm.String, 最大長度為 40 個字符，因此標號 3 處，將變量 sChar 代表的字符 w，重復 40 次后生成一個新的字符串，然后調用函數 measureText, 計算該字符串渲染出來的寬度。

在 measureText 函數內部，第 3792 行動態創建一個 canvas 標簽，該標簽常用于 JavaScript 動態繪制圖形的場景。拿到 canvas 的 2d 上下文后，調用其原生 API，measureText，得到在該 canvas 上渲染長度為 40 的字符串需要占據的寬度，單位為 px，最后再除以 baseFontSize, 換算成 rem 單位。

計算出來的列項目寬度，會存儲在 column 對象實例里，并在最終的 HTML 代碼渲染過程里，交給 TableRenderer 進行 width 渲染。這就是我們在本文開始的 Chrome 開發者工具里，觀察到 HTML 源代碼里 th 元素的 CSS style 面板里的 width 屬性。

至此，本文介紹了 SAP Fiori Elements List Report Smart Table 列項目的初始寬度計算邏輯。從以上邏輯大家不難發現，寬度計算是根據字段元數據的 MaxLength 屬性，而不是運行時該字段實際的顯示值，因而會出現某些朋友抱怨的“雖然某列顯示的內容很少，但還是占據了很寬的空間，導致屏幕空間利用率不夠"的問題, 如下圖所示：

另外，我們點擊 Settings 按鈕進行個性化設置：

讓 Smart Table 運行時只顯示兩列：

之后顯示的頁面，確實只包含我們在個性化設置里選擇的 Image 和 Product 兩列，然而它們的寬度，和個性化之前相比并未發生變化，因此頁面非常難看：

Jerry 后續的 SAP Fiori Elements 系列文章，會介紹如何解決這個寬度沒能夠動態更新的問題，敬請期待。

HTML JavaScript web前端 渲染

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。