내용으로 건너뛰기
상위 4개 Angular 그리드 데이터 조작 기능은 무엇입니까?

상위 4개 Angular 그리드 데이터 조작 기능은 무엇입니까?

그리드 구성 요소의 주요 목적 중 하나는 데이터 작업입니다. 그러나 사용해야 하는 상위 Angular 그리드 데이터 조작 기능은 무엇입니까? 여기에서 배우십시오.

6분 읽기

그리드 구성 요소의 주요 목적 중 하나는 데이터 작업입니다. 이것은 더 소화하기 쉬운 방식으로 변형하고 제시하는 것뿐만 아니라 쉽게 업데이트할 수 있는 수단을 제공하는 것을 의미합니다. 그러나 데이터베이스를 유지 관리하려면 많은 작업이 필요합니다. 올바른 도구를 사용하는 경우를 제외하고. 이 경우 새 데이터 레코드 업데이트, 삭제 및 생성과 같은 데이터 관리 작업을 쉽게 수행할 수 있습니다. 그러나 이것만으로는 항상 충분하지 않을 수 있습니다. 어째서? 데이터 유효성 검사 메커니즘을 갖는 것도 필수 기능이기 때문입니다.

Ignite UI Angular 그리드를 살짝 엿보기

Ignite UI for Angular Grid는 이러한 작업이 수행되는 방식을 사용자 지정할 수 있는 강력한 공개 API를 제공합니다. 또한 각 데이터 관리 기능은 쉽게 사용자 지정할 수 있는 열 데이터 유형을 기반으로 하는 몇 가지 기본 편집기를 노출합니다.

이제 본론으로 들어가 상위 4가지 데이터 조작 기능

Angular Grid에서 셀/행 편집

기본적으로 그리드는 셀 내 편집을 사용하며 기본 셀 편집 템플릿 덕분에 열 데이터 유형에 따라 다른 편집기가 표시됩니다. 또한 update-data 작업에 대한 사용자 지정 템플릿을 정의하고 변경 사항을 커밋 및 취소하기 위한 기본 동작을 재정의할 수 있습니다.

기본 편집을 활성화하려면 편집하려는 열에 대해 [editable] 입력을 true로 설정하기만 하면 됩니다.

igxGrid에서 [rowEditable] 입력을 사용하여 편집 모드를 Row로 쉽게 변경할 수 있습니다. 셀 값을 변경한 다음 동일한 행의 다른 셀을 클릭하거나 이동하면 완료 단추를 사용하여 확인하거나 취소 단추를 사용하여 삭제할 때까지 행 값이 업데이트되지 않습니다.

행 편집 이벤트

이러한 기능의 추가 기능:

Angular 트랜잭션을 사용한 그리드 배치 편집

IgxGrid의 일괄 편집 기능은 트랜잭션 서비스를 기반으로 합니다. Angular 프레임워크 덕분에 이러한 트랜잭션 서비스를 쉽게 만들고 유지 관리할 수 있습니다. 트랜잭션 서비스는 컴포넌트가 기본 데이터에 즉시 영향을 주지 않고 변경 사항을 누적하는 데 사용할 수 있는 주입 가능한 미들웨어(Angular의 DI를 통해)입니다.

데이터 소스의 상태를 보존하고 한 번에 많은 트랜잭션을 커밋해야 하는 구성 요소를 사용할 때 트랜잭션 서비스를 활용할 수 있습니다.

Angular 그리드 일괄 편집

트랜잭션 서비스를 사용하면 트랜잭션을 추가할 수 있습니다. 하나 이상의 트랜잭션을 추가한 후에는 모든 변경 사항을 커밋하거나 지울 수 있으며 단일 레코드에 대해서만 변경 사항을 지울 수 있습니다. 자세한 로그를 유지하고 실행 취소 및 다시 실행 작업을 실행할 수 있습니다.

작업(트랜잭션)을 실행할 때마다 트랜잭션 로그 및 실행 취소 스택에 추가됩니다. 그런 다음 트랜잭션 로그의 모든 변경 내용이 레코드별로 누적됩니다. 이 시점부터 서비스는 고유 레코드에 대한 추가/업데이트/삭제 작업으로만 구성된 집계된 상태를 유지 관리합니다.

Angular 그리드 데이터 검증 메커니즘

그리드 편집은 셀/행을 편집할 때 사용자 입력에 대한 기본 제공 유효성 검사 메커니즘을 노출합니다. Angular Form 유효성 검사 기능을 확장하여 잘 알려진 기능과 더 쉽게 통합할 수 있습니다. 편집기의 상태가 변경되면 편집된 셀에 시각적 표시기가 적용됩니다.

Angular Forms 유효성 검사기 지시문 중 일부를 확장하여 IgxColumn과 직접 작동합니다. 동일한 유효성 검사기를 igx-column에서 선언적으로 설정할 속성으로 사용할 수 있습니다. 다음 유효성 검사기가 즉시 지원됩니다.

  • 필수의
  • 최대
  • 이메일
  • 최소 길이
  • 최대 길이
  • 무늬

열 입력이 설정되고 값이 이메일 형식으로 지정되는지 확인하려면 관련 지시문을 사용할 수 있습니다.

<igx-column [field]="email" [header]="User E-mail" required email><

다음 샘플에서는 Grid에서 미리 빌드된 required, email 및 min 유효성 검사기 지시문을 사용하는 방법을 보여 줍니다.

각도 그리드의 Validator 지시문 예제

Angular 그리드 행 추가

Grid는 인라인 행 추가를 통해 데이터 조작을 수행하는 편리한 방법과 Angular CRUD 작업을 위한 강력한 API를 제공합니다. 그리드의 템플릿에서 편집 작업이 활성화된 작업 스트립 구성 요소를 추가하고, 행을 마우스로 가리키고, 제공된 버튼을 사용합니다. 또는 "ALT" + "+"를 눌러 UI를 추가하는 행을 생성합니다.

다음 샘플에서는 Grid에서 네이티브 행 추가를 사용하도록 설정하는 방법을 보여 줍니다. 셀 값을 변경한 다음 동일한 행의 다른 셀을 클릭하거나 다른 셀로 이동하면 완료 단추를 사용하여 확인하거나 취소 단추를 사용하여 삭제할 때까지 행 값이 업데이트되지 않습니다.

각도 그리드에 기능을 추가하는 행

싸다

Ignite UI for Angular (그리고 일반적으로)의 그리드 구성 요소는 다음과 같은 이유로 데이터 관리에서 중요한 역할을 합니다.

  • 대규모 데이터 세트를 효율적으로 시각화할 수 있습니다.
  • 내장된 정렬, 필터링 및 기타 기능을 제공합니다.
  • 데이터를 직접 효과적으로 수정할 수 있도록 다양한 데이터 조작 기능을 제공합니다.
  • 기본 데이터 세트 등에 대한 실시간 업데이트를 보장하는 데 도움이 됩니다.

데이터베이스 관리는 어려울 수 있지만 Ignite UI Angular Components와 같은 기능이 풍부한 적절한 도구를 사용하면 프로세스를 크게 단순화할 수 있습니다. 이렇게 하면 새 데이터 레코드 편집, 삭제 및 생성과 같은 중요한 데이터 관리 작업을 거의 쉽게 실행할 수 있을 뿐만 아니라 Angular 그리드에서 데이터 검증 메커니즘을 구현할 수 있습니다.

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

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

Ignite UI for Angular 이점

데모 요청