Сортировка данных в компоненте DataGrid

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

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

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

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

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

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

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

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

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

1. Выбор экранной формы с компонентом DataGrid.

   В списке экранных форм проекта выберите экранную форму ProjectPage, на которой размещен компонент DataGrid.

2. Включение сортировки данных в столбцах таблицы.

   Для компонента DataGrid установите значение true для свойства sortEnabled каждого столбца таблицы. В кодовом режиме Редактора Форм свойство Columns описывается следующим блоком кода:

      Columns={[
        {
          title: "Manager", alias: "Manager", dataType: "string", sortEnabled: "true",
        },
        {
          title: "Stage", alias: "Stage", dataType: "string", sortEnabled: "true",
        },
        {
          title: "Name", alias: "Name", dataType: "string", sortEnabled: "true",
        },
      ]}

3. Создание переменной состояния для хранения текущего направления сортировки данных в столбцах таблицы.

   В визуальном режиме Редактора Форм выберите компонент DataGrid и для свойства sortSettings установите вариант var и укажите имя переменной, например, sortSettings.

4. Добавление скрипта управления сортировкой в коде экранной формы ProjectPage.

   В секцию Scripts добавьте блок кода для установки значения свойства sortSettings, управляющего сортировкой данных. Например, установите значение ASC для сортировки по возрастанию, как показано в следующем блоке кода.

   Scripts={[
    () => {
      setState({
        sortSettings: [
          {
            Name: "ASC",
          },
        ],
      });
    },
   ]}

5. Настройка обработчика события сортировки данных в таблице.

   Введите следующий блок кода для обработчика события OnSort():

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

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

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

   query($sort: [Sort_ProjectSortInput!]) {
     sort_project(order: $sort,
     ) {
         items{
           Id, Manager, Stage, Name, 
         }
       totalCount
     }
   }

7. Добавление параметра сортировки данных в список параметров входного контракта данных.

   В блок описания источника данных (DataSources) добавьте следующий блок кода с описанием входного контракта данных для источника данных getProject.

   preProcess: {
     map: [{ children: [{ source: "sortSettings", key: "sort" }] }],
   },

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

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

9. Проверка корректности кода экранной формы.

   Убедитесь, что в коде экранной формы ProjectPage блок описания компонента DataGrid соответствует следующему блоку кода. Блоки кода, не относящиеся к решаемой задаче и добавленные в результате генерации экранной формы, отсутствуют в следующем блоке кода. Блок кода описания обработчика события onRowClick() и блок кода описания компонента Pagination удалены.

   <DataGrid
      KeyField="Id"
      Columns={[
        {
          title: "Manager", alias: "Manager", dataType: "string", sortEnabled: "true",
        },
        {
          title: "Stage", alias: "Stage", dataType: "string", sortEnabled: "true",
        },
        {
          title: "Name", alias: "Name", dataType: "string", sortEnabled: "true",
        },
      ]}
      Value-var="getProject.load.data.sort_project.items"
      OnSort={() => {
        getDataSource("getProject").load();
      }}
      SortSettings-var="sortSettings"
    >
      <Tr>
        <Td Slot="id_Manager">
          <Text Value-var="item.Manager" />
        </Td>
        <Td Slot="id_Stage">
          <Text Value-var="item.Stage" />
        </Td>
        <Td Slot="id_Name">
          <Text Value-var="item.Name" />
        </Td>
      </Tr>
    </DataGrid>