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

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

*   [在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&scene=21#wechat_redirect)

*   [答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492113&idx=1&sn=5d004d151e59ac262a15fdf79869934c&chksm=ead65086dda1d99092e784b7937cc23a6641f7692e0048d31412c427e8042fa071a9fe8f4691&scene=21#wechat_redirect)

*   [本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 伺服器上](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492152&idx=1&sn=b4f365a645779e1c57064b747d64ea61&chksm=ead650afdda1d9b9761fef55001935a8bd12aeda621a78edeafa7ee4cc154121bf76d7ab42c1&scene=21#wechat_redirect)

*   [深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492283&idx=1&sn=716ba26a34b3cb071ba58c74945ad9da&chksm=ead6502cdda1d93a7c4b2efc5144ed77dfd619edd045e3ca7dcdd0e74221b605ad54b06fe4b6&scene=21#wechat_redirect)

*   [深入理解 SAP Fiori Elements 工作原理系列之二：如何給 SAP Fiori Elements 應用新增自定義按鈕](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492320&idx=1&sn=8e294788e4002f1a1d2efd00d075eee0&chksm=ead65077dda1d961f69684f665d4ad0be1b442a2e316b633a05834c75d50f3198e7a6efdb781&scene=21#wechat_redirect)

*   [SAP Fiori Elements 框架裡 Smart Table 控制元件的工作原理介紹](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492348&idx=1&sn=f134e5418350197afcae1d4836de9be0&chksm=ead6506bdda1d97d5401bb675857409d4ea09897b86fdaa639fc72fd74116c4e7a2bbd1d7d0d&scene=21#wechat_redirect)

關於 List Report 模板裡 Smart Table 控制元件裡不同列專案的寬度問題，也有很多朋友私下裡問我：

![](https://img-blog.csdnimg.cn/img_convert/66b26f9dccf0254242b8cbb598ecc87b.png)

比如這個問題：

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

![](https://img-blog.csdnimg.cn/img_convert/479b00a9b167a7b1b5f6acc797b0155a.png)

![](https://img-blog.csdnimg.cn/img_convert/c50f619112cb52822a65fbc9acddabaf.png)

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

Jerry 之前的文章 [SAP Fiori Elements 框架裡 Smart Table 控制元件的工作原理介紹](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492348&idx=1&sn=f134e5418350197afcae1d4836de9be0&chksm=ead6506bdda1d97d5401bb675857409d4ea09897b86fdaa639fc72fd74116c4e7a2bbd1d7d0d&scene=21#wechat_redirect)，向大家揭秘了 Smart Table 控制元件裡的列專案，來自 OData 後設資料裡擁有 **com.sap.vocabiularies.UI.LineItem** 註解的模型欄位。但是當時我們沒有關於列專案的寬度 (width) 進行討論。

在 Chrome 開發者工具裡，檢視任意兩個列專案的寬度，發現單位均為 rem:

![](https://img-blog.csdnimg.cn/img_convert/4a37172e509d852f4425302784e0512a.png)

![](https://img-blog.csdnimg.cn/img_convert/84f6c8ed707cc485e524025bb5f45adb.png)

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:

![](https://img-blog.csdnimg.cn/img_convert/e550ac1504bfd0840b7999d1d159014c.png)

該檔案第 3817 行，_calcCoumnWidth 函式, 即 Smart Table 列專案寬度的計算實現原始碼。

![](https://img-blog.csdnimg.cn/img_convert/3862c0a86c2ffbe138e4801c9b7ba04e.png)

從原始碼裡的註釋可知，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：計算寬度時使用的配置項，包含寬度的最大，最小值，預設值和其他配置標誌位

這個函式實現程式碼裡資訊量很大：

![](https://img-blog.csdnimg.cn/img_convert/34aad64145b0ba2853a108e5060197c2.png)

計算寬度使用的配置物件，mConfig 的值，是在程式碼裡以近似硬編碼的方式填充的。從上圖能夠看出，Fiori Elements Smart Table 的列專案寬度，最大值為 19；如果計算時不考慮額外屬性，最小寬度值為 2，否則為 1；如果 OData 後設資料裡提供的屬性，不足以計算出一個合適的寬度值，則使用程式碼第 3822 行維護的預設寬度：在考慮額外屬性情況下，預設寬度為 4，否則為 8；單位為 rem.

接下來為計算列專案寬度做準備。

第 3833 行的字元 w, 是為了針對欄位後設資料型別為 Edm.String, 即字串型別的列專案做準備的。此型別欄位，在後設資料裡還有另一個屬性 MaxLength, 即字串最大長度。

![](https://img-blog.csdnimg.cn/img_convert/a3ce8d1047900482c9c377eb88adfcbc.png)

例如一個 MaxLength 為 40 的字串型別欄位，Smart Table 計算其寬度的邏輯就是，執行時生成一個由 40 個 w 字元組成的字串，計算其渲染出來後佔據的寬度，將該寬度值作為此列專案最終顯示在介面上的寬度。

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

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

![](https://img-blog.csdnimg.cn/img_convert/b5fdf5911d8ac9eeb7f2ac2d53921cb3.png)

下圖三個標號處的主要邏輯：欄位 MainProductCategory, 型別為 Edm.String, 最大長度為 40 個字元，因此標號 3 處，將變數 sChar 代表的字元 w，重複 40 次後生成一個新的字串，然後呼叫函式 measureText, 計算該字串渲染出來的寬度。

![](https://img-blog.csdnimg.cn/img_convert/f3192a55b8fadb6abcc1ef571cb02aa8.png)

在 measureText 函式內部，第 3792 行動態建立一個 canvas 標籤，該標籤常用於 JavaScript 動態繪製圖形的場景。拿到 canvas 的 2d 上下文後，呼叫其原生 API，measureText，得到在該 canvas 上渲染長度為 40 的字串需要佔據的寬度，單位為 px，最後再除以 baseFontSize, 換算成 rem 單位。

![](https://img-blog.csdnimg.cn/img_convert/d265cbd4707100318c1504ea65540316.png)

計算出來的列專案寬度，會儲存在 column 物件例項裡，並在最終的 HTML 程式碼渲染過程裡，交給 TableRenderer 進行 width 渲染。這就是我們在本文開始的 Chrome 開發者工具裡，觀察到 HTML 原始碼裡 th 元素的 CSS style 皮膚裡的 width 屬性。
![](https://img-blog.csdnimg.cn/img_convert/7987de7164d220a7331f24c4a6419831.png)

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

![](https://img-blog.csdnimg.cn/img_convert/77b3edd0809fea0ece56eefe5a11bd5c.png)

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

![](https://img-blog.csdnimg.cn/img_convert/a3b93f23ec3e92c386f2ede1fcb3e127.png)

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

![](https://img-blog.csdnimg.cn/img_convert/ec7fee58243fc04dd82cdfe675ab58cd.png)

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

![](https://img-blog.csdnimg.cn/img_convert/e204ff5a1d1fdcf6b588b13b9060c224.png)

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

**更多閱讀**