agGrid grid data read, 그리드 데이터 읽기

▶︎ agGrid의 전체 데이터를 읽어서 서버에 내용을 저장할 필요가 있다. 이 때 그리드의 데이터를 읽은 방법이다.

let saveList = [];

gridOptions.api.forEachNode((obj,idx)=>{
            console.log(obj);
            saveList.push( obj.data);
});

► 전체소스

<!DOCTYPE html>

<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>agGrid - 그리드 데이터 읽기, read grid data, save data</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>

<script type="text/javascript">
    let idx = 0;
    const columnDefs = [
        { field:"make", width:100},
        { field:"model", width:100 },
        { field:"price", width:100}
    ];

    // specify the data
    const rowData = [
        { make: "Toyota", model: "Celica", price: 350 },
        { make: "현대", model: "싼타페", price: 12000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "쌍용", model: "뭐더라", price: 7000 },
        { make: "Porsche", model: "Boxter", price: 72000 }
    ];

    // let the grid know which columns and what data to use
    const gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData
    };

    // setup the grid after the page has finished loading
    document.addEventListener('DOMContentLoaded', () => {
        const gridDiv = document.querySelector('#myGrid');
        new agGrid.Grid(gridDiv, gridOptions);
    });

    function saveData() {
        $("#saveData").text("save...");

        let saveList = [];
        gridOptions.api.forEachNode((obj,idx)=>{
            console.log(obj);
            saveList.push( obj.data);
        });

        console.log( saveList );
    }
</script>
</head>
<body>


<div id="myGrid" style="height: 250px; width:500px;" class="ag-theme-balham"></div>
<button onclick="saveData()">Save</button>

<div id="saveData">console.log, debug 모드에서 확인</div>

</body>
</html>