내용으로 건너뛰기
5가지 필수 Angular 그리드 행 기능 및 사용 방법

5가지 필수 Angular 그리드 행 기능 및 사용 방법

다음 프로젝트를 작업할 때 반드시 고려해야 할 Angular Grid Row 기능은 무엇입니까? 이 기사에서는 상위 5개에 대해 설명합니다. 더 알아보기.

3분 읽기

빅 데이터로 작업하는 것은 그리 쉽지 않습니다. 모든 구성 요소는 최종 사용자가 사용할 데이터를 실제로 이해할 수 있는 수단과 도구를 제공해야 합니다. 이때 Ignite UI for Angular Grid 및 풍부한 행 기능과 같은 구성 요소가 유용하다는 것이 입증되었습니다.

선택을 통한 데이터 분석

요약 –Angular의 그리드 행 기능은 무엇입니까?

그리드 행 기능은 특정 Angular UI 라이브러리(예: Ignite UI for Angular 라이브러리)가 제공하는 기능을 말하므로 개발자는 그리드 구성 요소 내에서 행을 효율적이고 쉽게 관리하고 조작할 수 있습니다.

다음은 Angular 주요 5 가지 Grid Row 기능입니다.

행 선택

Ignite UI for Angular에서 행을 선택하면 행 선택기 열이 행 내의 다른 모든 열보다 우선합니다. 사용자가 행 선택기를 클릭하면 행이 선택되거나 선택 취소되어 사용자가 여러 행의 데이터를 선택할 수 있습니다.

아래 샘플에서는 Grid의 행 선택 동작의 세 가지 유형을 보여 줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 스낵바 메시지 상자를 통한 각 버튼 상호 작용에 대한 간략한 설명이 제공됩니다. 전환 버튼을 사용하여 행 선택기 확인란을 숨기 거나 표시합니다.

행 선택 예제

다중 행 레이아웃

다중 행 레이아웃은 igxGridComponent의 렌더링 기능을 확장합니다. 이 기능을 사용하면 단일 데이터 레코드를 표시되는 여러 행으로 분할할 수 있습니다.

다중 행 레이아웃

행 UI 작업

Ignite UI for Angular의 그리드 구성 요소는 ActionStrip을 사용하고 행/셀 구성 요소와 행 고정을 위해 CRUD를 활용할 수 있는 기능을 제공합니다. Action Strip 구성 요소는 이러한 작업에 대해 미리 정의된 UI 컨트롤을 호스팅할 수 있습니다.

행 작업 예제

행 고정

하나 또는 여러 행을 Angular UI 그리드의 맨 위 또는 맨 아래에 고정할 수 있습니다. 행 고정Ignite UI for Angular의 을 사용하면 최종 사용자가 특정 순서로 행을 고정할 수 있으며, Grid를 세로로 스크롤할 때에도 눈에 보이는 특수 영역에 행을 복제할 수 있습니다. 머티리얼 UI 그리드에는 내장 행 고정 UI가 있으며, 이는 그리드 컨텍스트에서 igxActionStrip 컴포넌트를 초기화하여 활성화됩니다. 또한 Row Pinning API를 통해 사용자 지정 UI를 정의하고 행의 고정 상태를 변경할 수 있습니다.
행 고정

행 끌기

행 드래그는 사용자에게 행 드래그를 시작하는 데 사용할 수 있는 행 드래그 핸들을 제공합니다.

행 드래그 예제

싸다

시장에서 사용할 수 있는 Angular UI 라이브러리에는 다양한 그리드 행 기능이 있습니다. 그러나 나에게 꼭 필요한 기능은 정확히 행 선택, 다중 행 레이아웃, 역할 UI 작업, 행 고정 및 행 드래그입니다. 이를 통해 사용자는 표 형식의 데이터를 보다 쉽게 관리하고 조작할 수 있습니다.

자세한 내용이 필요한 경우 다음을 확인하는 것이 좋습니다.

모든 것을 경험하려면 고객 포털을 방문하여 최신 버전을 다운로드하세요. 평소와 같이 우리는 항상 귀하의 피드백을 받고 추가하거나 추천하고 싶은 내용을 듣게 되어 기쁩니다. 따라서 zkolev@infragistics.com 로 이메일을 보내 Infragistics를 통해 고객에게 지속적으로 가치를 제공하는 데 어떻게 도움이 될 수 있는지 알려주십시오.

Ignite UI for Angular 이점

데모 요청