如何在sap.m.Table中实现点击列表头排序？替代sap.ui.table方案

Absolutely! You can absolutely implement clickable, sortable table headers in sap.m.Table—it’s not only feasible, but this control is purpose-built for mobile responsiveness, making it the ideal replacement for sap.ui.Table when you need to support phone-sized screens.

How to Set Up Basic Sorting #

Here’s a straightforward breakdown of how to pull this off:

1. Configure Sortable Columns
   For each column you want users to sort by, set two key properties:

   • sortProperty: Maps directly to the field name in your data model that you want to sort against
   • showSortIndicator: Enables the visual arrow indicator to show the current sort direction (ascending/descending)

2. Enable Sorting in Data Binding
   When binding your table’s items, you can optionally set an initial sort order. By default, clicking the column header will automatically toggle between ascending, descending, and no sort—no extra code needed for basic behavior.

Example Code Snippet #

XML View

<sap.m.Table id="productTable" items="{
  path: '/Products',
  sorter: { path: 'ProductName', descending: false } // Optional initial sort
}">
  <sap.m.Column sortProperty="ProductName" showSortIndicator="true">
    <sap.m.Label text="Product Name" />
  </sap.m.Column>
  <sap.m.Column sortProperty="Price" showSortIndicator="true">
    <sap.m.Label text="Price" />
  </sap.m.Column>
  <!-- Add more columns as needed -->
  <items>
    <sap.m.ColumnListItem>
      <cells>
        <sap.m.Text text="{ProductName}" />
        <sap.m.Text text="{Price}" />
      </cells>
    </sap.m.ColumnListItem>
  </items>
</sap.m.Table>

Custom Sort Logic (Optional)

If you need to override default behavior (like case-insensitive string sorting or custom value comparisons), listen to the table’s sort event in your controller:

onInit: function() {
  const oTable = this.byId("productTable");
  oTable.attachSort(function(oEvent) {
    const oSortDetails = oEvent.getParameter("sort");
    const sSortField = oSortDetails.sortProperty;
    const bIsDescending = oSortDetails.descending;
    
    // Create a custom sorter with a comparator function
    const oCustomSorter = new sap.ui.model.Sorter(sSortField, bIsDescending, function(oItemA, oItemB) {
      // Example: Case-insensitive sort for product names
      const valA = oItemA.getProperty(sSortField).toLowerCase();
      const valB = oItemB.getProperty(sSortField).toLowerCase();
      return valA.localeCompare(valB);
    });
    
    oTable.getBinding("items").sort(oCustomSorter);
  });
}

Advanced Alternative: Multi-Column Sorting #

If you need to support sorting by multiple columns at once, pass an array of sap.ui.model.Sorter objects to your binding:

const aMultiSorters = [
  new sap.ui.model.Sorter("Category", false), // First sort by category (ascending)
  new sap.ui.model.Sorter("ProductName", true) // Then sort by product name (descending)
];
this.byId("productTable").getBinding("items").sort(aMultiSorters);

sap.m.Table is hands down the best mobile-friendly alternative to sap.ui.Table for this use case—it’s lightweight, responsive, and fully supports all core table interactions including sorting, filtering, and grouping.

内容的提问来源于stack exchange，提问作者Nandan Chaturvedi