Представляем индикатор загрузки скелета в Syncfusion Essential JS 2 DataGrid

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

Начиная с выпуска 2022 Volume 3, Essential JS 2 DataGrid от Syncfusion поддерживает индикатор загрузки скелета (эффект мерцания) между получением данных с сервера (или другого сервиса) и привязкой их к сетке во время первоначального рендеринга, при обновлении, или после выполнения любых действий с сеткой, таких как сортировка, фильтрация или группировка.

В этом блоге мы увидим, как визуализировать индикатор загрузки скелета для различных функций в нашей Essential JS 2 DataGrid.

Включить индикатор загрузки скелета в Syncfusion Essential JS 2 DataGrid

Syncfusion DataGrid поддерживает как эффекты spinner, так и мерцание в качестве индикаторов загрузки. В современном дизайне мерцающий эффект предпочтительнее спиннера.

Сетки с разбивкой на страницы и с поддержкой виртуализации используются для визуализации огромного объема данных без снижения производительности. Давайте посмотрим, как включить эффект мерцания как для разбитых на страницы, так и для виртуализированных сеток в нашей Essential JS 2 DataGrid.

Для DataGrid с разбивкой на страницы

В DataGrid с поддержкой нумерации страниц мы можем включить эффект мерцания, задав для свойства loadingIndicator значение Shimmer. Значение по умолчанию для loadIndicator — Spinner. Итак, мы должны определить это свойство, чтобы использовать эффект мерцания.

Это не означает, что мерцающий эффект будет отображаться только для пагинации. Его также можно отображать при выполнении других действий с сеткой. Индикатор загрузки скелета будет отображаться для представления макета содержимого сетки всякий раз, когда сетка ожидает содержимого.

См. следующий пример кода.

import { Grid, Page, Selection } from '@syncfusion/ej2-grids';
import { orderData } from './data-source'; // import your data source
 
Grid.Inject(Page);
 
let grid: Grid = new Grid(
{
  dataSource: orderData,
  allowPaging: true,
  loadingIndicator: { indicatorType: 'Shimmer' },
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },
  ],
  pageSettings: { pageSize: 7 }
});
grid.appendTo('#Grid');

Для DataGrid с поддержкой виртуализации

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

Syncfusion Essential JS 2 DataGrid позволяет отображать эффект мерцания скелета при загрузке данных по запросу. Эту функцию можно включить, установив для свойства enableVirtualMaskRow значение true.

См. следующий пример кода.

import { VirtualScroll, Grid, Edit, Toolbar } from '@syncfusion/ej2-grids';
import { orderData } from './data-source'; // import your data source
 
Grid.Inject(VirtualScroll);
 
let grid: Grid = new Grid(
{
  dataSource: orderData,
  enableVirtualization: true,
  height: 400,
  enableVirtualMaskRow:true,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },
 
  ],
});
grid.appendTo('#Grid');

Другие функции DataGrid с индикатором загрузки скелета

Давайте посмотрим на эффект мерцания в других функциях Essential JS 2 DataGrid.

Группировка по одному столбцу

Группировка нескольких столбцов

Совокупный заголовок группы

Совокупность нижнего колонтитула

Иерархический DataGrid

Столбец флажка

Фильтрация флажков

Заключение

Спасибо за прочтение! Мы надеемся, что вам понравилось это краткое введение в индикатор загрузки скелета (эффект мерцания) в нашем Essential JS 2 DataGrid в выпуске 2022 Volume 3. Попробуйте эту замечательную функцию и оставьте свой отзыв в разделе комментариев ниже.

Кроме того, ознакомьтесь с нашими страницами Примечания к выпуску и Что нового, чтобы увидеть все новые обновления в этом выпуске.

Вы также можете связаться с нами через наши форумы поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 31 октября 2022 г.

Представляем индикатор загрузки скелета в Syncfusion Essential JS 2 DataGrid