FlexGrid의 체크박스 기반 선택

wijmo.grid.selector 모듈을 통해, FlexGrid 내에서 단일 행 레벨과 그룹화된 데이터 레벨 모두에서 체크박스 기반 선택을 허용할 수 있습니다. 모듈 내에 체크박스 기반 선택을 구현하는 데 사용할 수 있는 두 가지 클래스가 있습니다: Selector 와 BooleanChecker.

Selector: 이 클래스는 체크박스를 셀에 추가하여 FlexGrid 열을 사용자 지정합니다. 체크박스는 사용자가 행의 isSelected 속성을 표시하고 전환할 수 있도록 합니다. 그룹 헤더 행이 있는 경우, 해당 체크박스는 그룹의 모든 아이템에 대해 선택된 상태를 표시하고 토글합니다. 모든 행에 대한 선택을 토글하기 위해 열 헤더에 추가 체크박스가 추가됩니다.

BooleanChecker:

이 클래스는 그룹 행과 열 헤더에 추가 체크박스를 추가하여 부울(Boolean) 필드에 바인딩된 일반 데이터 열을 사용자 지정합니다. 이 체크박스는 그룹 또는 전체 그리드의 모든 아이템에 대한 부울(Boolean) 속성 값을 토글하는 데 사용됩니다.

Selectors 및 BooleanCheckers 만들기:

import { Selector, BooleanChecker } from '@grapecity/wijmo.grid.selector';
import { FlexGrid } from '@grapecity/wijmo.grid';
import { CollectionView, DataType, Aggregate } from '@grapecity/wijmo';

window.onload = function () {
    // create the grid
    let theGrid = new FlexGrid('#theGrid', {
        itemsSource: getData()
    });

    // create the Selector on the first row header column
    let selector = new Selector(theGrid); 

    // add BooleanCheckers to all bound Boolean columns
    theGrid.columns.forEach(col => {
        if (col.dataType == DataType.Boolean) {

            // set aggregate to show checkboxes on group header rows
            col.aggregate = Aggregate.First;

            // create the BooleanChecker on the column
            new BooleanChecker(col);
        }
    });
}

Selector 생성자는 FlexGrid 또는 Column 매개변수를 사용합니다. 그리드를 전달하면, __Selector__가 그리드의 첫 번째 행-헤더 열에 부착됩니다. 특정 열을 전달하면, 해당 열이 대신 사용됩니다. __BooleanChecker__는 부울(Boolean) 필드에 바인딩된 열을 지정하는 매개 변수를 사용합니다.