SAPUI5-對列表項進行分組而不進行升序或降序排序

Question

我在應用程序中使用了一個sap.m.List控件，該控件應該顯示順序列表。 每個列表數據中都有一個分組屬性，可用於將相似項目分組在一起。

我在SAP Exploreed網站上的列表分組中檢查了此示例 。 它使用將group設置為true的sorter屬性。 默認情況下，排序模式為降序。

但是，我的列表必須以預定義的順序顯示項目，只是將相似的項目分組在一起以便於使用。 一個組中的所有項目都出現在列表中的一個位置，而一個特定組僅出現一次。 例如，我必須按照下面的順序將下面的JSON數組綁定到列表，僅按Category分組。

steps.json：

{
  "Steps": [
    {
      "Desc": "Open google search",
      "Category": "Google"
    },
    {
      "Desc": "Search for Apple Inc.",
      "Category": "Google"
    },
    {
      "Desc": "Open Apple website",
      "Category": "Apple"
    },
    {
      "Desc": "Search for iPhone",
      "Category": "Apple"
    },
    {
      "Desc": "Browse all iPhone models",
      "Category": "Phone"
    },
    {
      "Desc": "Choose the one you like",
      "Category": "Phone"
    }
  ]
}

下面的代碼是我想要做的，除了它以降序對列表進行排序。

SAPUI5代碼：

<List
    items="{
                path: '/Steps',
                sorter: {
                    path: 'Category',
                    group: true
                }
            }"
    headerText="Here's what you do">
    <StandardListItem title="{Desc}" />
</List>

有沒有辦法做到這一點？

謝謝。

Answer 1

Sorter的第三個參數可以是將上下文作為參數獲取的函數。

API： https : //openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.model.Sorter.html

范例： http : //jsbin.com/votesatezu/1/edit?html,js,output

Answer 2

我有辦法解決我的問題。 它與此處提供的答案類似，但是不需要在控制器中創建Sorter實例（因此可以避免其他編碼）。

XML視圖：

<List
    items="{
                path: '/Steps',
                sorter: {
                    path: 'CategoryId',
                    group: '.grouper'
                },
                groupHeaderFactory: '.getGroupHeader'
            }"
    headerText="Here's what you do">
    <StandardListItem title="{Desc}" />
</List>

而是傳遞一個布爾值，我稱之為grouper的方法group屬性建立一個自定義對象groupHeaderFactory 。

控制器：

onInit: function() {
    var oModel = new sap.ui.model.json.JSONModel({
      "Steps": [
        {
          "Desc": "Open google search",
          "Category": "Google",
          "CategoryId": 1
        },
        {
          "Desc": "Search for Apple Inc.",
          "Category": "Google",
          "CategoryId": 1
        },
        {
          "Desc": "Open Apple website",
          "Category": "Apple",
          "CategoryId": 2
        },
        {
          "Desc": "Search for iPhone",
          "Category": "Apple",
          "CategoryId": 2
        },
        {
          "Desc": "Browse all iPhone models",
          "Category": "Phone",
          "CategoryId": 3
        },
        {
          "Desc": "Choose the one you like",
          "Category": "Phone",
          "CategoryId": 3
        }
      ]
    });
    this.getView().setModel(oModel);
}

grouper（）：

oGroup對象為每行提供完整的模型以及綁定路徑。 綁定路徑存儲在名為sPath的屬性中。 我可以從sPath獲取數組索引，然后使用它來獲取相應的Category名稱。

grouper: function(oGroup) {
    return {
        key: oGroup.oModel.oData.Steps[oGroup.sPath.split("/")[2]].Category
    };
}

現在，當調用groupHeaderFactory時，它具有Category名稱而不是CategoryId 。

getGroupHeader（）：

getGroupHeader: function(oGroup){
    return new sap.m.GroupHeaderListItem( {
        title: oGroup.key,
        upperCase: true
    });

}

注意：如果要嘗試此示例，請確保index.html具有data-sap-ui-compatVersion="edge" 。

yippee的！

Answer 3

您正在向您的json文件添加一些隱式元數據，這是該類別的自定義排序。

sapui5列表項無法猜測您是否對數據創建了這樣的約束：）我建議您簡單地將模型充實為：

{
  "Steps": [
    {
      "Desc": "Open google search",
      "Category": "Google",
      "CategoryId": 1
    },
    {
      "Desc": "Search for Apple Inc.",
      "Category": "Google",
      "CategoryId": 1
    },
    {
      "Desc": "Open Apple website",
      "Category": "Apple",
      "CategoryId": 2
    },
    {
      "Desc": "Search for iPhone",
      "Category": "Apple",
      "CategoryId": 2
    },
    {
      "Desc": "Browse all iPhone models",
      "Category": "Phone",
      "CategoryId": 3
    },
    {
      "Desc": "Choose the one you like",
      "Category": "Phone",
      "CategoryId": 3
    }
  ]
}

然后對categoryId而不是category進行分組。