프로그래밍/jQuery 👍
AG Grid (무료 버전) 33.2.1 버전 with jQuery 3.6.0
재우니
2025. 4. 4. 11:17
🔝 1. AG Grid (무료 버전)
- GitHub 스타: ⭐ 13.5k+
- 최신 업데이트: 유지보수 활발
- 기능:
- 대량 데이터 처리에 최적화
- 정렬, 필터링, 그룹화, 편집 가능
- Vue, React, Angular, jQuery 모두 지원
- 단점:
- 무료 버전에서는 일부 고급 기능 제한
- 기본 스타일이 투박하여 커스텀 필요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>AG Grid + jQuery 예제</title>
<!-- 최신 AG Grid v33 CDN -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community@33.2.1/dist/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@33.2.1/styles/ag-grid.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@33.2.1/styles/ag-theme-alpine.css" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
#myGrid {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="myGrid" class="ag-theme-alpine"></div>
<script>
function generateRandomData(count) {
const makes = ["Toyota", "Ford", "Porsche", "Chevrolet", "Honda", "BMW", "Kia", "Hyundai", "Mazda", "Audi"];
const models = ["Model A", "Model B", "Celica", "Mondeo", "Boxster", "Civic", "Accord", "Sonata", "Soul", "i30"];
const data = [];
for (let i = 0; i < count; i++) {
const make = makes[Math.floor(Math.random() * makes.length)];
const model = models[Math.floor(Math.random() * models.length)];
const price = Math.floor(Math.random() * 70000) + 10000; // 10000 ~ 80000
data.push({ make, model, price });
}
return data;
}
document.addEventListener("DOMContentLoaded", function () {
const columnDefs = [
{ field: "make", sortable: true, filter: true },
{ field: "model", sortable: true, filter: true },
{ field: "price", sortable: true, filter: true }
];
const rowData = generateRandomData(100);
const gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
pagination: true,
paginationPageSize: 5,
paginationPageSizeSelector: [5, 10, 20],
theme: "legacy" // 중요: CSS 파일 포함 시 필수
};
agGrid.createGrid(document.getElementById("myGrid"), gridOptions);
});
</script>
</body>
</html>
https://codepen.io/luckshim/pen/MYWxgpL
ag grid jquery
...
codepen.io