Зачем внедрять бесконечную прокрутку для веб-потребностей, если она доступна в готовом виде?

Бесконечная прокрутка — это визуализация огромных объемов данных в одном окне, которое не заканчивается. Обычно при бесконечной прокрутке данные извлекаются по требованию, когда головка прокрутки достигает нижней части окна.

Аналогично работает бесконечная прокрутка в DataGrid. Изначально часть данных отображается в сетке, а когда пользователь прокручивает ее до конца, делается дополнительный запрос и добавляются извлеченные данные. Таким образом, мы можем загружать огромное количество данных без снижения производительности DataGrid. Бесконечная прокрутка — это альтернатива пейджингу, когда новые запрошенные данные отображаются на новых страницах.

Некоторые из наиболее распространенных примеров бесконечной прокрутки:

Пролистывание твитов в Твиттере
Пролистывание постов в Facebook
Поиск картинок Google

В этом сообщении блога мы покажем вам, как легко вы можете визуализировать огромные объемы данных в одном представлении сетки, используя функцию бесконечной прокрутки в нашей Angular Data Grid.

Почему мы используем бесконечную прокрутку

Бесконечная прокрутка обеспечивает отличный пользовательский интерфейс, она эффективно запрашивает только необходимые данные и уменьшает количество считываний данных с сервера туда и обратно.

Что особенного в бесконечной прокрутке в EJ2 DataGrid?

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

Из-за этого ограничения браузера при постоянном добавлении данных в компонент сетки браузер перестает отвечать на запросы. Это связано с постепенным увеличением веса DOM и памяти браузера.

Чтобы преодолеть эту проблему, наша DataGrid снабжена опцией режима кэширования. При включении этой функции DataGrid будет поддерживать элементы строки на основе значения счетчика maxBlocks в параметре InfiniteScrollSettings. Как только этот предел будет достигнут, DataGrid удалит элементы строки только из DOM и сохранит данные в экземпляре сетки.

Шаги по реализации бесконечной прокрутки с замороженной сеткой в среде Angular

Шаг 1: Настройте среду Angular

Используйте Angular CLI для настройки приложений Angular. Чтобы установить Angular CLI, используйте следующую команду.

npm install -g @angular/cli

Шаг 2: Создайте приложение Angular

Запустите новое приложение Angular, используя следующую команду Angular CLI.

новое мое приложение

cd my-app

Шаг 3: Добавьте пакет Syncfusion Grid

Все пакеты Essential JS 2 NuGet публикуются в реестре npmjs.com.

Чтобы установить компонент Data Grid, используйте следующую команду.

npm install @syncfusion/ej2-angular-grids --save

-save укажет NPM включить пакет сетки в раздел dependencies файла package.json.

Шаг 4: Регистрация модуля Grid

Импортируйте модуль Grid в приложение Angular (app.module.ts) из пакета @syncfusion/ej2-angular-grids [src/app/app.module.ts].

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
// import the GridModule for the Grid component 
import { GridModule } from '@syncfusion/ej2-angular-grids'; 
import { AppComponent } from './app.component'; 
@NgModule({
 //declaration of ej2-angular-grids module into NgModule 
 imports: [ BrowserModule, GridModule ],
 declarations: [ AppComponent ],
 bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

Шаг 5: Добавление ссылки на CSS

Следующие файлы CSS доступны в папке пакета ../node_modules/@syncfusion. Добавьте ссылку на эти файлы CSS в styles.css[src/styles.css], используя следующий код.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';

Шаг 6: Добавьте компонент Data Grid

Измените шаблон в файле [src/app/app.component.ts], чтобы визуализировать компонент сетки. Добавьте сетку данных Angular с помощью селектора ejs-grid в разделе шаблона файла app.component.ts.

import { Component, OnInit } from '@angular/core'; 
@Component({
 selector: 'app-root',
 // specifies the template string for the Grid component
 template: `<ejs-grid> </ejs-grid>` 
}) 
export class AppComponent implements OnInit {
 ngOnInit(): void {
 } 
}

Шаг 7: Определение источника данных и столбцов

Привяжите данные к компоненту Data Grid с помощью свойства dataSource. Он либо принимает массив объектов JavaScript, либо экземпляр DataManager. Затем определите столбцы на основе свойств источника данных.

import { Component, OnInit } from '@angular/core'; 
import { getData } from './datasource'; 
@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data'>
<e-columns>
<e-column field='TaskID' headerText='Task ID' textAlign='Right' width=90></e-column> 
<e-column field='Engineer' headerText='Engineer' width=120></e-column> 
<e-column field='Designation' headerText='Designation'width=120></e-column> 
<e-column field='Estimation' headerText='Estimation' textAlign='Right' width=120></e-column> 
<e-column field='Status' headerText='Status'width=120></e-column> </e-columns> 
</ejs-grid>` 
}) 
export class AppComponent implements OnInit {
 public data: object[];
 ngOnInit(): void {
  this.data = getData(10000);
 }
}

Шаг 8: Внедрение модуля

Чтобы создать сетку с дополнительными функциями, внедрите необходимые модули. Для расширения основных функций сетки используются следующие модули:

InfiniteScrollService: добавьте этот провайдер, чтобы использовать функцию бесконечной прокрутки.
FreezeService: внедрите этот провайдер, чтобы использовать функцию закрепленных строк и столбцов.

Эти модули должны быть внедрены в раздел провайдера корневого класса NgModule или компонента.

Шаг 9. Включите бесконечную прокрутку

Функцию бесконечной прокрутки можно включить, установив для свойства enableInfiniteScrolling значение true. Кроме того, мы должны внедрить модуль InfiniteScrollService в раздел провайдера.

Шаг 10. Установите закрепленные столбцы

Закрепленные столбцы можно определить с помощью свойства frozenColumns. Также добавьте модуль FreezeService в раздел провайдера.

import { Component, OnInit } from '@angular/core'; 
import { getData } from './datasource'; 
@Component({
selector: 'app-root', 
template: `<ejs-grid [dataSource]='data' height=300 [enableInfiniteScrolling]='true' [frozenColumns]='2'> 
<e-columns> 
<e-column field='TaskID' headerText='Task ID' textAlign='Right' width=90></e-column> 
<e-column field='Engineer' headerText='Engineer' width=120></e-column> 
<e-column field='Designation' headerText='Designation'width=120></e-column> 
<e-column field='Estimation' headerText='Estimation' textAlign='Right' width=120></e-column> 
<e-column field='Status' headerText='Status'width=120></e-column> </e-columns> 
</ejs-grid>` 
}) 
export class AppComponent implements OnInit {
 public data: object[];
 ngOnInit(): void {
  this.data = getData(10000);
 } 
}

Шаг 11: Запустите приложение

Используйте следующую команду для запуска приложения в браузере.

ng serve --open

Вывод будет выглядеть так, как показано на следующем снимке экрана.

Ресурс

Вы можете скачать это приложение из этого места GitHub.

Вывод

Надеюсь, теперь у вас есть четкое представление о функции бесконечной прокрутки и о том, как ее использовать в Syncfusion EJ2 DataGrid. Эта функция доступна с выпуска Тома 2 2020 года.

Если вы уже являетесь клиентом, вы можете скачать наш пакет Angular со страницы Лицензии и загрузки. Если вы еще не являетесь клиентом, вы можете попробовать нашу 30-дневную бесплатную пробную версию, чтобы проверить все наши компоненты Angular, которые мы можем предложить. Вы также можете изучить образцы в нашем репозитории GitHub.

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

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

Новые материалы

Конфигурация Gulp для WordPress - Часть II

Здесь мы переходим ко второй части руководства по настройке Gulp для оптимальной разработки WordPress. Если вы пропустили первую часть, где мы установили все модули, необходимые для задач,..

LACTF — сеть/метавселенная

В lactf я смог решить задачу веб/метавселенной. Ниже приведен исходный код, предоставленный здесь Из исходного кода видно, что флаг — это отображаемое имя администратора...

GraphQL — Язык запросов — Часть 1

Первое, что нужно знать: GraphQL — это спецификация (как она должна работать и выглядеть), а не реализация. GraphQL не нужно устанавливать, вы реализуете его с помощью серверной библиотеки,..

Будущее машинного обучения в Индии

Будучи связанным с интенсивно развивающимся языком, непрерывные технологические достижения наверняка поразят сектор машинного обучения, который вот-вот сформирует долгосрочную перспективу машинного..

Сравнение Clojure IDE — Emacs/Cider и IDEA/Cursive

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

Строки, регулярные выражения и шаблонные литералы — Часть 1 | Понимание ES6

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

7 признаков того, что вы все еще начинающий веб-разработчик

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

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Web Development Software Development Python Coding Deep Learning React AI Software Engineering Java Nodejs Front End Development Algorithms Typescript Computer Science Data Tutorial Tech NLP Development CSS Javascript Tips Neural Networks Programming Languages Angular Productivity Developer Github Reactjs HTML Data Visualization ChatGPT Python Programming Startup DevOps

Зачем внедрять бесконечную прокрутку для веб-потребностей, если она доступна в готовом виде?