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

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

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

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

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

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

      В режиме просмотра шаблон выводит значения поля, а для поля Phone выводимое значение дополнительно декорируется в формат телефонного номера.
  2. Добавьте шаблоны в файловую структуру проекта.
    Project
    └───PhoneBook-demo
        └───PhoneBook
            └─── columnTemplate.wml
            └─── phoneColumnTemplate.wml
  3. Импортируйте шаблоны в файл PhoneBook-demo/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. Результат должен быть таким, как на изображении ниже.

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

Что дальше?

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