sapui5 - sap.ui.table.Table - 按内容以编程方式选择行

Question

我有一个 sap.ui.table.Table，其 selectionMode 是 Single 并且 selectionBehavior 是 RowOnly。

我想根据内容以编程方式选择一行；

有代码可以按索引选择

1. table.setSelectedIndex()
2. table.setSelectionInterval()

但我无法获取要选择其行的内容的索引。

还有其他办法吗？

Answer 1

作为commented在这个问题中，目前没有直接的解决方案来按内容以编程方式选择行。但我读到:

I want an answer that works. Best practices/ suggestions are not accepted.

如果情况仍然如此，我假设您可以访问内部属性。我使用的唯一内部属性是 ODataListBinding 实例中的 aKeys。以下片段来自此示例:https://embed.plnkr.co/7lcVJOaYsnIMJO1w ^[1]

单选

<Table xmlns="sap.ui.table"
  id="myGridTable"
  selectionMode="Single"
  selectionBehavior="RowOnly"
  rows="{
    path: '/Customers',
    events: {
      change: '.onRowsDataChange'
    }
  }"
>
  <!-- columns -->
</Table>

Controller.extend("demo.controller.TableSingleSelect", {
  onRowsDataChange: function(event) {
    this.selectCustomer(/*your key part(s) e.g.:*/ "ANTON"/*, ...*/);
  },

  selectCustomer: function(customerId/*, ...*/) {
    const rowsBinding = this.byId("myGridTable").getBinding("rows");
    this.selectIndexByKey(rowsBinding.getModel().createKey("Customers", {
      CustomerID: customerId,
      //...
    }), rowsBinding.aKeys);
  },

  selectIndexByKey: function(targetKey, keys) {
    const table = this.byId("myGridTable");
    const index = +Object.keys(keys).find(key => targetKey === keys[key]);
    const shouldSelect = index > -1 && !table.isIndexSelected(index);
    return shouldSelect ? table.setSelectedIndex(index) : table;
  },

});

多选

<Table xmlns="sap.ui.table"
  id="myGridTable"
  selectionMode="MultiToggle"
  rows="{
    path: '/Orders',
    events: {
      change: '.onRowsDataChange'
    }
  }"
>
  <!-- columns -->
</Table>

Controller.extend("demo.controller.TableMultiSelect", {
  onRowsDataChange: function(event) {
    const value1 = new Date("1996"); // 1996-01-01
    const value2 = new Date("1997"); // 1997-01-01
    this.selectOrdersBy("OrderDate", "BT", value1, value2);
  },

  selectOrdersBy: function(propertyName, filterOperator, value1, value2) {
    const table = this.byId("myGridTable").clearSelection();
    const keys = table.getBinding("rows").aKeys;
    const loadedContexts = this.getLoadedContexts(keys, table, "rows");
    const filteredContexts = FilterProcessor.apply(loadedContexts, [
      new Filter(propertyName, filterOperator, value1, value2),
    ], (context, path) => context && context.getProperty(path));
    this.selectIndices(keys, filteredContexts, table);
  },

  getLoadedContexts: function(keys, control, aggregationName) {
    const model = control.getBinding(aggregationName).getModel();
    const parameters = control.getBindingInfo(aggregationName).parameters;
    return keys.map(key => model.createBindingContext(`/${key}`, parameters));
  },

  selectIndices: (keys, contexts, table) => Object.keys(keys).map(index => +index)
    .filter(i => contexts.find(context => `/${keys[i]}` == context.getPath()))
    .map(i => table.isIndexSelected(i) || table.addSelectionInterval(i, i)),

});

^{* FilterProcessor是私有(private)模块。}

内部属性 aKeys 由来自加载上下文的键组成，索引反射(reflect)了表行索引。例如:如果表格加载了 3 行并且我调用了 table.getContextByIndex(90)，则 aKeys 将是:

0: "Customers('ALFKI')"
1: "Customers('ANATR')"
2: "Customers('ANTON')"
90: "Customers('WOLZA')"

change处理程序 onRowsDataChange 在任何 ChangeReason 上被触发.这可以防止选择被删除，无论表格行发生什么，无论是排序、过滤、刷新等。

---

[1]:此答案中的示例使用 ODataModel。如果是客户端 JSONModel，请查看此答案:stackoverflow.com/a/52664812 .