대용량 데이터를 위한
고성능 JavaScript 데이터 그리드

데이터 바인딩

FlexGrid는 클라이언트측 및 서버측 데이터 바인딩을 지원합니다. 간단한 JavaScript 배열, 관찰 가능한 CollectionViews, 원격 OData 서버 또는 실시간 WebSocket 서버에 바인딩할 수 있습니다.

• Arrays and CollectionViews - 데모 | 도움말
• Remote Data Binding - 도움말
• OData Data Binding - 데모 | 도움말
• Unbound Mode - 데모

가상 스크롤링

FlexGrid를 사용하면 데이터를 로드할 때 데이터를 가상화할 수 있습니다. FlexGrid를 스크롤하면 필요에 따라 그리드에 데이터가 로드되므로 성능이 향상되고 무한 스크롤이 가능합니다.

• 가상 스크롤링 - 데모

실시간 업데이트

FlexGrid 컨트롤은 데이터 소스가 변경될 때 모든 셀을 자동으로 업데이트합니다.

• 실시간 업데이트 - 데모

선택

FlexGrid를 사용하면 Excel과 마찬가지로 여러 행과 열에서 셀 범위를 선택할 수 있습니다. FlexGrid를 사용하면 선택 영역을 수정하고 다른 구성 요소를 통해 선택 항목을 설정할 수도 있습니다.

• Selection - 데모 | 도움말
• Multiple Selection - 데모
• Checkbox Selection - 데모
• Marquee - 데모 | 도움말

정렬

Wijmo의 JavaScript 데이터 그리드인 FlexGrid는 CollectionView를 통한 데이터 정렬을 지원하며 주문형 정렬 및 다중 열 정렬과 같은 기능을 허용하도록 사용자 정의할 수 있습니다.

• Sorting - 데모
• On-Demand Sorting - 데모
• Multi-Column Sorting - 데모

페이징

FlexGrid는 CollectionView 컴포넌트를 사용하여 페이지 당 합리적인 양의 데이터를 표시하는 DataGrid를 생성할 수 있습니다. CollectionView를 데이터 소스에 직접 연결하고 서버 측 페이징을 허용할 수도 있습니다.

• 페이징 - 데모

열 고정 & 핀 고정

Excel과 유사한 행 및 열 고정 및 고정 기능을 제공합니다. 이를 통해 사용자가 DataGrid의 콘텐츠를 탐색할 때 행과 열을 계속 볼 수 있습니다.

• 열 고정 - 데모
• 핀 고정 - 데모

열 크기 조정

코드에서 열 크기를 지정할 수 있을 뿐만 아니라 사용자가 DataGrid를 렌더링한 후 열 크기를 조정할 수 있습니다. Excel과 마찬가지로 사용자는 열 머리글의 오른쪽 가장자리를 끌어 크기 조정을 확장하거나 축소하거나 가장자리를 두 번 클릭하여 내용에 맞게 열 크기를 자동으로 조정할 수 있습니다.

• 크기 조정 - 데모

열 재정렬

헤더를 드래그 앤 드롭하여 열을 수정하고 전체 DataGrid 또는 개별 열에서 재정렬을 비활성화할 수 있습니다. allowReordering 속성을 true로 설정하고 DataGrid 내의 한 인덱스에서 다른 인덱스로 열 머리글을 드래그 앤 드롭하여 재정렬을 활성화합니다.

• 재정렬 - 데모

셀 템플릿

FlexGrid 셀에 사용자 정의 콘텐츠를 선언적으로 정의할 수 있으며, 템플릿에는 속성 및 이벤트 바인딩과 함께 임의의 컴포넌트 및 HTML 요소가 포함될 수 있습니다. 모든 유형의 그리드 셀을 템플릿을 사용해 정의할 수 있습니다(데이터 셀, 헤더 셀, 편집기 등).

• 셀 템플릿 - 데모

셀 병합

FlexGrid는 콘텐츠 기반 셀 병합을 지원합니다. 

allowMerging 속성을 통해 콘텐츠를 일치시켜 데이터 셀을 병합할 수 있습니다. 헤더 셀을 병합하고, 사용자 정의 셀 병합 규칙을 만들고, FlexGrid가 셀을 병합하는 방법에 대한 제한을 설정합니다.

• Cell Merging - 데모 | 도움말
• Header Merging - 데모
• Custom Merging - 데모 | 도움말
• Restricted Merging - 데모

조건부 서식

formatItem 이벤트를 사용하여 각 셀에 표시된 콘텐츠나 스타일을 사용자 정의할 수 있습니다.

• 조건부 서식 - 데모

스파크라인

formatItem 이벤트를 사용하여 각 셀에 표시된 콘텐츠나 스타일을 사용자 정의할 수 있으며, 별 등급과 스파크라인을 정의할 수 있습니다.

• 스파크라인 - 데모

DataMaps

FlexGrid는 ID 대신 고객 이름을 표시하는 것과 같은 자동 조회 기능을 그리드에 제공하는 간단한 방법으로 DataMap 기능을 제공합니다. FlexGrid는 셀을 편집할 때 사용할 유효한 항목이 있는 DataMap을 사용하여 열에 드롭다운을 추가합니다. DataMaps는 동적 DataMaps 및 DataMap 편집기도 지원합니다.

• DataMaps - 데모
• Dynamic DataMaps - 데모
• DataMap Editors - 데모

편집

FlexGrid는 Excel과 유사한 셀 내 편집을 기본적으로 지원합니다. 데이터 유효성 검사, 팝업 편집기 및 사용자 지정 편집기와 같이 FlexGrid 내부에 저장된 데이터를 사용자 지정합니다.

• Quick Editing - 데모
• Read Only - 데모
• Validation

      Event-Based | CollectionView-Based

• Inline Editing - 데모
• Pop-Up Editing - 데모
• Custom Editing - 데모
• Input Method Editor - 데모

새로운 행 추가

추가 행에 대한 코드를 작성하지 않고도 새 행 기능을 구현할 수 있습니다. DataGrid에 빈 행을 추가하면 사용자가 더 많은 데이터 행을 추가할 수 있습니다. 그리드의 allowAddNew 속성을 설정할 때 DataGrid의 상단 또는 하단에 빈 행을 자동으로 포함할 수 있습니다.

• 행 추가 및 제거 - 데모 | 도움말

접근성

FlexGrid는 접근성을 지원하는 광범위한 기능 목록과 함께 제공됩니다. ARIA 기술은 사용자가 FlexGrid와 상호작용하고 수정하는 데 도움이 되며 Excel과 단축키를 통해 콘텐츠를 쉽게 탐색할 수 있습니다. 

• WAI-ARIA Support - 데모 | 도움말
• Keyboard Navigation - 도움말
• Click-Event Handling - 도움말

세계화(Globalization)

FlexGrid 콘텐츠의 표시 형식을 지정할 수 있는 세계화 클래스가 있습니다. FlexGrid가 데이터를 표시하는 데 사용하는 언어를 선택할 수 있을 뿐만 아니라 날짜와 숫자를 표시하는 방식도 지정할 수 있습니다.

• Globalization - 데모 | 도움말
• Cultures - 데모
• Dates - 데모
• Numbers - 데모

언어 방향

일부 언어는 콘텐츠를 페이지의 오른쪽에서 왼쪽으로 렌더링합니다. HTML은 dir 속성을 사용하여 이를 수용합니다. 콘텐츠를 오른쪽에서 왼쪽으로 표시하도록 설정된 요소 내에 FlexGrid를 배치합니다. FlexGrid는 동일한 방식으로 콘텐츠를 표시합니다.

• 우측에서 좌측으로 - 데모

필터링

Flexgrid는 표준 텍스트 및 강조 표시에서 Excel과 유사한 필터링에 이르기까지 여러 필터 옵션을 지원합니다. OData 원본에서 데이터를 로드할 때 서버 쪽 필터링을 사용합니다.

• Filtering - 데모 | 도움말
• Excel-Like Filtering - 데모 | 도움말
• Server-Side Filtering - 데모

검색

전체 텍스트 검색을 수행할 수 있습니다. 즉, 데이터를 필터링하여 데이터 그리드에서 찾은 일치하는 모든 인스턴스를 표시할 수 있습니다. 스캔한 텍스트와 일치하는 항목을 모두 강조 표시할 수 있습니다.

• 검색 - 데모

그룹화

Wijmo의 JavaScript 데이터 그리드인 FlexGrid를 사용하면 CollectionView를 통해 데이터를 그룹화할 수 있습니다. 단일 DataGrid에 여러 그룹을 설정하고 Outlook 스타일의 GroupPanel을 구현하여 사용자가 열을 드래그 앤 드롭하여 그룹을 만들 수 있도록 합니다.

• Grouping - 데모 | 도움말
• Drag and Drop Grouping - 데모 | 도움말

집계

데이터를 집계하여 전체 DataGrid 또는 개별 섹션의 행과 열에 대한 요약 정보를 표시합니다. 집계된 데이터가 표시되는 위치를 설정하고, 사용자 지정 집계를 만들고, 기본 제공 함수 및 형식 옵션을 활용할 수 있습니다.

• Aggregation - 데모 | 도움말
• Aggregation Location

      데이터 초과 | 데이터 미만

• Custom Aggregation - 데모 | 도움말

TreeGrid

하위 항목을 데이터 그리드에 바인딩하여 데이터를 표시할 TreeGrid를 생성할 수 있습니다. TreeGrid는 바운드 및 언바운드 모드, 성능 향상을 위한 데이터 지연 로드, 표시할 XML 데이터 가져오기를 모두 지원합니다.

• TreeGrid - 데모 | 도움말
• Unbound TreeGrid - 데모 | 도움말
• Asynchronous Loading - 데모 | 도움말
• Binding to XML - 데모 | 도움말
• Editable TreeGrid - 데모
• Different Data Structures - 데모

마스터-상세

FlexGrid를 사용하면 마스터-디테일 모델과 RowDetail 사용을 통해 계층적 데이터를 볼 수 있습니다. 마스터-디테일 모델을 사용하여 FlexGrid 내부의 항목을 선택하고 해당 세부 정보를 보거나 RowDetail을 사용하여 FlexGrid의 행 내에서 데이터를 중첩할 수 있습니다.

• Master-Detail - 도움말
• Separate Grid - 데모
• Nested Grid(RowDetail) - 데모 | 도움말

Excel 가져오기/내보내기

비즈니스에서 데이터 관리를 위해 Excel을 사용하는 경우 FlexGrid를 사용하여 XLSX 파일을 가져오고 FlexGrid 데이터를 XLSX 파일로 내보내 Excel에서 볼 수 있습니다. FlexGrid는 또한 동기식 및 비동기식 데이터 내보내기를 모두 지원하며 FlexGrid 및 Excel에서 설정한 서식 및 스타일을 유지하는 기능이 있습니다.

• Import/Export - 도움말
• Asynchronous Export - 데모

PDF 내보내기

FlexGrid는 콘텐츠 내보내기 및 PDF 형식 지정을 지원합니다. 이를 통해 브라우저에서 데이터를 볼 수 있을 뿐만 아니라 새로 만든 PDF에 FlexGrid를 추가할 수도 있습니다. FlexGrid를 포함하도록 PDF 및 보고서를 수정합니다.

• Export to File - 데모
• Export to PdfDocument - 데모
• Expense Report - 데모
• Customization - 데모

클립보드

FlexGrid를 사용하면 선택한 행 또는 셀 데이터를 기본 제공 지원을 통해 클립보드에 복사할 수 있습니다. 클립보드는 여러 FlexGrid의 이벤트를 사용하여 클립보드 작업을 사용자 정의할 수 있는 기능을 제공합니다.

• 클립보드 - 데모

인쇄

FlexGrid는 내보내기 옵션으로 프린터 사용을 지원하므로 DataGrid를 인쇄를 지원하는 형식으로 변환할 수 있습니다. FlexGrid의 PrintDocument 클래스를 사용하면 데이터 그리드를 테이블 요소로 변환한 다음 페이지에 렌더링하고 인쇄할 수 있습니다.

• Print - 데모 | 도움말