Skip to content

configuration for korean

kmk edited this page Dec 30, 2020 · 4 revisions

설정 (Configuration)

PlutoGrid 를 생성 할 때 configuration 속성에 PlutoGridConfiguration 을 전달하여 설정을 변경 할 수 있습니다.


var grid = PlutoGrid(
  columns: myData.columns,
  rows: myData.rows,
  configuration: PlutoGridConfiguration(
    enableColumnBorder: true,
    // ...
  ),
);

추가 할 수 있는 속성 목록

속성 명 설명
enableColumnBorder Column 과 Column 사이에 세로줄을 활성화 합니다.
gridBackgroundColor 그리드 배경에 색을 설정 합니다.
gridBorderColor 그리드 경계선에 색을 설정 합니다.
activatedColor 현재 활성화 된 셀, 행 또는 체크박스 등의 배경에 색을 설정 합니다.
activatedBorderColor 현재 활성화 된 셀, 행 또는 체크박스 등의 경계선에 색을 설정 합니다.
checkedColor 선택 된 행의 배경에 색을 설정 합니다.
borderColor 활성화 되지 않은 행 또는 셀의 경계선에 색을 설정 합니다.
cellColorInEditState 편집 상태 셀의 배경에 색을 설정 합니다.
cellColorInReadOnlyState 읽기 전용 상태인 셀의 배경에 색을 설정 합니다.
columnTextStyle Column 의 텍스트 스타일을 설정 합니다.
cellTextStyle 셀의 텍스트 스타일을 설정 합니다.
iconColor 그리드에서 사용 되는 아이콘의 색을 설정 합니다. (Column 메뉴, 팝업 타입의 셀 우측의 아이콘 등)
iconSize 그리드에서 사용 되는 아이콘의 크기를 설정 합니다.
menuBackgroundColor Column 메뉴의 팝업 등의 배경에 색을 설정 합니다.
rowHeight 행의 높이를 설정 합니다.
enableMoveDownAfterSelecting 선택 팝업(날짜, 시간, 선택 Column)에서 값을 선택 후 아래 행으로 자동 이동 합니다.
enterKeyAction 엔터키의 동작을 설정 합니다.
localeText 그리드 내의 텍스트를 설정 합니다.
scrollbarConfig 스크롤 바의 설정을 설정 합니다.
columnFilterConfig Column 에 필터를 설정 합니다.

상세 설명

columnFilterConfig

columnFilterConfig 의 filters 속성에 배열로 필터를 전달 할 수 있습니다. columnFilterConfig 의 resolveDefaultColumnFilter 속성에 콜백 함수를 정의하면 각 컬럼마다 기본 필터를 다르게 지정 할 수 있습니다.

class ClassYouImplemented implements PlutoFilterType {
  String get title => 'Custom contains';

  get compare => ({
    String base,
    String search,
    PlutoColumn column,
  }) {
    var keys = search.split(',').map((e) => e.toUpperCase()).toList();

    return keys.contains(base.toUpperCase());
  };

  const ClassYouImplemented();
}

var filterConfig = PlutoColumnFilterConfig(
  filters: const [
    ...FilterHelper.defaultFilters,
    // custom filter
    ClassYouImplemented(),
  ],
  resolveDefaultColumnFilter: (column, resolver) {
    if (column.field == 'text') {
      return resolver<PlutoFilterTypeContains>();
    } else if (column.field == 'number') {
      return resolver<PlutoFilterTypeGreaterThan>();
    } else if (column.field == 'date') {
      return resolver<PlutoFilterTypeLessThan>();
    } else if (column.field == 'select') {
      return resolver<ClassYouImplemented>();
    }

    return resolver<PlutoFilterTypeContains>();
  },
);