티스토리 뷰

UI(Front-End)/그리드

AG-GRID 칼럼 정의

까오기 까오기 2019. 1. 30. 11:10

1. Column Definitions 

자주 사용하면서 필수 값에 대해 설명합니다. 

예제)

1
2
3
4
5
6
7
8
9
10
11
12
var columnDefs = [
    {headerName:"Athlete", field: "athlete", width: 150, minWidth:120, pinned:'left', suppressSizeToFit: true, suppressMenu: true, sort: 'asc'},
    {headerName:"Age", field: "age", width: 90, minWidth: 50, maxWidth: 100, pinned:'left', suppressMenu: true, suppressSorting : true},
    {headerName:"Country", field: "country", width: 120},
    {headerName:"Year", field: "year", width: 90},
    {headerName:"Date", field: "date", width: 110},
    {headerName:"Sport", field: "sport", width: 110},
    {headerName:"Gold Medal", field: "gold", width: 100},
    {headerName:"Silver Medal", field: "silver", width: 100},
    {headerName:"Bronze Medal", field: "bronze", width: 100},
    {headerName:"Total", field: "total", width: 100}
];
cs

주요 속성 

Attribute 

value 

description 

 headerName

 Title 

그리드 헤더에 보여주는 title 

 field 

 data field 

json data에 선언이 되어 있는 field와 바인딩된다.  

 width 

 칼럼 길이

칼럼 가로 사이즈, 자동 맞춤으로 하는 경우 무시된다.  

 minWidth

 최소 칼럼 길이 

최소 칼럼 사이즈로 자동 맞춤을 하더라도 유지되는 최소 값이다.  

 pinned 

 left | right 

칼럼 고정시 이용, 칼럼 고정이 되면 왼쪽 또는 오른쪽에 고정이 되고 스크롤에서 제외된다.  

칼럼을 자동 맞춤으로 하는 경우는 의미가 없다. 

 suppressSizeToFit

 true | false 

자동 맞춤 강제여부 

 suppressMenu 

 true | false  

헤더에 메뉴 노출 여부, true인 경우 칼럼 메뉴가 사라진다.  

 suppressSorting 

 true | false  

정렬 기능 강제여부, true인 경우 정렬이 고정이 된다.  

 sort

 asc | desc 

정렬 순서 정의

 hide

 true | false  

hide가 true인 경우 감춰진다. 

 editable

 true | false  

수정 여부, true인 경우 데이터를 수정할 수 있다. 

 cellEditor

 true | false  

편집 컴포넌트 지정. agSelectCellEditor, datePicker, agLargeTextCellEditor

 cellStyle

 스타일지정  

cell 스타일 지정 e.g. {"textAlign":"center", "backgroundColor":"#f4f4f4"}

 cellRenderer

 renderer  

cell renderer, e.g. 값을 M | F로 받고 보여 주는 것은 남성 | 여성 또는 그래프나 아이콘으로 보여 주고 싶을 때 cellRenderer를 이용해서 구현하면 쉽게 표현 할 수 있습니다. 

 cellClass

 클래스명

cell의 클래스명 지정


기타 cellEditorParams, valueFormatter, valueParser 등을 사용합니다. 

참고 

https://www.ag-grid.com/javascript-grid-column-definitions/

'UI(Front-End) > 그리드' 카테고리의 다른 글

AG-GRID cellRenderer 예제  (4) 2019.01.30
AG-GRID 기본 예제  (0) 2019.01.30
AG-GRID GRID OPTIONS 정의  (2) 2019.01.30
AG-GRID 칼럼 정의  (0) 2019.01.30
AG-GRID 설치 및 기본구조  (2) 2019.01.30
AG-GRID 소개  (2) 2019.01.29
댓글
댓글쓰기 폼