本教程第 147 個步驟，我們介紹了 SAP UI5 Smart Table 控制元件的用法：

* [SAP UI5 應用開發教程之一百四十七 - SAP UI5 SmartTable 控制元件的使用介紹](https://jerry.blog.csdn.net/article/details/127871253)

如下圖所示：

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

本步驟我們在 Smart Table 本身的基礎上再進一步，學習如何將 Smart Table 配合 Smart Filter Bar 共同使用。

先看一下效果。我們進入資料夾 154，執行命令列 `ui5 serve`，可以看到 Smart Table 控制元件上方的 Filter Bar 控制元件，當前預設顯示的 filter 為 Category 欄位。

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

我們可以為這個 Category 欄位維護值，讓這個值對 Smart Table 裡顯示的內容進行過濾。

首先點選 Category 欄位如下圖圖例1所示的圖示，在彈出的 Category 所有可選值下拉視窗裡，選擇 `Accessory`：

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

然後點選 OK：

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

點選 Smart Filter Bar 正上方的 Go 按鈕，就可以對 Smart Table 進行過濾，從而讓那些只有滿足過濾條件即 Category 等於 Accessory 的產品資料顯示出來，一共只有 4 條。

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

我們還可以點選 Filters 超連結：

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

將另一個支援的 Currency filter 也配置出來：
![](https://img-blog.csdnimg.cn/img_convert/ce7b1796a6e2e8b7ae4874c090542d95.png)

現在可以看到 Currency 欄位出現在 Smart Filter Bar 區域了：
![](https://img-blog.csdnimg.cn/img_convert/c12c224a60ba717489c8dd5d62a7a6b8.png)

點選 Value Help，選擇 EUR 這個貨幣單位作為 filter：

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

點選 Go 按鈕，就可以看到所有貨幣單位為 EUR 的產品了。

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

[下面](https://jerry.blog.csdn.net/article/details/128414664)是詳細的實現步驟講解。

SAP UI5 Smart Table 和 Smart Filter Bar 的聯合使用方法介紹試讀版

相關文章