FlexGrid에서 열 구성

기본적으로 FlexGrid는 itemsSource를 기반으로, 자동으로 열을 생성합니다.

언제든 FlexGrid 생성자의 옵션 매개변수를 사용하거나, 그리드 열 집합에 항목을 추가하여 열을 정의할 수 있습니다.

열을 지정하면 표시할 열과 순서를 선택할 수 있습니다. 또한 각 열의 너비, 머리글, formatting, 정렬 및 기타 특성을 제어할 수 있습니다.

이 경우 "Country" 열의 너비을 설정하는데 star sizing을 사용합니다. 이는 빈 공간 없이 그리드의 사용 가능한 너비를 채우기 위해 열을 늘리도록 지시합니다. "Revenue" 열에서, 형식 속성을 "n0"으로 설정하면, 천 단위 구분 기호가 있고 소수 자릿수가 없는 숫자가 생성됩니다.

생성자에서 열 정의

여기서는 FlexGrid를 초기화할 때 옵션 객체의 열을 정의합니다.

import * as wjGrid from '@grapecity/wijmo.grid';

// initialize a grid using an 'options' object
new wjGrid.FlexGrid('#cdInitMethod', {
    autoGenerateColumns: false,
    columns: [
        { header: 'Country', binding: 'country', width: '*' },
        { header: 'Date', binding: 'date' },
        { header: 'Revenue', binding: 'amount', format: 'n0' },
        { header: 'Active', binding: 'active' },
    ],
    itemsSource: data.getData(100)
});

열 컬렉션(Column Collection)에 Column 추가하기

여기서는 동일한 열을 다른 방식으로 정의합니다. 열을 하나씩 초기화하고, 속성을 설정한 다음, 열 컬렉션에 추가합니다.

// initialize a second grid by setting properties
var fgColsCollection = new wjGrid.FlexGrid('#cdColsCollection');
fgColsCollection.autoGenerateColumns = false;
fgColsCollection.itemsSource = data.getData(100);

// add columns one by one
var c = new wjGrid.Column();
c.binding = 'country';
c.header = 'Country';
c.width = '*';
fgColsCollection.columns.push(c);

c = new wjGrid.Column();
c.binding = 'date';
c.header = 'Date';
fgColsCollection.columns.push(c);

c = new wjGrid.Column();
c.binding = 'amount';
c.header = 'Revenue';
c.format = 'n0';
fgColsCollection.columns.push(c);

c = new wjGrid.Column();
c.binding = 'active';
c.header = 'Active';
fgColsCollection.columns.push(c);