그룹 패널과 드래그 앤 드롭
wijmo.grid.grouppanel 모듈은 그리드에 Outlook 스타일의 그룹화 UI를 추가하는 GroupPanel 컨트롤을 제공합니다.
그룹 패널 컨트롤을 사용하려면 열 헤더를 패널로 드래그하여 그룹을 만듭니다. 그룹을 새 위치로 드래그하거나 그룹을 제거할 수도 있습니다.
먼저 FlexGrid를 만듭니다:
import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridGroupPanel from '@mescius/wijmo.grid.grouppanel';
// 그룹 패널 그리드 생성
var theGrid = new wjGrid.FlexGrid('#theGrid', {
itemsSource: data
});그런 다음 그룹 패널을 만들고 FlexGrid 인스턴스에 대한 참조를 전달합니다.
// 그룹 패널 생성 및 그리드에 전달
var theGroupPanel = new wjGridGroupPanel.GroupPanel('#theGroupPanel', {
placeholder: 'Drag columns here to create groups',
grid: theGrid
});GroupPanel 컨트롤은 다음과 같은 키보드 명령을 지원합니다:
키 조합 | 동작 |
|---|---|
←(왼쪽 화살표) | 이전 그룹으로 포커스를 이동합니다. |
→(오른쪽 화살표) | 다음 그룹으로 포커스를 이동합니다. |
Home | 첫 번째 그룹으로 포커스를 이동합니다. |
End | 마지막 그룹으로 포커스를 이동합니다. |
Ctrl + ← | 현재 그룹을 왼쪽으로 이동합니다. |
Ctrl + → | 현재 그룹을 오른쪽으로 이동합니다. |
Delete | 현재 그룹을 삭제합니다. |
Alt + G | 활성 셀이 위치한 열을 그룹화합니다. (그리드에 포커스가 있는 경우에만 작동) |