AG-GRID 설치 및 기본구조

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 생성

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

 

2. 칼럼정의 

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

3. gridOptions 정의 

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

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

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

작업 내용 정리 

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