Syncfusion 각도 데이터 격자에서 지연 부하 그룹을 사용하는 방법

Angular grid/Data Grid 구성 요소는 표 형식으로 데이터를 표시하는 데 사용되는 풍부한 컨트롤러입니다.데이터 바인딩, 편집, Excel 필터링, 사용자 정의 정렬, 그룹화, 행 순서재정리, 행 및 열 동결, 집합 행 및 Excel, CSV 및 PDF 형식으로 내보내기 등의 광범위한 기능이 있습니다.
이 블로그에서, 우리는 그룹 불러오기 지연 기능과 Syncfusion 데이터 격자에서 그룹 데이터를 필요에 따라 불러오는 방법을 토론할 것이다.
우리 시작합시다!

지연 로드란?

일반적으로 사용자가 한 열을 그룹으로 나누면 전체 그룹의 기록이 서버에서 다운로드되어 한꺼번에 나타난다.그러나 사용자가 다운로드한 모든 데이터를 실제로 볼 것이라고 보장할 수는 없다.
예를 들어 사용자가 이미지 라이브러리 사이트를 열지만 첫 번째 이미지를 본 후에 이 사이트를 떠날 때만 가능하다.로드된 나머지 이미지는 표시되지 않습니다.이것은 메모리와 대역폭의 낭비를 초래할 것이다.
대량 로딩과 달리, 지연 로딩의 개념은 모든 데이터를 한 번에 로딩해서 사용자에게 보여주는 것이 아니라 로딩에 필요한 부분만 도와준다.사용자가 필요로 할 때까지 나머지 데이터를 불러오는 것을 지연시킬 것이다.

로드 지연의 이점

은 초기 로드 시간을 단축합니다.

대역폭 절감 효과

시스템 자원 보호

데이터 격자에서의 지연 로드 기능

정상 그룹과 지연 부하 그룹

일반적인 그룹 모드에서 사용자가 열을 그룹화할 때 제목 줄과 데이터 줄은 전개 상태로 나타납니다.데이터 줄은 페이지 크기에 따라 제한됩니다.페이지 크기를 초과하면 나머지 데이터 줄이 다음 페이지에 나타납니다.
지연 로드 그룹 모드에서 그룹 작업을 수행할 때 데이터 격자는 접힌 상태의 제목 줄만 나타납니다.사용자가 제목 줄을 펼치면 데이터 줄이 나타납니다.첫 번째 레벨 그룹의 제목 줄은 데이터 줄이 아닌 페이지 크기 계수로 간주됩니다.예를 들어, 페이지 크기 값이 5이면 각 페이지에 다섯 개의 그룹 머리글 행이 표시되며 이러한 머리글 행에는 데이터 행 수에 제한이 없습니다.
따라서 각 그룹의 제목 줄은 n개의 데이터 줄이나 끼워 넣을 수 있다.각 그룹의 데이터는 블록(집합 또는 행)으로 표시됩니다.스크롤 막대가 블록의 아래쪽에 도달하면 다음 블록이 로드됩니다.그것의 작업 원리는 무한 스크롤 기능과 유사하다.

지연 부하 그룹의 캐시 모드

모든 현대 브라우저는 특정한 웹 페이지에서 사용할 수 있는 내용에 대해 하드 메모리 제한이 있지만, 브라우저의 디자인은 수백만 개의 요소를 처리할 수 없다.브라우저에 수백만 개의 데이터 포인트/요소를 로드하려고 하면 브라우저가 응답하지 않습니다.
이러한 브라우저의 제한으로 인해, 우리는 그룹 기록을 연속으로 스크롤할 때 이러한 무응답 문제에 직면하게 될 것이다.스크롤 막대가 블록의 아래쪽에 도달할 때마다 격자는 새 그룹 데이터를 조회한 다음 렌더링 행을 추가합니다.따라서 DOM 가중치와 브라우저 메모리가 점점 증가합니다.
이 문제를 극복하기 위해서, 각도 데이터 격자에 캐시 모드가 있습니다.이 모드를 활성화하면 DOM에서 제한된 블록만 유지됩니다.제한을 초과하면 DOM에서 줄 요소만 삭제하고 데이터 격자 실례에서 그룹 데이터를 유지합니다.

Syncfusion 각도 데이터 격자에서 지연 부하 그룹을 사용하는 방법

다음 단계에 따라 Syncfusion Angular Data Grid 컨트롤에서 지연 로드 그룹 기능을 활성화합니다.

1단계: 각도 환경 및 데이터 그리드 설정

각도 환경을 설정하고 응용 프로그램에 데이터 격자 구성 요소를 추가하려면 데이터 격자의 getting started 문서 페이지를 보십시오.

2단계: 모듈 주입

다른 기능이 있는 격자를 만들려면 필요한 모듈을 삽입하십시오.다음 모듈은 메쉬의 기본 기능을 확장하는 데 사용됩니다.

LazyLoadGroup Service: 불활성 로드 그룹 기능을 사용하기 위해 이 공급자를 주입합니다.

Group Service: 이 공급자를 실행하여 그룹 기능을 사용합니다.

PageService: 페이지 나누기 기능을 사용하려면 이 Provider를 실행하십시오.

이 모듈들은 루트 모듈이나 구성 요소 클래스의provider 부분에 주입되어야 합니다.
아래의 코드 예시를 참고하시오.
[app.module.ts]

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// import the GridModule for the Grid component
import { GridModule, PageService, GroupService, LazyLoadGroupService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, GridModule
  ],
  providers: [PageService, GroupService, LazyLoadGroupService],
  bootstrap: [AppComponent]
})
export class AppModule { }

3단계: 지연 로드 그룹 사용

enableLazyLoading 속성을 true로 설정하여 지연 로드 그룹 기능을 활성화할 수 있습니다.지연 불러오기 그룹 특성은 그룹 특성에 달려 있기 때문에allowGrouping 속성을true로 설정해야 합니다.
다음 코드 예시를 참고하세요.
[app.component.html]

<ejs-grid [dataSource]='lazyLoadData' [allowPaging]='true' [allowGrouping]='true' [groupSettings]='groupSettings'>
  <e-columns>
      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='120'></e-column>
      <e-column field='ProductName' headerText='Product Name' width='100'></e-column>
      <e-column field='ProductID' headerText='Product ID' textAlign='Right' width='120'></e-column>
      <e-column field='CustomerID' headerText='Customer ID' width='120'></e-column>
      <e-column field='CustomerName' headerText='Customer Name' width='120'></e-column>
  </e-columns>
</ejs-grid>

[app.component.ts]

import { Component, OnInit } from '@angular/core';
import { createLazyLoadData, lazyLoadData } from './data';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public lazyLoadData: object[] = lazyLoadData;

  // Enabled Lazy loading and added initial grouped columns
  public groupSettings: object = { enableLazyLoading: true, columns: ['ProductName', 'CustomerName'] };

  ngOnInit(): void {
    // Generated datasource for lazy load grouping
    createLazyLoadData();
  }
}

이 코드를 실행하면 다음과 같은 출력을 얻을 수 있습니다.gif 이미지.
각도 데이터 격자에서의 지연 부하 그룹

리소스

이 GitHub에서 이 프로그램의 원본 코드를 다운로드할 수 있습니다.

결론

이렇게!이제 Syncfusion Angular Data Grid을 사용하여 애플리케이션에서 지연 로드 그룹 구성 기능을 사용할 수 있습니다.이 기능은 초기 로드 시간을 줄이고 대역폭과 시스템 자원 절약을 강화할 것이다.
이 기능을 사용해 보세요. 아래의 피드백 부분에 당신의 댓글을 남겨주세요!
만약 당신이 아직 고객이 아니라면, 당신은 우리가 30일 동안 free trial을 시험해 보고, 이 기능들을 좀 볼 수 있습니다.
또한 support forum, Direct-Trac 또는 feedback portal을 통해 문의하실 수 있습니다.우리는 언제든지 기꺼이 당신을 돕겠습니다!