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

时间:2018-09-14 05:42:13

标签: sapui5

我有一个sap.ui.table.Table,其selectionModeSingle,而selectionBehaviorRowOnly

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

有一些代码可以按索引选择

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

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

还有其他方法吗?

3 个答案:

答案 0 :(得分:2)

正如问题中的commented一样,目前还没有直接的解决方案来按内容选择以编程方式选择行。但我读到:

  

我想要一个有效的答案。最佳做法/建议不被接受。

如果仍然如此,我认为您可以访问内部属性。我正在使用的唯一内部属性是 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;
  },

});

OpenUI5 sap.ui.table.Table Single Select

多选

<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是私有模块。

OpenUI5 sap.ui.table.Table MultiToggle Orders sorted

内部属性aKeys由加载的上下文中的键组成,这些键的索引反映了表行索引。例如:如果该表已加载3行,并且我调用table.getContextByIndex(90),则aKeys将是:

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

在任何change上都会触发ChangeReason处理程序onRowsDataChange。这样一来,无论表格行,排序,过滤,刷新等情况如何,都不会删除选择内容。


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

答案 1 :(得分:1)

这小段代码为我完成了工作。表绑定到JSONModel。

const rowsBinding = oTable.getBinding("rows");
var index1 = -1;
rowsBinding.oList.find(function(element){
    index1++;
    if(element.yourField== "your Content")
    {
     oTable.setSelectedIndex(index1);  
    }
});

现在,我可以根据内容选择我的行。

答案 2 :(得分:1)

JSONModel

还有另一个要求使用JSONModel做到这一点。所以就在这里。

以下摘录来自https://embed.plnkr.co/xuSU3uH1rkXmEAV7

<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.selectWhere(context => context.getProperty("CustomerID") == "ANTON" /*&& ...*/);
  },

  selectWhere: function(keysAreMatching) {
    const table = this.byId("myGridTable");
    const contexts = table.getBinding("rows").getContexts();
    const index = this.getRowIndexWhere(keysAreMatching, contexts);
    return this.selectRowByIndex(index, table);
  },

  getRowIndexWhere: function(keysAreMatching, contexts) {
    let index = -1;
    contexts.find((context, i) => keysAreMatching(context) && (index = i));
    return index;
  },

  selectRowByIndex: function(i, table) {
    const shouldSelect = i > -1 && !table.isIndexSelected(i);
    return shouldSelect ? setTimeout(() => table.setSelectedIndex(i)) : table;
  },

});

对于像JSONModel这样的客户端模型,查找某些行比使用服务器端模型要容易一些,因为所有必需的数据都可以通过rowsBinding.getContexts()在本地获得。返回的上下文被分配给与表的行索引相对应的索引。