Syncfusion 각도 데이터 격자에서 1초도 안 되는 시간에 100만 개의 레코드를 로드하는 방법

Syncfusion Angular Data Grid은 데이터를 표 형식으로 표시하는 데 사용됩니다.데이터 바인딩, 편집, Excel과 같은 필터링, 사용자 정의 정렬, 그룹화, 행 재정렬, 행 및 열 동결, 행 집합, Excel, CSV 및 PDF 형식으로 내보내기 등의 다양한 기능이 있습니다.
이 블로그에서 Syncfusion 각도 데이터 격자에 1초도 안 되는 시간에 100만 개의 기록을 불러오는 방법을 토론할 것이다.
시작합시다!

무엇이 가상 스크롤입니까, 왜 우리가 그것을 필요로 합니까?

생각해 보세요. 100만 개가 넘는 기록이 있고, 페이지가 아닌 스크롤 가능한 격자에 표시하기를 원합니다.모든 브라우저에 수백만 개의 기록을 불러오는 데 많은 시간이 걸리기 때문에 성능이 떨어진다.또한 DOM(문서 객체 모델)을 오염시키고 메모리를 많이 소비합니다.
가상 스크롤을 사용하면 모든 데이터를 한 번에 렌더링하지 않고 화면에 맞는 데이터 서브셋 (작은 버퍼 추가) 을 렌더링할 수 있습니다.모든 다른 데이터는 위쪽과 아래쪽을 통해 요소를 채워서 표시할 수 있습니다.이 요소들은 공백이지만 일부 높이는 항목 계수와 행 노드 높이에 따라 계산됩니다.이것은 일치하는 스크롤 막대 파라미터를 제공하는 데 필요하다.따라서 사용자가 탐색할 때 새로운 항목 서브셋을 계산하고 내용을 재구성하며 이전 항목을 숨기고 충전 요소를 다시 계산합니다.

각도 데이터 격자에 수백만 개의 레코드를 로드하려면

1단계: 각도 환경을 설정합니다.

Angular CLI을 사용하여 각도 환경을 설정합니다.Angular CLI를 설치하려면 다음 명령을 사용합니다.
| npm install -g @angular/cli |

단계 2: 각도 응용 프로그램을 만듭니다.

다음 Angular CLI 명령을 사용하여 새 Angular 응용 프로그램을 만듭니다.
| ng new my-app
cd my-app
|
3단계: Syncfusion grids 패키지를 추가합니다.
npmjs.com 레지스트리에는 필요한 모든 JS 2 NuGet 패키지가 제공됩니다.
데이터 격자 구성 요소를 설치하려면 다음 명령을 사용하십시오.
| npm install @syncfusion/ej2-angular-grids --save |
save는 NPM에 grids 가방을 가방의 dependencies 부분에 포함하도록 지시할 것입니다.json.
4단계: 메쉬 모듈을 등록합니다.
격자 모듈을 패키지 @syncfusion/ej2 Angular grids [src/app/app.module.ts]에서 각도 프로그램 (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\u modules/@syncfusion 패키지 폴더입니다.스타일에 이러한 CSS 파일에 대한 참조를 추가합니다.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: 데이터 격자 구성 요소 추가
[src/app/app.component.html] 파일의 템플릿을 수정하여 격자 구성 요소를 표시합니다.선택기와 단추 요소를 사용하여 데이터를 불러오고 각도 데이터 격자를 추가합니다.
다음 코드를 참조하십시오.

<div class='div-button'>
  <button (click)='onClick($event)'>Load 1 Million Data</button>
  <span id="performanceTime">Time Taken: 0 ms</span>
</div>
<ejs-grid #grid [dataSource]='vData' [enableVirtualization]='true' [enableColumnVirtualization]='true' height='600' (dataBound)='dataBound()'>
  <e-columns>
      <e-column field='FIELD1' headerText='Player Name' width='120'></e-column>
      <e-column field='FIELD2' headerText='Year' width='100'></e-column>
      <e-column field='FIELD3' headerText='Stint' width='120'></e-column>
      <e-column field='FIELD4' headerText='TMID' width='120'></e-column>
      <e-column field='FIELD5' headerText='LGID' width='120'></e-column>
      <e-column field='FIELD6' headerText='GP' width='120'></e-column>
      <e-column field='FIELD7' headerText='GS' width='120'></e-column>
      <e-column field='FIELD8' headerText='Minutes' width='120'></e-column>
      <e-column field='FIELD9' headerText='Points' width='130'></e-column>
      <e-column field='FIELD10' headerText='OREB' width='130'></e-column>
      <e-column field='FIELD11' headerText='DREB' width='130'></e-column>
      <e-column field='FIELD12' headerText='REB' width='130'></e-column>
      <e-column field='FIELD13' headerText='Assists' width='130'></e-column>
      <e-column field='FIELD14' headerText='Steals' width='120'></e-column>
      <e-column field='FIELD15' headerText='Blocks' width='120'></e-column>
      <e-column field='FIELD16' headerText='Turnovers' width='140'></e-column>
      <e-column field='FIELD17' headerText='PF' width='100'></e-column>
      <e-column field='FIELD18' headerText='FGA' width='150'></e-column>
      <e-column field='FIELD19' headerText='FGM' width='120'></e-column>
      <e-column field='FIELD20' headerText='FTA' width='150'></e-column>
      <e-column field='FIELD21' headerText='FTM' width='120'></e-column>
      <e-column field='FIELD22' headerText='Three Attempted' width='170'></e-column>
      <e-column field='FIELD23' headerText='Three Made' width='140'></e-column>
      <e-column field='FIELD24' headerText='Post GP' width='120'></e-column>
      <e-column field='FIELD25' headerText='Post GS' width='120'></e-column>
      <e-column field='FIELD26' headerText='Post Minutes' width='150'></e-column>
      <e-column field='FIELD27' headerText='Post Points' width='120'></e-column>
      <e-column field='FIELD28' headerText='Post OREB' width='150'></e-column>
      <e-column field='FIELD29' headerText='Post DREB' width='150'></e-column>
      <e-column field='FIELD30' headerText='Post REB' width='150'></e-column>
  </e-columns>
</ejs-grid>

이전의 격자 설정에서, 우리는enableVirtualization과enableColumnVirtualization 속성을 사용하여 줄과 열을 가상화하여 수직과 수평 스크롤에서 데이터를 가상화합니다.
주의: 줄 가상화를 설정하려면height 속성을 사용하여 내용 높이를 설정해야 합니다.
7단계: 생성된 100만 개의 데이터 포인트를 데이터 격자에 연결합니다.
버튼 클릭 이벤트에서 우리는 데이터에서 100만 개의 데이터 포인트를 생성했다.ts 파일, 이 파일은 순환을 사용하고 데이터소스 속성을 사용하여 이 데이터를 데이터 격자에 연결합니다.데이터가 격자에 연결되면 데이터 연결 이벤트를 호출합니다.
다음 코드를 참조하십시오.

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { datasource, virtualData } from './data';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public vData: Object[] = virtualData;
    @ViewChild('grid')
    public grid: GridComponent;
    public date1: number;
    public date2: number;
    public flag: boolean = true;
    public ngOnInit(): void { }

    onClick = (args: any) => {
        if (!this.vData.length) {
             datasource();
            this.grid.dataSource = this.vData;
        }
        this.flag = true;
        this.date1 = new Date().getTime();
        this.grid.refresh();
    }
    dataBound(): void {
        if (this.flag && this.date1) {
            this.date2 = new Date().getTime();
            document.getElementById('performanceTime').innerHTML = 'Time Taken: ' + (this.date2 - this.date1) + 'ms';
            this.flag = false;
        }
    }
}

단계 8: 모듈 주입.
일부 추가 기능을 사용하여 격자를 사용자 정의하려면 필요한 모듈을 삽입하십시오.VirtualScrollService 모듈을 사용하여 격자를 확장하는 기본 기능입니다. 이 모듈은 가상 스크롤 기능을 사용하는 공급자입니다.이 모듈은 루트 NgModule 또는 어셈블리 클래스의 공급자 섹션에 주입해야 합니다.
단계 9: 애플리케이션 실행
다음 명령을 사용하여 브라우저에서 응용 프로그램을 실행합니다.
| ng serve –open |
출력은 다음과 같이 표시됩니다.gif 이미지.

GitHub 참조: 이 GitHub 저장소에서 프로젝트 예: https://github.com/SyncfusionExamples/VirtualScroll을 볼 수 있습니다.

결론

이 블로그에서 우리는 1초도 안 되는 시간에 수백만 개의 데이터 포인트를 불러오는 것이 얼마나 쉬운지 보았고, 동기화 각도 데이터 격자에는 어떠한 성능 지연도 없었다.이 기능은 불러오는 시간과 메모리 공간을 줄일 수 있습니다.DataGrid 컨트롤은 Syncfusion ASP에서 사용할 수 있습니다.NET(Core, MVC, Web Forms, Blazor, JavaScript, React, Vue, Flutter, Xamarin, UWP, WinForms 및 WPF 플랫폼.
따라서 마음대로 사용해 보시고 아래의 평론 부분에서 당신의 피드백이나 문제를 공유하세요.
Angular 개발자에게 Syncfusion은 65가지 이상의 고성능, 경량급, 모듈화, 응답성 Angular components을 제공하여 개발 속도를 높인다.
당신도 우리의 support forum, Direct-Trac 또는 feedback portal을 통해 우리와 연락할 수 있습니다.우리는 항상 기꺼이 너를 돕는다!