[]
        
(Showing Draft Content)

그룹 패널과 드래그 앤 드롭

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

활성 셀이 위치한 열을 그룹화합니다. (그리드에 포커스가 있는 경우에만 작동)