javascript - SAPUI5 - Group list items without sorting ascending or descending - Stack Overflow

admin管理员组

文章数量:1398984

I am using a sap.m.List control in my application that is supposed to show a sequential list. There is a grouping property in each list data that I can use to group similar items together.

I checked this example on the SAP Explored website on list grouping. It uses a sorter property that has group set to true. By default the sorting mode is descending.

However my list has to show the items in a predefined sequence with just similar items grouped together for ease of use. All items in a group occur at one place in the list and a particular group occurs only once. For example, I have to bind the JSON array below to a list in the same order as it is, only grouped by 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"
    }
  ]
}

The code below is what I would like to do in order to get going except it sorts my list in descending order.

SAPUI5 code:

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

Is there a way to achieve this?

Thanks.

I am using a sap.m.List control in my application that is supposed to show a sequential list. There is a grouping property in each list data that I can use to group similar items together.

I checked this example on the SAP Explored website on list grouping. It uses a sorter property that has group set to true. By default the sorting mode is descending.

However my list has to show the items in a predefined sequence with just similar items grouped together for ease of use. All items in a group occur at one place in the list and a particular group occurs only once. For example, I have to bind the JSON array below to a list in the same order as it is, only grouped by 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"
    }
  ]
}

The code below is what I would like to do in order to get going except it sorts my list in descending order.

SAPUI5 code:

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

Is there a way to achieve this?

Thanks.

• javascript
• sapui5

Share Improve this question Follow edited Apr 1, 2016 at 13:53 Lalit asked Apr 1, 2016 at 13:32 LalitLalit 84922 gold badges1616 silver badges2626 bronze badges 5

• Could you add an extra property to each object in the array which indicates the sort index, and then sort based on that property? – Qualiture Commented Apr 1, 2016 at 13:35
• The data es from a data source over which I may not have any control. Nevertheless, how do you mean? – Lalit Commented Apr 1, 2016 at 13:38
• Euh... use simple javascript? for (var i=0; i<yourArray.length; i++) { yourArray[i].sort = i; } and then set the new array back to your model – Qualiture Commented Apr 1, 2016 at 13:45
• Thanks... But I don't think this would solve my problem. I still have to group the list. And doing that will sort my list implicitly. Check the code snippet that I have just added. – Lalit Commented Apr 1, 2016 at 13:51
• I understand, but you could add multiple sorters, one for the group, and one for the list (i.e. without grouping), see github./qmacro/sapui5bin/blob/master/SortingAndGrouping/… for an example – Qualiture Commented Apr 1, 2016 at 14:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

3rd parameter of the Sorter can be a function which gets the context as a parameter.

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

Sample : http://jsbin./votesatezu/1/edit?html,js,output

I got a way to resolve my problem. It's similar to the answer provided here but doesn't require to create a Sorter instance in the controller (so saves you from additional coding).

XML view:

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

Instead of passing a boolean, I call a grouper method in the group property to build a custom object for groupHeaderFactory.

Controller:

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

The oGroup object provides the plete model along with the binding path for each row. The binding path is stored in a property called sPath. I can get the array index from the sPath and then use it to get the corresponding Category name.

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

Now when the groupHeaderFactory is called it has the Category name instead of the CategoryId.

getGroupHeader():

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

}

Note: Make sure you have data-sap-ui-patVersion="edge" in your index.html if you want to try out this example.

Yippee!

You are adding some implicit meta data to your json file which is a custom sort on the category.

The sapui5 list item cannot guess that you have created such a constraint on your data :) I would advice you to simply enrich your model to:

{
  "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
    }
  ]
}

Then group on categoryId instead of category.

本文标签： javascriptSAPUI5Group list items without sorting ascending or descendingStack Overflow