본문 바로가기

Development/Javascript | Vue.js

[Library] AG-Grid

반응형

본문링크 : https://eblo.tistory.com/32

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
};


Colored by Color Scripter
cs

 

반응형