在每一行上绑定一个下拉列表，在sap.ui.table.Table上动态添加

Question

我创建了一个带有下拉控件的表。我在我的表中动态添加行。我正在尝试使用JSONModel绑定我的下拉列表列，但是那里存在一些挑战。

var oTable = this.getView().byId("myTable");
this.items.push({
  item1: "",
  item2: "",
  item3: ""
});
this.oModelJson.setData(this.items);
this.oTable.setModel(this.oModelJson);
this.oTable.bindRows("/");

现在，我的item1是视图中声明的下拉列表。在上面的代码结束后，我试图使用以下技术绑定我的表下拉：我的JSONModel是全局的，它有数据。我能够成功地将我的下拉列表绑定到表外，但是当我将下拉移到表中时，它不具有约束力。

var oDDL = this.byId("DropDown");
var oDDLTemplate = new sap.ui.core.Item({
  key: "{key}",
  text: "{Text}"
});
oDDL.setModel(this.oJson);
oDDL.bindAggregation("items", "/results", oDDLTemplate);

以下是我的观点，表

<t:Table id="myTable"
  width="auto"
  noDataText="No Record Found"
  busyIndicatorDelay="{detailView>/lineItemTableDelay}"
  class="sapUiResponsiveMargin"
  selectionMode="MultiToggle"
  visibleRowCount="5"
>
  <t:extension>
    <l:HorizontalLayout>
      <Button icon="sap-icon://add" text="Row" press="addRow"/>
      <Button icon="sap-icon://delete" text="Row" press="fDeleteRow"/>
    </l:HorizontalLayout>
  </t:extension>
  <t:columns>
    <t:Column width="16rem">
      <Text text="Item 1"/>
      <t:template>
        <ComboBox id="DropDown"></ComboBox>
      </t:template>
    </t:Column>
  <t:Column width="8rem">
    <Text text="Item 2"/>
    <t:template>
      <ComboBox id="txt_itm2" ></ComboBox>
    </t:template>
  </t:Column>
  <t:Column width="8rem">
    <Text text="Item 3"/>
    <t:template>
      <ComboBox id="txt_itm3" ></ComboBox>
    </t:template>
  </t:Column>
</t:Table>

Answer 1

这是一个最小的例子：https://plnkr.co/edit/8YvXxk?p=preview

在上面的示例中，行最初为空（[]）。绑定定义可以保留在视图中：

<t:Table rows="{/}">
  <t:extension>
    <OverflowToolbar>
      <ToolbarSpacer />
      <Button
        icon="sap-icon://add"
        press=".onAddPress"
      />
    </OverflowToolbar>
  </t:extension>
  <t:columns>
    <t:Column>
      <Text text="Item 1" />
      <t:template>
        <ComboBox items="{items1}">
          <core:Item
            key="{key}"
            text="{text}"
          />
        </ComboBox>
      </t:template>
    </t:Column>
    <!-- ... -->
  </t:columns>
</t:Table>

这样，当用户按下 + 按钮而不是每次都调用bindRows或bindAggregation时，我只需要增强现有的模型数据。

onAddPress: function() {
  const model = this.getOwnerComponent().getModel(); // JSONModel
  const currentRows = model.getProperty("/");
  const newRows = currentRows.concat(this.createEntry());
  model.setProperty("/", newRows);
},