티스토리 뷰

UI(Front-End)/그리드

AG-GRID GRID OPTIONS 정의

까오기 까오기 2019. 1. 30. 13:01

1. AG-GRID GRID OPTIONS 정의 

Attribute 

value 

description 

 columnDefs

 칼럼정보

정의된 칼럼 정보를 넣어줘야 합니다. 

 rowData

 [{key:value}]

그리드 데이터, json data를 넣어 줘야 합니다. 

 defaultColDef

 기본정의

공통 기본 정의

 * rowSelection

 'single' or 'multiple' 

row data를 선택하는 경우의 옵션으로 하나만 선택하거나 복수개를 선택할 수 있습니다. 


 enableColResize

 true | false 

칼럼 리사이즈 허용 여부

 enableSorting

 true | false 

정렬 옵션 허용 여부

 enableFilter

 true | false  

필터 옵션 허용 여부

 enableRangeSelection

 true | false  

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

 suppressRowClickSelection

 true | false  

선택 허용 여부

 animateRows

 true | false  

 suppressHorizontalScroll

 true | false  

가로 스크롤 허용 여부, 자동 조정으로 되어 있으면 불필요. 

 suppressMovableColumns

 true | false  

헤더 고정시키기 

 localeText

 {"key":"value"}

데이터가 없는 경우 보여 주는 사용자 메시지

{noRowsToShow: '조회 결과가 없습니다.'}

 getRowStyle

 스타일지정  

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

 * onGridReady

 event

(중요) javascript의 onload 이벤트와 유사한 것으로 ready 이 후 필요한 이벤트를 삽입한다.

보통 그리드 자동 사이즈 등을 지정한다.  

onGridReady: function (event) {

    event.api.sizeColumnsToFit();

},

 * onGridSizeChanged

 event

(중요)창 크기가 변경되었을 때 이벤트 

onGridSizeChanged: function(event) {

event.api.sizeColumnsToFit();

},

 * onCellEditingStarted

 event

(중요)cell 편집을 시작할 때(편집 허용인 칼럼을 더블 클릭할 때) 발생하는 이벤트. 

 onCellEditingStopped

 event

(중요)cell 편집을 종료할 때(다른 칼럼으로 이동) 발생하는 이벤트.

데이터 수정 시 값을 재 계산 하거나 해당 정보를 별도 관리 할때 이용하는 이벤트로 매우 중요하고 자주 사용이 된다. 

 * onCellClicked

 event

(중요)Cell Click 하는 경우 발생하는 이벤트, 모달 팝업을 띄우거나 다른 페이지로 이동하거나 클릭시 무언가를 처리해야 하는 경우 사용된다.

 * onRowClicked

 event

(중요)Row Click 하는 경우 발생하는 이벤트, 모달 팝업을 띄우거나 다른 페이지로 이동하거나 클릭시 무언가를 처리해야 하는 경우 사용된다. 

 * isRowSelectable

 event

(중요)특정 Row는 조건에 따라 선택/클릭이 안되게 하고 싶은 경우 사용. 

 onSelectionChanged

 event

(중요) onRowClicked 이벤트와 유사하다. Row가 선택이 바뀌는 경우 발생하는 이벤트.

 onSortChanged

 event

(중요) 정렬이 변경되었을 때 발생하는 이벤트. 외부에서 값을 새로 가져오거나 정렬 조건에 따른 로직을 삽입할 수 있다. 

 onCellValueChanged

 event

(중요) Cell의 값이 변경 되었을 때 발생하는 이벤트.  데이터 편집에서 수정이 발생하면 그에 따른 처리를 할 때 이용할 수 있다. 

 getRowNodeId

 event

(중요) RowNodeId를 가져오는 함수로 값을 지정해 두면 그리드에서 데이터를 여기서 정의한 값으로 접근할 수 있다.


row nodeId 설정 예제 

getRowNodeId : function(data) { 

    return data.goodCd; 

}

데이터 접근 예제
var rowNode = gridOptions.api.getRowNode(selectedRow.goodCd);

 components

 event

컴포넌트 정의 

 debug

 true | false 

디버그

 * setPinnedTopRowData  data

그리드 Top에 데이터 고정 시키기 

 * setPinnedBottomRowData  data

그리드 Bottom에 데이터 고정 시키기 

* 전체를 정리한게 아닙니다. 자주 사용하는 목록입니다. 

2. 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
var gridOptions = {
    columnDefs: columnDefs,
    rowData: students,
    defaultColDef: {
        editable: true,
        width: 100
    },
    rowSelection: 'single'/* 'single' or 'multiple',*/
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
    enableRangeSelection: true,
    suppressRowClickSelection: false,
    animateRows: true,
    suppressHorizontalScroll: true,
    localeText: {noRowsToShow: '조회 결과가 없습니다.'},
    getRowStyle: function (param) {
        if (param.node.rowPinned) {
            return {'font-weight''bold', background: '#dddddd'};
        }
        return {'text-align''center'};
    },
    getRowHeight: function(param) {
        if (param.node.rowPinned) {
            return 30;
        }
        return 24;
    },
    // GRID READY 이벤트, 사이즈 자동조정 
    onGridReady: function (event) {
        event.api.sizeColumnsToFit();
    },
    // 창 크기 변경 되었을 때 이벤트 
    onGridSizeChanged: function(event) {
        event.api.sizeColumnsToFit();
    },
    onRowEditingStarted: function (event) {
        console.log('never called - not doing row editing');
    },
    onRowEditingStopped: function (event) {
        console.log('never called - not doing row editing');
    },
    onCellEditingStarted: function (event) {
        console.log('cellEditingStarted');
    },
    onCellEditingStopped: function (event) {
        console.log('cellEditingStopped');
    },    
    onRowClicked : function (event){
        console.log('onRowClicked');
    },
    onCellClicked : function (event){
        console.log('onCellClicked');
    },
    isRowSelectable : function(event){
        console.log('isRowSelectable');
        return true;
    },
    onSelectionChanged : function (event) {
        console.log('onSelectionChanged');
    },
    onSortChanged: function (event) {
        console.log('onSortChanged');
    },
    onCellValueChanged: function (event) {
        console.log('onCellValueChanged');
    },
    getRowNodeId : function(data) {
        return null
    },
    // 리드 상단 고정 
    setPinnedTopRowData: function(data) {
        return null
    },
    // 그리드 하단 고정 
    setPinnedBottomRowData: function(data) {
        return null
    },
    components:{
        numericCellEditor: NumericCellEditor,
        moodEditor: MoodEditor
    },
    debug: false
};
 
cs

참고 

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
댓글
댓글쓰기 폼