Question

我在我的应用程序中使用sap.m.List控件，该控件应显示顺序列表。每个列表数据都有一个分组属性，我可以用它来将类似的项目组合在一起。

我在列表分组的SAP Explored网站上查看了this example。它使用sorter属性，group设置为true。默认情况下，排序模式是降序。

但是我的列表必须以预定义的顺序显示项目，只有类似的项目组合在一起以便于使用。组中的所有项目都出现在列表中的一个位置，而特定组只出现一次。例如，我必须按照与原来相同的顺序将下面的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的第3个参数可以是将上下文作为参数的函数。

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);
}

<强>石斑鱼（）：

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
    });

}

注意：如果您想试用此示例，请确保data-sap-ui-compatVersion="edge"中有index.html。

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。

SAPUI5 - 组列表项而不按升序或降序排序

3 个答案: