column definition for korean

Column 종류 및 정의

Column 의 종류와 정의에 대한 설명 입니다.
날짜 또는 숫자 등에서 설정 하는 format 은 intl 패키지를 참고하십시요.

var columns = [
    PlutoColumn(
      title: 'Text column',
      field: 'text_column',
      type: PlutoColumnType.text(
          // readOnly: false, // 2.7.0 이상 버전에서 삭제 되었습니다.
          defaultValue: '',
          // ... column type properties
      ),
      readOnly: false, // 2.7.0 이상 버전에서 추가 되었습니다.
      // ... column properties
    ),
    // ... more columns
];

Column 의 종류

Column 생성시 type 속성에 전달 하는 값으로 Column 의 종류를 설정 합니다.

defaultValue 는 PlutoGridStateManager 의 getNewRow, prependNewRows, appendNewRows 메소드 등을 사용하여 새로운 행을 추가 할 때 기본 값이 됩니다.

PlutoColumnType.text()

텍스트를 입력 할 수 있는 Column 종류 입니다.
기본 속성 외에 추가 속성이 없습니다.

PlutoColumnType.number()

숫자를 입력 할 수 있는 Column 종류 입니다.

추가 속성	설명
negative	음수를 허용 합니다.
format	숫자를 표시 할 때 형태를 설정 합니다. 기본 값은 '#,###' 으로 123,000,000 형태로 출력 합니다. '#,###.###' 으로 값을 설정 하면 소수점 3자리 까지 허용하는 123,000,000.123 형태의 숫자 Column 이 됩니다.
applyFormatOnInit	행이 처음 설정 되거나 추가 될 때 format 을 적용 합니다.

PlutoColumnType.select()

목록에서 특정 아이템을 선택하는 팝업 형태의 Column 종류 입니다.
사용자가 값을 직접 입력 할 수 없고 팝업에서 선택해야 합니다.
첫번째 매개변수로 배열을 전달 해야 합니다.
문자형태 또는 enum 을 전달 할 수 있습니다.

var columns = [
    PlutoColumn(
      title: 'Select column',
      field: 'select_column',
      type: PlutoColumnType.select([
          'Apple', 'Banana', 'Orange',
      ]),
      // ... column properties
    ),
    // ... more columns
];

PlutoColumnType.date()

날짜를 선택 할 수 있는 팝업 형태의 Column 종류 입니다.

추가 속성	설명
startDate	DateTime 타입으로 선택 할 수 있는 시작 범위를 설정 합니다.
endDate	DateTime 타입으로 선택 할 수 있는 끝 범위를 설정 합니다.
format	'yyyy-MM-dd' 이 기본 값 입니다. 'yyyy년 MM월 dd일' 등의 형태로 설정 할 수 있습니다.
applyFormatOnInit	행이 처음 설정 되거나 추가 될 때 format 을 적용 합니다.

PlutoColumnType.time()

00:00 형태로 시간을 선택 할 수 있는 Column 종류 입니다.
00:00 부터 23:59 까지 선택 할 수 있습니다.

Column 정의

Column 정의시 속성을 설정 할 수 있습니다.

var columns = [
    PlutoColumn(
      title: 'Text column',
      field: 'text_column',
      type: PlutoColumnType.text(),
      // ... column properties
      width: 250,
      minWidth: 80,
      textAlign: PlutoColumnTextAlign.right,
      // ...
    ),
    // ... more columns
];

Column 속성 목록

속성 명	설명
title	Column 에 표시되는 텍스트를 설정 합니다.
field	Column 의 필드 명을 설정 합니다. 각 Column 이 유일한 값을 설정 해야 합니다. 행 설정 시 키로 사용 됩니다.
type	위에서 설명 된 Column 의 종류 입니다.
readOnly - v.2.7.0	셀을 수정 할 수 없습니다. (2.7.0 버전 미만에서는 PlutoColumnType 속성에 위치 합니다.)
width	Column 의 넓이를 설정 합니다.
minWidth	Column 의 넓이를 사용자가 변경 시 가능한 최소 넓이 입니다.
textAlign	Column 의 title 을 정렬 할 수 있습니다. PlutoColumnTextAlign.left, PlutoColumnTextAlign.right
frozen	Column 을 왼쪽 또는 오른쪽에 고정 시킵니다. 사용자가 Column 메뉴에서 상태를 변경 할 수도 있습니다. PlutoColumnFrozen.left, PlutoColumnFrozen.right, PlutoColumnFrozen.none
sort	Column 을 정렬 할 수 있습니다. 사용자가 Column 제목을 탭하면 정렬 상태를 변경 할 수도 있습니다. PlutoColumnSort.ascending, PlutoColumnSort.descending, PlutoColumnSort.none
formatter	셀의 값이 표시 될 때 원하는 값으로 변경하여 출력 할 수 있습니다.
applyFormatterInEditing	formatter 가 설정 되었을 때 편집 모드에서도 변경 된 값을 출력 합니다. 단, readOnly 가 true 이거나 date, select 등의 Column 종류와 같이 값을 직접 수정 할 수 없는 경우에만 유효 합니다.
renderer	셀을 출력 할 때 원하는 아이콘이나 버튼, 이미지 등을 삽입 할 수 있습니다.
enableColumnDrag	Column 제목을 좌우로 드래그 하여 Column 의 위치를 변경 할 수 있습니다.
enableRowDrag	행을 드래그 할 수 있는 아이콘이 셀의 앞부분에 나타납니다. 그것을 위 또는 아래로 드래그 하여 행 위치를 변경 할 수 있습니다. 단, 필터가 설정 되거나 정렬이 된 상태에서는 아이콘이 사라지며 드래그 할 수 없습니다. Selecting.row 모드에서 복수의 행을 선택하여 한번에 모두 드래그 할 수도 있습니다.
enableRowChecked	셀의 앞부분에 체크박스가 나타납니다. Column 에는 전체를 체크 할 수 있는 체크박스가 나타납니다. PlutoGridStateManager 의 checkedRows, unCheckedRows 속성으로 선택 되거나 선택 되지 않은 행들을 접근 할 수 있습니다.
enableSorting	Column 제목을 탭하여 정렬 할 수 있도록 허용 합니다.
enableContextMenu	Column 우측의 메뉴를 활성화 합니다. 메뉴 아이콘을 탭하면 메뉴가 나타납니다.
enableFilterMenuItem	Column 메뉴가 활성화 된 상태에서 필터링 관련 메뉴를 활성화 합니다.
enableHideColumnMenuItem - v.1.1.0	Column 메뉴가 활성화 된 상태에서 컬럼 숨기기 메뉴를 활성화 합니다.
enableSetColumnsMenuItem - v.1.1.0	Column 메뉴가 활성화 된 상태에서 컬럼 설정 메뉴를 활성화 합니다.
enableEditingMode	셀을 탭하거나 엔터키를 입력 할 때 편집 상태로 변경 할 수 있습니다.
hide - v.1.1.0	컬럼을 숨기거나 노출 시킵니다.

formatter example

formatter 에 콜백 함수를 정의하여 출력 되는 값을 변경 시킬 수 있습니다.
applyFormatterInEditing 을 true 로 설정하면 편집 상태로 진입 한 경우에도 적용 됩니다.

var column = PlutoColumn(
  title: 'Group',
  field: 'group',
  type: PlutoColumnType.select(['A', 'B', 'C', 'N']),
  applyFormatterInEditing: true,
  formatter: (dynamic value) {
    switch (value) {
      case 'A':
        return '(A) Admin';
      case 'B':
        return '(B) Manager';
      case 'C':
        return '(C) User';
    }

    return '(N) None';
  },
);

renderer example

위젯을 리턴하는 콜백 함수를 정의 하면 셀에 아이콘이나 버튼, 이미지를 추가 할 수 있습니다.

var column = PlutoColumn(
  title: 'column2',
  field: 'column2',
  type: PlutoColumnType.select(['red', 'blue', 'green']),
  renderer: (rendererContext) {
    Color textColor = Colors.black;

    if (rendererContext.cell.value == 'red') {
      textColor = Colors.red;
    } else if (rendererContext.cell.value == 'blue') {
      textColor = Colors.blue;
    } else if (rendererContext.cell.value == 'green') {
      textColor = Colors.green;
    }

    return Text(
      rendererContext.cell.value,
      style: TextStyle(
        color: textColor,
        fontWeight: FontWeight.bold,
      ),
    );
  },
);