如何在SAPUI5中设置列表排序器?

This is basically a workaround trial for the question here : "How to use custom sorter in XML views"

这基本上是针对这个问题的一个变通尝试:“如何在XML视图中使用自定义分选器”

Since currently it is not possible to use custom sorters in XML views, I thought maybe it is possible to set the sorter in the controller.

由于目前不可能在XML视图中使用自定义排序器，我认为可能可以在控制器中设置排序器。

How you do that with JS view is like this:

如何使用JS视图来实现这一点，如下所示:

var oTemplate = ... // irrelevant

var oList = new sap.m.List({
    id: this.createId("someList"),
    items: {
        path: "/list",
        template: oTemplate,
        sorter: foo.bar.CustomSorter
    }
});

And when I want to convert that to and XML view, I have the following:

当我要将它转换为And XML视图时，我有以下几点:

<m:List id="someList"
        items="{path: '/list'}">
    <!-- hid ListItem implementation -->
</m:List>

Then, how can I set a sorter to this list in controller? Also, where to hook it? Options:

那么，如何在controller中设置这个列表的排序器呢?还有，挂在哪里?选项:

onInit
onInit
onBeforeRendering
onBeforeRendering
onAfterRendering
onAfterRendering

So, what I expected was something like:

所以，我所期望的是:

sap.ui.controller("foo.bar.controller.SomeController", {
   onInit : function(){
      var oList = this.getView().byId("someList");
      oList.get___Something___().setSorter(foo.bar.CustomSorter);
   };
};

but seems not possible.

但是似乎是不可能的。

4 个解决方案

#1

onInit should be fine.

onInit应该没事的。

Use List's method bindItems to bind the items and apply the sorter.

使用List的方法bindItems绑定项目并应用分选器。

Something like:

喜欢的东西:

oList.bindItems('/list', ListItemTemplate, foo.bar.CustomSorter);

oList。bindItems(“/列表”,ListItemTemplate foo.bar.CustomSorter);

Regards, Kimmo

问候,季

#2

You can use the sorter property of the list binding:

您可以使用列表绑定的sorter属性:

<List
      id="invoiceList"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{
         path : '/Invoices',
         sorter : {
            path : 'ProductName' 
         }
      }" >

https://sapui5.hana.ondemand.com/#docs/guide/c4b2a32bb72f483faa173e890e48d812.html

https://sapui5.hana.ondemand.com/文档/指导/ c4b2a32bb72f483faa173e890e48d812.html

I also tried to set the sorter with onInit, unfortunately the this.getView().byId("whateverID") failed at this point...

我还试图用onInit设置排序器，不幸的是，此时this. getview ().byId(“whateverID”)失败了……

#3

For aggregation binding in JSView you have to provide a Model and a template to the Control.

对于JSView中的聚合绑定，您必须向控件提供一个模型和一个模板。

Let's assume we are using a sap.ui.model.json.JSONModel:

假设我们使用的是sap.ui.model.json.JSONModel:

var oModel = new sap.ui.model.json.JSONModel();
var oData = {
    users: [
        {
            id: '15',
            name: 'Peter'
        },
        {
            id: '16',
            name: 'Angela'
        }
    ]
};
oModel.setData(oData);

Now that we got the JSONModel with the assigned data, we can go on and create a template for the aggregationBinding:

现在我们已经获得了带有分配数据的JSONModel，我们可以继续为aggregationBinding创建一个模板:

var oItemTemplate = new sap.m.StandardListItem();
oItemTemplate.bindProperty('title', {path: 'name'});

Now we got a template list entry wich we will use to create our list entries. Currently we would "loose" the id information of any user after binding is done. So let's just bind the users id as CustomData:

现在我们有了一个模板列表条目，我们将使用它来创建列表条目。目前，我们将“松散”任何用户在绑定后的id信息。让我们将用户id绑定为CustomData:

var oCustomData = new sap.ui.core.CustomData({
    key: 'id'
});
oCustomData.bindProperty('value', {path: 'id'});
oItemTemplate.addCustomData(oCustomDataId); // adds the custom data to the template

Later on we can retrieve this CustomData from the corresponding ListItem as a key/value pair.

稍后，我们可以从相应的ListItem中检索这个CustomData作为键/值对。

Now we still want to add a custom Sorter to the binding configuration. In our case we create a new Sorter that sorts the items by their "name" property:

现在，我们仍然希望向绑定配置添加自定义分选器。在我们的例子中，我们创建了一个新的Sorter，它通过它们的“name”属性对这些项进行排序:

var oSorter = new sap.ui.model.Sorter('name');
var oBindingInfo = {
    path: '/users',
    template: oItemTemplate,
    sorter: oSorter
};

In the last step we have to bind the items to our control. In this case we use a sap.m.List control:

在最后一步中，我们必须将项目绑定到控件。在这种情况下，我们使用sapm。列表控件:

var oList = new sap.m.List();
oList.setModel(oModel);

oList.bindItems(oBindingInfo);

Please keep in mind that this is just a simple use case. I ignored all the additional configuration parameters used for instantiating controls, so there might be still some work to do. The example only covers the plain data binding and sorting.

请记住，这只是一个简单的用例。我忽略了用于实例化控件的所有附加配置参数，因此可能还有一些工作要做。这个示例只涉及普通的数据绑定和排序。

For further information see:

为进一步的信息:

https://sapui5.hana.ondemand.com/docs/api/symbols/sap.ui.base.ManagedObject.html#bindAggregation

https://sapui5.hana.ondemand.com/docs/api/symbols/sap.ui.base.ManagedObject.html bindAggregation

https://sapui5.hana.ondemand.com/#docs/guide/4ce11a576ef44bb680c81b36a0462e86.html

https://sapui5.hana.ondemand.com/文档/指导/ 4 ce11a576ef44bb680c81b36a0462e86.html

#4

You may do it like this:

你可以这样做:

onInit: function() {
  var SORTKEY = "someSortKey";
  var DESCENDING = true;
  var GROUP = false;
  var oList = this.getView().byId("someList");
  var oBinding = oList.getBinding("items");
  var aSorter = [];
  // you may use foo.bar.CustomSorter instead:
  aSorter.push(new sap.ui.model.Sorter(SORTKEY, DESCENDING, GROUP));
  oBinding.sort(aSorter);
}

#1