필요한 줄 몰랐던 상위 5개 Angular 데이터 그리드 기능

Angular는 현재까지 가장 인기 있는 프론트엔드 개발 도구입니다. 예, 배우기가 약간 복잡하지만 최고의 프론트엔드 프로그래밍 언어인 Angular는 즉시 사용 가능한 기능, 크로스 플랫폼 아키텍처, 코드 기반 전체의 일관성, 유지 관리성, 모듈식 개발 구조를 제공합니다. 예를 들어, UI 도구 상자 및 Ignite UI for Angular Library와 같은 UI 라이브러리는 Angular 프레임워크를 최대한 활용하고 무엇보다도 탁월한 코어 및 엔터프라이즈 데이터 그리드 기능을 구축하는 데 사용합니다. 그러나 사용하기에 가장 좋은 것은 무엇입니까?

몇 가지 중요한 필수 기능이 있으며 개발자가 일반적으로 정렬, 필터링, 편집, 선택 및 페이징과 같은 기능을 찾는다는 것을 완벽하게 이해합니다. 그러나 가장 눈에 띄는 것이므로 기본적으로 이를 기대합니다. 그렇기 때문에 모든 UI 슈트는 위에서 언급한 데이터 관리 및 시각화 옵션을 포함하는 Angular Data Grid 구성 요소를 제공하기 위해 노력합니다.

지금은 제쳐두겠습니다. 필요성을 확인하기 위해 다시 나열하는 대신, 덜 알려졌지만 필수적이고 최신 그리드에서 매우 유용한 기능에 초점을 맞출 것입니다.

그런 다음 시작하여 상위 5개 Angular 데이터 그리드가 필요한지 몰랐던 기능이 무엇인지 살펴보겠습니다.

배치 편집 – 변경 사항을 더 잘 누적하는 방법

본질적으로 Angular 그리드 배치 편집을 사용하면 사용자가 그리드의 여러 데이터 레코드를 수정하고 동시에 모든 변경 사항을 제출하여 트랜잭션 작업을 수행할 수 있습니다. 일괄 편집을 사용하여 여러 셀 값 변경 사항의 저장을 연기할 수 있습니다. 버퍼에 저장하고 최종 편집을 확인하기 전에 쉽게 버릴 수 있습니다.

수십만 개, 심지어 수백만 개의 레코드를 소비하는 앱을 구축할 때 프로그래머가 겪는 가장 크고 일반적인 문제 중 하나가 편집을 위한 유지 관리 가능하고 확장 가능한 UX를 만드는 것이라는 것은 비밀이 아닙니다. 그리고 배치 편집 Angular 그리드 기능이 이에 대한 해결책으로 제공됩니다. 배치 편집 모드를 활성화하면 기본 데이터에 즉시 영향을 주지 않고 변경 사항을 누적할 수 있습니다. 레코드를 업데이트할 때 서버로 전송되는 HTTP 요청 수를 최소화합니다.

패키지를 사용할 때 컴포넌트를 사용하여 배치 편집을 구현하려면 트랜잭션 서비스 구현(IgxTransactionService)을 제공하거나 자체 구현으로 대체할 수 Ignite UI for Angular. 당사의 Ignite UI for Angular 패키지는 완전한 트랜잭션, 실행 취소 및 다시 실행을 지원하는 본격적인 트랜잭션 서비스 구현과 함께 제공됩니다.

실습 튜토리얼과 그리드 배치 편집 예제 Angular 더 많은 것이 필요한 경우, 트랜잭션 서비스를 구축하는 방법에 대한 훌륭한 읽을거리가 있습니다.

Advanced Filtering – To Build More Complex Filter Criteria 

Angular Data Grid의 고급 필터링은 Angular Material 테이블의 모든 열에서 더 복잡한 필터링 조건을 가진 그룹을 만들 수 있는 필터링 UI를 제공하여 작동합니다. 이 기능을 구성하면 고급 필터링 단추가 그리드 도구 모음에 렌더링됩니다. 사용자는 이 버튼을 클릭하여 고급 필터링 대화 상자를 열어야 합니다.

우리의 경우 대화 상자는 다음을 사용합니다.이IgxQueryBuilder 님구성 요소 필터링 로직을 생성, 표시 및 편집합니다. 이 기능을 활성화하려면 allowAdvancedFiltering을 설정하고 그리드 내에 igx-grid-toolbar 구성 요소를 추가해야 합니다.

<igx-grid [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true"> 
    <igx-grid-toolbar></igx-grid-toolbar> 
</igx-grid> 

이 구성 요소를 얼마나 사용자 지정할 수 있는지 보여주기 위해 그리드 외부에서도 작동하는 외부 고급 필터링 구성의 예를 공유하겠습니다. 고급 필터링 대화 상자 구성 요소를 추가하기만 하면 됩니다.

<igx-advanced-filtering-dialog [grid]="grid1"> 

</igx-advanced-filtering-dialog

Angular 그리드 상태 지속성 및 직렬화된 JSON 문자열

State Persistence를 사용하면 프로그래머가 간단한 방법으로 그리드 상태를 저장하고 복원할 수 있습니다. 사용자가 시각화된 데이터를 수정하거나 정렬이나 필터링 또는 기타 사항을 적용하려는 경우 State Persistence 구성 요소는 이러한 변경 사항을 저장하고 페이지를 다시 로드한 후 복원합니다.

가장 일반적인 Angular 그리드 기능 중 이 기능이 자주 나열되지는 않지만, 특히 그리드에 대해서만 집중적인 작업을 하는 개발자나 다음과 같은 다른 기능 상태를 미리 구성하고 싶지 않은 개발자에게는 매우 중요합니다.

• Make CustomerID column with DESC order 
• ProductName 열에 포함 필터 적용
• "Lastname" 및 "Age"를 왼쪽에 표시하도록 고정합니다.

. 기본적으로 이 방법의 역할은 직렬화된 JSON 문자열로 Data Grid 상태를 반환하는 것이므로 원하는 데이터 저장소(데이터베이스, 클라우드, 브라우저 localStorage 등)에 저장할 수 있습니다.

언제이IgxGridState지시문 그리드에 적용되면 개발자가 모든 시나리오에서 상태 지속성을 달성하는 데 사용할 수 있는 getState 및 setState 메서드를 노출합니다.

가상화 – 데이터 소비성 향상

Angular 그리드 가상화는 데이터의 어떤 부분이 표시되고 어떻게 렌더링되는지 정확하게 추적하는 데 사용됩니다. 데이터를 더 작은 척으로 분할한 다음 사용자가 가로/세로로 스크롤하여 버퍼 데이터를 로드하는 동안 컨테이너 뷰포트에서 스왑됩니다.

렌더링 성능을 최적화하는 것을 목표로 하는 Ignite UI for Angular Grid Virtualization은 DOM 요소를 제거하고 추가하는 대신 데이터를 교환하는 약간 다르게 작동합니다. 그러나 공식 문서 페이지에서 자세한 내용을 읽을 수 있습니다.

Angular Grid Keyboard Navigation and The Use Of Interactive Keyboard Shortcuts 

활성화하면 다양한 키보드 상호 작용(Alt + L, Ctrl + Shift + L, Ctrl + 화살표 위쪽, Ctrl + 화살표 아래쪽 화살표 등)을 제공하여 사용자가 페이지를 탐색하는 방법에 관계없이 더 나은 사용성과 UX를 제공합니다.

Infragistics 에서는 마우스, 터치패드 또는 키보드 중 어느 것을 사용하든 관계없이 최적의 사용자 경험을 보장하고자 합니다. 이것이 바로 페이지 내에서 키보드 탐색을 위한 Active element navigation 이라는 새로운 사용자 인터페이스 패턴을 만든 이유입니다. 이 패턴은 igxGrid용으로 설계된 인터페이스 내의 탭 중단 수를 5개로 줄이고 효율성을 위해 많은 새로운 키보드 단축키를 노출합니다. 각 탭 정지 요소에는 단일 진입점이 있으며, 여기에서 사용자는 화살표 키를 사용하여 해당 그리드 요소 컨테이너의 다른 항목으로 쉽게 이동할 수 있습니다. 따라서 탐색을 단순화하고 사용성을 향상시킵니다.

Ignite UI for Angular Data Grid에서 사용되는 키보드 탐색 기능은 Grid의 접근성을 향상시키고 사용자가 내부의 모든 유형의 요소(셀, 행, 열 머리글, 도구 모음, 바닥글 등)를 탐색할 수 있도록 합니다. 말할 것도 없이 aria와 완전히 호환됩니다.

싸다

Angular 그리드 배치 편집, 고급 필터링, 상태 지속성, 가상화 및 키보드 탐색은 Angular 그리드 기능에 대한 가이드 및 문서에서 자주 언급되지 않습니다. 그들은 무대 뒤에 거의 남아 있지만 정렬, 편집, 크기 조정, 페이징과 같은 일이 천둥을 훔칩니다. 덜 일반적이고 주로 데이터 그리드로 작업하는 사람들이 주로 요청함에도 불구하고 프로젝트에는 여전히 이러한 상위 5가지 기능이 필요합니다.

단점 중 하나는 그리드와 잘 작동하는 Batch Editing, Advanced Filtering, State Persistence, Virtualization 및 Keyboard Navigation을 거의 볼 수 없다는 것입니다. 고맙게도 Ignite UI for Angular Data Grid는 이를 포장할 뿐만 아니라 고성능을 보장하는 최고의 도구 상자입니다.

계속해서 시도해 보십시오. 데모를 살펴보고 작동 방식을 확인해 보세요.