Перейти к основному содержимому

Фильтрация данных в таблице

Формулировка задачи​

Фильтровать данные во всех столбцах таблицы на экранной форме.

Предварительные требования​

Создан проект DemoFilter, в котором описана модель данных с классом Project с атрибутами следующих типов:

  • Name: string;
  • Stage: string;
  • Manager: string.

На основе класса сгенерированы экранные формы, в том числе ProjectPage.mdcontainer, отображающая таблицу с данными о проектах. При генерации экранных форм созданы действия, в том числе GetProject для получения данных класса, и источник данных getProject, в параметрах которого указано действие GetProject.

Для проекта настроена модель безопасности. Проект опубликован. В базу данных добавлены данные.

Рекомендуемое решение задачи​

Рекомендуемый подход к решению описанной задачи включает следующие шаги:

  1. Добавление компонента Filter на экранную форму.

    В списке файлов проекта выберите ProjectPage.mdcontainer, в списке разделов Редактора Форм выберите Компоненты и перетащите компонент Filter на экранную форму, разместив его над таблицей.

  2. Настройка свойств компонента Filter.

    В то время, когда компонент Filter выбран, на панели Свойства и события в блоке Свойства укажите следующие свойства:

    • Colums: выберите вариант const и введите значение константы как перечисление всех столбцов таблицы, в которых вы хотите фильтровать данные: [{"fieldAlias":"Name","fieldTitle":"Имя проекта","fieldType":"string"},{"fieldAlias":"Manager","fieldTitle":"Руководитель","fieldType":"string"},{"fieldAlias":"Stage","fieldTitle":"Стадия","fieldType":"string"}]. Это значение позволяет фильтровать данные во всех полях таблицы.
    • Model: выберите вариант var и введите имя переменной, например, filterSettings.

  3. Настройка обработчика события компонента Filter.

    Настройте обработчик события применения фильтра. На панели Свойства и события в блоке События для обработчика события OnFilterSet и выберите вариант func и введите текст обработчика, используя настроенный источник данных getProject.

    func () => {
      getDataSource("getProject").load();
      }
    )

  4. Добавление параметра GraphQL-запроса для получения данных.

    В текст GraphQL-запроса, указанного в параметрах действия GetProject, добавьте переменную filter и опишите условие выборки данных, используя эту переменную. Измененный запрос должен иметь следующий вид:

    query($take: Int, $skip: Int, $filter: DemoFilter_ProjectFilterInput) {
      demofilter_project(skip: $skip, take: $take, where: $filter) {
      items{
        Id, Stage, Name, Manager, 
      }
      totalCount
     }
    }

  5. Задание значения элемента входного контракта данных в параметрах источника данных.

    Откройте окно настроек источника данных getProject. Убедитесь, что в списке элементов входного контракта данных отображается новый элемент filter, который автоматически добавлен в результате изменения GraphQL-запроса на предыдущем шаге. Для нового элемента filter укажите значение как переменную filterSettings, которая уже используется в качестве значения свойства Model.

    В ProjectPage.mdcontainer в коде описания компонента Filter должен отображаться следующий код:

    <Filter
       Columns={[
         { title: "Имя проекта", alias: "Name", dataType: "string" },
         { title: "Руководитель", alias: "Manager", dataType: "string" },
         { title: "Стадия", alias: "Stage", dataType: "string" },
       ]}
       Model-var="filterSettings"
       OnFilterSet={() => {
         getDataSource("getProject").load();
       }}
     />