티스토리 뷰

UI(Front-End)/그리드

AG-GRID 설치 및 기본구조

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

AG-GRID 설치 

라이브러리 추가만 하면 됩니다. 

<script src="https://unpkg.com/ag-grid/dist/ag-grid.min.js"></script>

Tasks 

1. html 작업

  • div 생성 

2. javascript 작업

  • 칼럼정의
  • gridOptions 정의 
  • ag-grid생성 및 데이터 삽입 


1. div 생성

1
2
3
<div class="grid-wrapper">
    <div style="width: 100%; height:580px" id="myGrid" class="ag-grid-div ag-theme-balham ag-basic"></div>
</div>
cs

 

2. 칼럼정의 

1
2
3
4
5
6
7
8
9
10
11
12
13
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

3. gridOptions 정의 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var gridOptions = {
    defaultColDef: {
        sortable: true,
        resizable: true
    },
    debug: true,
    columnDefs: columnDefs,
    rowData: null,
    onGridReady: function() {
        gridOptions.api.addGlobalListener(function(type, event) {
            if (type.indexOf('column'>= 0) {
                console.log('Got column event: 'event);
            }
        });
    }
};
cs

4. ag-grid생성 및 데이터 삽입 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.addEventListener('DOMContentLoaded'function() {
    // div id 설정
    var gridDiv = document.querySelector('#myGrid'); 
    // ag-grid 생성     
    new agGrid.Grid(gridDiv, gridOptions); 
 
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET''https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json');
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
            var httpResult = JSON.parse(httpRequest.responseText);
            // 데이터 삽입
            gridOptions.api.setRowData(httpResult); 
        }
    };
});
cs


작업 내용 정리 

div 생성하고 데이터의 칼럼 정의하고 그리드 옵션 생성하고 그리드생성해서 데이터를 넣어 주면 끝~~~  

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

AG-GRID cellRenderer 예제  (4) 2019.01.30
AG-GRID 기본 예제  (0) 2019.01.30
AG-GRID GRID OPTIONS 정의  (1) 2019.01.30
AG-GRID 칼럼 정의  (0) 2019.01.30
AG-GRID 설치 및 기본구조  (2) 2019.01.30
AG-GRID 소개  (2) 2019.01.29
댓글
  • 프로필사진 리더군 회사에서 Ag-grid 를 채택해서 사용중입니다.

    좋은 내용 감사합니다.
    검색하다 우연히 들어오게 되었습니다.
    정리를 너무 잘해주셔서 이걸 가지고 가르쳐도 되겠어요 ^^

    2020.02.06 15:52
  • 프로필사진 까오기 까오기 많은 사람들이 이용했으면 좋겠어요.

    여기 글은 제가 정리해서 회사 사람들 교육할때 쓰기도 합니다.

    좋은 하루되세요.
    2020.03.03 20:03 신고
댓글쓰기 폼