#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
. С помощью anODataModel
фреймворк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.