구성 요소를 다시 사용할 수 있는 사용자 정의 각도 트리 격자를 만드는 방법

Syncfusion Angular Tree Grid은 테이블 형식으로 참조 계층(트리 구조) 데이터를 효과적으로 시각화하는 데 사용되는 기능이 풍부한 컨트롤입니다.풍부한 기능 집합에는 데이터 바인딩, 편집, 정렬, 필터링, 페이지 나누기, 집합 줄, Excel, CSV 및 PDF 형식으로 내보내기 등 다양한 기능이 포함되어 있다.비록 대량의 내장과 사용자 정의 기능이 있지만, 때로는 프로그램의 여러 실례에 대한 수요를 충족시키기 위해 사용자 정의 각도 트리 격자를 필요로 할 수도 있다.
이 때 개발자는 응용 프로그램의 모든 사용 위치에서 맞춤형 코드를 다시 써야 한다.이것은 매우 많은 시간을 소모하고 생산성에 영향을 줄 것이다.
이런 상황을 피하는 방법 중 하나는 사용자 정의 코드를 포함하는 재사용 가능한 함수를 사용하는 것이다.다시 말하면, 우리는 사용자 정의 트리 격자를 포함하는 사용자 정의 구성 요소를 만들 수 있다.사용자 정의 구성 요소에서 트리 격자를 사용할 때, 모든 사용자 정의는 가능합니다.따라서 재작업을 피할 수 있다.
사용자 정의 구성 요소의 실현을 깊이 이해합시다!

어셈블리 생성

나는 당신이 이미 getting started with Angular Tree Grid 문서와 Angular component overview을 읽고 이 구성 요소의 기초 지식을 익혔으면 합니다.
각도 트리 격자에서 재사용 가능한 사용자 정의 어셈블리를 작성하려면 다음 절차를 따르십시오.
첫 번째 단계: 우선 구성 요소 파일 트리 구성 요소를 만듭니다.t. 사용자 정의 구성 요소의 선택기와 내연 템플릿을 선택합니다.그런 다음 각도 트리 격자선 어셈블리에서 해당 격자선을 제공합니다.
아래의 코드 예시를 참고하시오.

@Component({
    selector: 'custom-tree',
    template:
        `<ejs-treegrid #ejsTreeGrid [treeColumnIndex]='treeColumnIndex' 
            [childMapping]='childMapping' [dataSource]="dataSource">
        </ejs-treegrid>`
})

여기에서 사용자 정의 트리를 사용자 정의 구성 요소의 이름으로 사용합니다.
2단계: 트리 메쉬 어셈블리에는 기본 트리 메쉬를 렌더링하기 위한 기본 속성 값이 필요합니다.따라서 사용자 정의 트리 구성 요소 클래스에서 입력 속성을 정의합니다.
아래의 코드 예시를 참고하시오.

export class CustomTreeComponent {
    @Input() dataSource: { [key: string]: object }[] | object[];
    @Input() columns: ColumnModel[] | string[] | Column[];
    @Input() childMapping: string;
    @Input() treeColumnIndex: string;

    …
}

3단계: 이 구성 요소를 사용하려면 응용 프로그램에서 선언합니다.모듈ts 파일은 아래 코드와 유사합니다.

@NgModule({
  declarations: [
    AppComponent, CustomTreeComponent
  ],
…
})

4단계: 기본 트리 격자 구성 요소와 같이 프로그램에서 사용자 정의 트리 구성 요소를 사용할 수 있습니다.
다음 코드를 참조하십시오.

//app.component.html file

<custom-tree #customTreeGrid childMapping='subtasks' [columns]='treeColumn' [treeColumnIndex]='1' [allowPaging]='true' [dataSource]='treeData' >
</custom-tree>

// app.component.ts file

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  …

  ngOnInit(): void {
    this.treeData = sampleData;
    this.treeColumn =  [
      { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },
      …
    ]
  }

}

사용자 정의 코드가 포함되어 있지 않으므로 이 프로그램을 실행하면 기본 Syncfusion 트리 격자가 표시됩니다.우리 맞춤 제작을 시작합시다.

사용자 정의 항목이 있는 트리 격자 사용자 정의 구성 요소

1단계:queryCellInfo 이벤트를 사용자 정의 트리 구성 요소에 추가합니다.
2단계: 새 사용자 정의 구성 요소의 트리 격자에QuerySelInfo 이벤트에 이벤트 처리 프로그램을 추가합니다.
3단계: 트리 격자에 있는queryCellInfo 이벤트에서 사용자 정의 트리 이벤트를 보냅니다.
아래의 코드 예시를 참고하시오.

@Component({
    selector: 'custom-tree',
    template:
        `<ejs-treegrid #ejsTreeGrid 
             …
            (queryCellInfo)="QueryCellInfo($event)"
            >
        </ejs-treegrid>`
})

export class CustomTreeComponent {

…
@Output() queryCellInfo = new EventEmitter();

…
QueryCellInfo(args: any) {
        if (args.column.index == 1) {
            args.cell.style.backgroundColor = 'cyan';
        }
        this.queryCellInfo.emit(args);
    }

앞의 코드 예시에서 트리 격자의queryCellInfo 이벤트는 사용자 정의 트리 구성 요소에서 터치됩니다. 우리는 트리 격자의 열을 CSS로 사용자 정의했습니다.
이 사용자 정의 트리 구성 요소는 트리 격자에 불과하며, 트리 열에 CSS 변경 사항이 있습니다.프로그램의 여러 위치에서 흔히 볼 수 있는 CSS 변경이나 다른 일반적인 트리 격자 사용자 정의가 있다면, 이 사용자 정의 구성 요소를 사용하여 모든 사용자 정의 코드를 한 위치에 놓을 수 있습니다.
참고: Angular Tree Grid의 모든 기능을 사용하려면 새로 만든 사용자 정의 구성 요소에 모든 속성, 메서드 및 이벤트를 매핑해야 합니다.
작업 이름 열 배경색이 파란색으로 설정된 경우 다음 화면 캡처를 참조하십시오.

프레젠테이션 샘플

자세한 내용은 Angular Tree Grid customizing by creating reuasble components demo을 참조하십시오.

결론

이 블로그에서 Syncfusion Angular Tree Grid 구성 요소에서 다시 사용할 수 있는 사용자 정의 구성 요소를 만들어서 이 구성 요소를 맞춤형으로 만드는 방법을 보았습니다.이렇게 하면 사용자 정의 코드를 반복해서 작성할 필요가 없다.이것은 틀림없이 우리의 시간을 절약하고 우리의 업무량을 줄일 것이다.응용 프로그램이 필요로 하는 독특하거나 복잡한 수요에 적응하기 위해 트리 격자 구성 요소를 고도로 맞춤형으로 만들어 보십시오.TreeGrid 구성 요소를 사용하려면 free trial을 다운로드하십시오.자세한 설명 및 추가적인 조치가 필요한 사실을 확인하려면 Angular live demos과 documentation을 참조하십시오.
Syncfusion 트리 그리드 컨트롤은 Blazor, ASP에서 사용할 수 있습니다.NET 플랫폼(Core, MVC, Web Forms, JavaScript, React, Vue, UWP, WPF 및 WinUI 플랫폼).한번 시도해 보고 다음 평론 부분에 피드백을 남겨 보세요.
또한 support forum, Direct-Trac 또는 feedback portal을 통해 문의하실 수 있습니다.우리는 언제든지 기꺼이 당신을 돕겠습니다!
만약 당신이 이 박문을 좋아한다면, 우리는 당신도 다음과 같은 문장을 좋아할 것이라고 생각합니다.

Understanding Hierarchical and Self-Referential JSON Data Binding in Tree Grid [블로그]

A Complete Guide to Running a Full-Stack Angular Application in a Monorepo [블로그]

Best Practices for JWT Authentication in Angular Apps [블로그]

Angular Succinctly [전자책]