Редактирование данных в справочнике

В ходе выполнения данного задания для справочника добавим возможность редактирования записей. Редактирование будет запускаться при клике по записи и происходить прямо в справочнике. Этот функционал в Wasaby принято называть "Редактированием по месту", подробнее о котором можно прочитать здесь.

Шаг 1: Подключение шаблоны отображения колонки

  1. Скачайте шаблон columnTemplate.wml и phoneColumnTemplate.wml.
    • Примечание. В целях экономии времени мы заранее подготовили шаблоны oтображения ячейки. Ознакомьтесь с их содержимым. Каждый шаблон логически разделен на две части, используемые для режимов редактирования или просмотра справочника.

      Шаблон phoneColumnTemplate.wml будет использован для отображения телефонных номеров. В режиме редактирования он отображает поле ввода с настроенным валидатором. Для редактирования поля Phone используется контрол Поле ввода телефона, а для остальных полей — Поле ввода текста.

      Для этих контролов в шаблоне настроен валидатор isRequired, который не позволяет оставлять поле пустым. Подробнее о валидации в Wasaby можно прочитать здесь.

      В режиме просмотра шаблон выводит значения поля, а для поля Phone выводимое значение дополнительно декорируется в формат телефонного номера.
  2. Добавьте шаблоны в файловую структуру проекта.
Project
└───PhoneBook-demo
    └───PhoneBook
        └─── columnTemplate.wml
        └─── phoneColumnTemplate.wml
  1. Импортируйте шаблоны в файл PhoneBook-demo/PhoneBook/PhoneBook.ts.
import * as columnTemplate from 'wml!PhoneBook-demo/PhoneBook/columnTemplate';
import * as phoneColumnTemplate from 'wml!PhoneBook-demo/PhoneBook/phoneColumnTemplate';

Шаг 2: Настройка шаблона отображения ячейки колонки

  1. В конфигурации колонок добавьте свойство template со значением columnTemplate.
  2. Таким образом мы задали собственный шаблон отображения ячейки.
protected _columns: IColumn[] = [{
    displayProperty: 'FIO',
    template: columnTemplate,
    width: '230px'
}, {
    displayProperty: 'Address',
    template: columnTemplate,
    width: '400px'
}, {
    displayProperty: 'Phone',
    template: phoneColumnTemplate,
    width: '270px'
}];

Шаг 3: Настройка редактирования по месту

В файле конфигурации таблицы PhoneBook.wml добавьте следующий код:

<Controls.grid:View ...>
    <ws:editingConfig
        editOnClick="{{true}}"
        toolbarVisibility="{{true}}"/>
    ...
</Controls.grid:View>

Здесь мы задали значение для опции editingConfig, которая определяет настройки для редактирования по месту.

  • В свойстве editOnClick задаётся возможность запуска редактирования при клике по записи справочника.
  • В свойстве toolbarVisibility определяется должны ли отображаться кнопки "Сохранить" и "Отмена" в режиме редактирования записи.

Шаг 4: Сборка приложения и проверка результата

  1. Запустите командную строку от имени администратора.
    • Перейдите в директорию проекта.
    • Выполните следующие команды:
      npm run build
      npm start
  2. В браузере перейдите по ссылке: http://localhost:8080/PhoneBook-demo
  3. Результат должен быть таким, как на изображении ниже.

Можете сверить результат освоения этого задания с файлами репозитория.

Что дальше?

Переходите к следующему уроку