How to set sorter of a List in Controller in SAPUI

问题:

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

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.

How you do that with JS view is like this:

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:

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

• onInit
• onBeforeRendering
• 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.

回答1:

onInit should be fine.

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

Something like:

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

Regards, Kimmo

回答2:

You can use the sorter property of the list binding:

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

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

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

回答3:

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

Let's assume we are using a 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:

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:

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.

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:

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:

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/guide/4ce11a576ef44bb680c81b36a0462e86.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);
}