Удаление данных из справочника
Удаление данных из справочника организуем с помощью опций записи.
Шаг 1: Импорт зависимостей
- Перейдите в директорию
PhoneBook
и откройте файлPhoneBook.ts
. - Импортируйте следующие контролы:
import {Confirmation} from 'Controls/popup'; import {Remover} from 'Controls/list'; import {Model} from 'Types/entity';
С помощью контрола Confirmation мы будем создавать диалог подтверждения перед удалением записи.
С помощью контрола Remover мы организуем удаление записи из источника данных. Подробнее о работе с контролом читайте здесь.
Импортируем абстрактную модель доступа к данным для работы с источником данных.
Шаг 2: Обработчик удаления записи
- В свойстве
_children
добавьте дочерний контролlistRemover
:protected _children: { gridView: View & Control; listRemover: typeof Remover; };
- Добавьте обработчик удаления записи:
protected _onActionClick(event: unknown, action: IItemAction, item: Model): void { // Обрабатываем только опцию удаления. if (action.id !== 'delete') { return; } Confirmation.openPopup({ message: 'Удалить запись?', type: 'yesno' }) .then((answer) => { if (answer) { this._children.listRemover.removeItems([item.getKey()]); } }); }
Шаг 3: Обработчик отображения опции записи
В этом обработчике мы скрываем опцию удаления для вновь добавляемых записей, потому что при редактировании записи ее еще не существует в источнике данных, а значит удаление не имеет смысла.
Признак вновь добавленной записи — отсутствие у нее значения, например, ключевого поля
protected _isItemActionVisible(action: IItemAction, item: Model): boolean {
if (action.id !== 'delete') {
return true;
}
return !!item.getKey();
}
Шаг 4: Изменение структуры вложенности контрола
- Перейдите в директорию
Phonebook
в файлPhoneBook.wml
. - Для поддержания операции удаления записей (см. Перемещение) изменим структуру шаблона согласно схеме
Шаг 4.1: Добавление контрола Controls/list:DataContainer
- Для корректной работы с записями добавьте контрол-контейнер DataContainer из библиотеки Controls/list.
- Перенесите опции
source
иkeyProperty
из контролаControls/grid:View
. Эти опции будут переданы контролуDataContainer
.<Controls.list:DataContainer keyProperty="key" source="{{_source}}"> <div> <Controls.grid:View .../> </div> </Controls.list:DataContainer>
Шаг 4.2: Добавление контрола Controls/list:Remover
Добавьте контрол Controls/list:Remover, через который будут удаляться записи из таблицы.
<Controls.list:DataContainer keyProperty="key" source="{{_source}}">
<div>
<Controls.list:Remover name="listRemover"/>
<Controls.grid:View .../>
</div>
Шаг 4.3: Добавление контрола Controls/list:Container
Для корректной работы с таблицей добавьте контрол-контейнер Controls/list:Container.
<Controls.list:DataContainer keyProperty="key" source="{{_source}}">
<div>
<Controls.list:Remover name="listRemover"/>
<Controls.list:Container>
<Controls.grid:View .../>
</Controls.list:Container>
</div>
</Controls.list:DataContainer>
Шаг 5: Конфигурация опций записи в таблице
Добавьте для таблицы настройку опций записи.
<Controls.grid:View
name="gridView"
columns="{{_columns}}"
itemActions="{{_itemActions}}"
itemActionsPosition="outside"
itemActionVisibilityCallback="{{_isItemActionVisible}}"
on:actionClick="_onActionClick()"
>
- В опции itemActions передаем конфигурацию опций записи.
- Ориентацию набора операций над записью относительно строки можно изменить опцией itemActionsPosition — значением
outside
, т.е. кнопки опций записи будут отображены под строкой. - itemActionVisibilityCallback — функция обратного вызова для определения видимости элементов в панели действий над записью.
- С помощью опции
on:actionClick="_onActionClick()
назначим обработчик для кнопки "Удалить", расположенной в опциях записи.
Шаг 6: Сборка приложения и проверка результата.
- Запустите командную строку от имени администратора.
- Перейдите в директорию проекта.
- Выполните следующие команды:
npm run build npm start
- В браузере перейдите по ссылке: http://localhost:8080/PhoneBook-demo
- Результат должен быть таким как на изображении ниже.
Можете сверить результат освоения этого задания с файлами репозитория.
Это был последний урок по созданию телефонного справочника Wasaby.