Table 添加新项目时分组会重置所选值

Question

这里我们有一个非常基本的 table，带有一个 Add 按钮并激活了分组。当我为现有项目 select 值然后按下按钮添加新行时，我的 selected 值正在重置，但没有分组它工作正常。我做错了什么还是这是一个错误？

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel" // sample model. Can be also an ODataModel.
], async (XMLView, JSONModel) => {
  "use strict";
  
  const control = await XMLView.create({
    definition: `<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
      <Table items="{
        path: '/tableItems',
        sorter: { path : 'group', group: true }
      }">
        <headerToolbar>
          <OverflowToolbar>
            <Title text="Test Table" />
            <ToolbarSpacer/>
            <Button id="addButton" text="Add" type="Emphasized" />
          </OverflowToolbar>
        </headerToolbar>
        <columns>
          <Column width="20rem">
            <Label text="col0"/>
          </Column>
          <Column width="20rem">
            <Label text="col1"/>
          </Column>
        </columns>
        <ColumnListItem vAlign="Middle">
          <Text text="{text}" />
          <Select forceSelection="false" width="100%" xmlns:core="sap.ui.core">
            <core:Item text="test1" key="test1" />
            <core:Item text="test2" key="test2" />
            <core:Item text="test3" key="test3" />
            <core:Item text="test4" key="test4" />
          </Select>
        </ColumnListItem>
      </Table>
    </mvc:View>`,
    afterInit: function() {
      this.byId("addButton").attachPress(onPressAdd, this);
      function onPressAdd() {
        const oModel = this.getModel();
        const aItems = oModel.getProperty("/tableItems");
        const newItems = aItems.concat({
          group: "3",
          text: "3-1",
          key: "3-1",
        });
        oModel.setProperty("/tableItems", newItems);
      }
    },
    models: new JSONModel({
      number: 0,
      tableItems: [
        {
          group: "1",
          text: "1-1",
          key: "1-1",
        },
        {
          group: "1",
          text: "1-2",
          key: "1-2",
        },
        {
          group: "2",
          text: "2-1",
          key: "2-1",
        },
        {
          group: "2",
          text: "2-2",
          key: "2-2",
        },
      ],
    }),
  });

  control.placeAt("content");
}));

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/1.82.2/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-compatversion="edge"
  data-sap-ui-async="true"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

Answer 1

将 growing="true" 设置为 sap.m.Table。

这会在内部启用 GrowingEnablement，从而防止在目标失效时重新呈现整个 ListBase (Table)。然后只有必要的项目将附加到 table.

通常，为了优化渲染行为，最好的做法是...:[=19=]

如果 table / 列表是 editable、可收缩或可扩展，则启用 growing 属性。
将 key: <em><属性Name with unique values></em> 添加到 ListBinding 信息对象以受益于 Extended Change Detection 如果模型是客户端模型，例如JSONModel。对于 ODataModel，框架会自动添加 key。

<Table xmlns="sap.m"
  <strong>成长="true"</strong>
  项目=“{
    路径：'myModel>/myCollection'，
    <strong>键：<em><属性名称></em></strong>，（如果'myModel'不是ODataModel）
    分拣员：...
  }”
>

Table 添加新项目时分组会重置所选值

Table grouping resets selected values when adding new item

sapui5