注：本文需要結合這篇文章 [SAP Fiori Elements List Report Smart Table 列專案寬度計算的奧妙](https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492410&idx=1&sn=fb80aeae21e11046848a6d67951374ce&chksm=ead651addda1d8bbdd08ee6c24c60116b45511c752b0b09b2cf20226bb1e1b0eff7ac495ef28&token=912843575&lang=zh_CN#rd) 來閱讀。

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

執行上下文：SmartTable.prototype._onMetadataInitialised

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

當前 SmartTable 的所有屬性：
![](https://img-blog.csdnimg.cn/img_convert/bec585e0a4cd56d0d0e05fe7c9898d1c.png)

總共從 model 裡取出了 36 個欄位：
![](https://img-blog.csdnimg.cn/img_convert/2a89a7d730dd728387a44a73b5849361.png)

其中 lineItem 即列專案備選項有 6 個：
![](https://img-blog.csdnimg.cn/img_convert/aa6ce5389b298b24b7cab5d7a0a3588a.png)

支援匯出成 excel：
![](https://img-blog.csdnimg.cn/img_convert/fb96329b854a4cc4f9bf211911425e33.png)

遍歷每一個欄位：
![](https://img-blog.csdnimg.cn/img_convert/e5f05d15c36fae0995b512ed96dfd02b.png)

這三個欄位預設 visible：
![](https://img-blog.csdnimg.cn/img_convert/05e2acc7313c4fc39ee0e9227443ece8.png)

這個寬度是什麼時候計算出來的？
![](https://img-blog.csdnimg.cn/img_convert/1ff6a0205b578cbbcac942ea47007dee.png)

關於 importance 的計算：
![](https://img-blog.csdnimg.cn/img_convert/6b99ae61a801596e840097a6e8925cfd.png)

寬度的自動計算：

return oColumn.setWidth(this._calcColumnWidth(oField) + "rem");
![](https://img-blog.csdnimg.cn/img_convert/bf8b3d3b18f37336428845f70f78e47b.png)

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

> 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.

最優的寬度是基於欄位型別最大可能的長度

> Afterwards it is formatted to string while taking the constraints and format options into account, and then measured over canvas.

計算完畢後，被轉換成字串格式

> 引數1：@param {object} oField  OData metadata for the table field

欄位在 OData 後設資料中的屬性

> 引數2：@param {boolean} [bAdditionalProperty=false] Whether the calcuation of additional or leading property

計算時是否需要考慮額外的屬性

> 引數3：@param {object} [mConfig] The configuration object

> 引數4：@param {int} [mConfig.min=2] The minimum content width of the column in rem

列的最小寬度，單位為 rem

> 引數5：@param {int} [mConfig.max=19] The maximum content width of the column in rem

列的最大寬度，單位為 rem

> @param {boolean} [mConfig.label=true] Whether the column label should be taken into account as minimum column width or not

列的最小寬度是否應該將列標籤考慮在內

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

語義：計算 w 重複出現 40 次，在當前瀏覽器環境下，渲染出來需要的寬度。

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

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

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

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

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

SAP Fiori Elements List Report 列表寬度決定邏輯的單步除錯

相關文章