Блог

Главная - Вопросы по программированию - Группировка таблиц сбрасывает выбранные значения при добавлении нового элемента

Группировка таблиц сбрасывает выбранные значения при добавлении нового элемента

#sapui5

#sapui5

Вопрос:

Здесь у нас есть очень простая таблица с Addактивированной кнопкой и группировкой. Когда я выбираю значения для существующих элементов, а затем нажимаю кнопку, чтобы добавить новую строку, выбранные значения сбрасываются, но без группировки все работает нормально. Я делаю что-то не так или это ошибка?

 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>

Ответ №1:

Установите значение growing="true" на sap.m.Table .

Это включает GrowingEnablement внутреннюю функцию, которая предотвращает повторную обработку всей базы списков (таблицы), когда целевой объект становится недействительным. Затем к таблице будет добавлен только необходимый элемент.

Как правило, для оптимизации поведения рендеринга всегда рекомендуется использовать..:

  • Включите это growing свойство, если таблица / список доступна для редактирования, сжатия или расширения.
  • Добавьте key: <propertyName with unique values> в объект ListBinding info, чтобы воспользоваться расширенным обнаружением изменений , если модель является моделью на стороне клиента, такой как JSONModel . С помощью an ODataModel фреймворк key автоматически добавляет.
 <Table xmlns="sap.m"
  growing="true"
  items="{
    path: 'myModel>/myCollection',
    key: <propertyName>, (if 'myModel' is not an ODataModel)
    sorter: ...
  }"
>

Комментарии:

1. К сожалению, стимулирование роста не решает проблему :/

2. @Lumpenstein Вы должны поместить growing="true" в таблицу в качестве управляющего свойства. Я повторно попробовал свое решение с вашим фрагментом кода из вопроса. Работал довольно хорошо.

3. В jsfiddle и здесь в SO это действительно работает, но почему-то не в моем проекте, хотя я буквально скопировал код для тестирования. Единственное отличие, которое я вижу, заключается в том, что jsfiddle использует OpenUI5 версии 1.84.0, тогда как в моем проекте используется версия 1.82.2.

4. Создал новый пустой проект, скопировал код, не работает, есть идеи, что может вызвать это?

5. Да из веб-интерфейса. К счастью, я ненавижу их веб-сайт, хотел бы вместо этого использовать VSCode или Webstorm.