티스토리 뷰

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 예제  (5) 2019.01.30
AG-GRID 기본 예제  (0) 2019.01.30
AG-GRID GRID OPTIONS 정의  (3) 2019.01.30
AG-GRID 칼럼 정의  (1) 2019.01.30
AG-GRID 소개  (2) 2019.01.29
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
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
글 보관함