열

기본적으로 FlexGrid는 itemsSource를 기반으로 자동으로 열을 생성합니다.
FlexGrid의 생성자에서 options 매개 변수를 사용하거나 언제든지 그리드의 열 컬렉션에 항목을 추가하여 열을 정의 할 수 있습니다.

열을 상세하면, 표시할 열과 순서를 정의할 수 있습니다. 또한 각 열의 너비, 제목, 서식, 정렬 및 기타 속성을 제어 할 수 있습니다.

아래의 코드는 "국가(Country)"열의 너비를 설정하기 위해 별표크기조정(star sizing)을 사용합니다. 이것은 빈 공간이 없도록 그리드의 사용 가능한 너비를 채우기 위해 열이 늘어나도록 지시합니다.

"Revenue"열에서 format 속성을 "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)
});

컬럼 콜렉션에 컬럼 추가

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

// 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);