🙏废话不多说系列，直接开整🙏
一、简介
基本认知
ag-Grid 是一个功能强大、灵活且高性能的用于构建数据表格（Data Grid）的 JavaScript 库。它提供了丰富的功能和选项，使开发人员能够轻松地创建复杂的数据表格，并支持大量数据的展示和操作。
主要特点
-
灵活性：ag-Grid 提供了丰富的功能和配置选项，开发人员可以根据需求定制数据表格的外观和行为，包括列定义、排序、筛选、分组、汇总等。
-
高性能：ag-Grid 采用虚拟滚动技术，能够有效处理大量数据的展示和操作，保持高性能的同时提供流畅的用户体验。
-
跨平台支持：ag-Grid 可以在多种前端框架（如 Angular、React、Vue 等）和多种环境（如浏览器、移动端应用）中使用，具有很好的跨平台兼容性。
-
丰富的 API 和事件：ag-Grid 提供了丰富的 API 和事件，开发人员可以通过编程方式控制数据表格的行为，并响应用户操作。
-
社区支持：ag-Grid 拥有活跃的社区，提供了广泛的文档、示例和支持，帮助开发人员快速上手并解决问题。
二、详细使用
【1】简单基本功能演示
提供功能如下：① 数据列表展示；② 数据编辑；③ 默认全字段可排序；④ 设置默认列属性；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ag-Grid Simple Example</title>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css">
<!-- Includes all JS & CSS for the JavaScript Data Grid -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
<!-- <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script> -->
<!-- <script src="https://unpkg.com/ag-grid-enterprise"></script> -->
</head>
<body>
<div id="myGrid" class="ag-theme-alpine" style="height: 200px; width: 600px;"></div>
<script >
document.addEventListener('DOMContentLoaded', function() {
var gridOptions = {
columnDefs: [
{ headerName: "Make", field: "make", editable: true },
{ headerName: "Model", field: "model", editable: true },
{ headerName: "Price", field: "price", editable: true }
],
rowData: [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxster", price: 72000 }
],
defaultColDef: {
flex: 1,
minWidth: 100,
editable: true
}
};
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
</script>
</body>
</html>
基础案例演示结果：
【2】核心：表格基本功能实例展示
此案例演示主要功能如下：【基本内容参照：JavaScript Grid: Quick Start | AG Grid (ag-grid.com) 示例实现】
- 表格是否可以编辑；✅
- 默认指定排序；✅ 默认按照Make字段降序排列
- 单元格列样式 & 行样式；✅
- 文本格式化；✅(见价格列)
- 初始咧宽度；✅(见价格列)
- 组合两列数据；✅(Make&Model)
- 每列增加操作按钮；✅Button列
- 全局列属性定义；✅defaultColDef 配置
- 分页属性设置；✅
- 多选框；✅
完整代码演示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ag-Grid Simple Example</title>
<!-- Includes all JS & CSS for the JavaScript Data Grid -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
<!--
学习内容：
1.表格是否可以编辑；✅
2.默认指定排序；✅ 默认按照Make字段降序排列
3.单元格列样式 & 行样式；✅
4.文本格式化；✅(见价格列)
5.初始咧宽度；✅(见价格列)
6.组合两列数据；✅(Make&Model)
7.每列增加操作按钮；✅Button列
8.全局列属性定义；✅defaultColDef 配置
9.分页属性设置；✅
10.多选框；✅
-->
<style type="text/css">
.rag-green {
background-color: #33cc3344;
}
.rag-red {
background-color: #cc222244;
}
</style>
</head>
<body>
<div id="myGrid" class="ag-theme-alpine" style="height: 225px; width: 1000px;"></div>
<script >
let gridApi;
class CustomButtonComponent {
eGui;
eButton;
eventListener;
init() {
this.eGui = document.createElement("div");
let eButton = document.createElement("button");
eButton.className = "btn-simple";
eButton.textContent = "点击弹窗!";
this.eventListener = () => alert("clicked");
eButton.addEventListener("click", this.eventListener);
this.eGui.appendChild(eButton);
}
getGui() {
return this.eGui;
}
refresh() {
return true;
}
destroy() {
if (this.eButton) {
this.eButton.removeEventListener("click", this.eventListener);
}
}
}
// 自定义排序函数
function dateComparator(date1, date2) {
const date1Number = monthToComparableNumber(date1);
const date2Number = monthToComparableNumber(date2);
if (date1Number === null && date2Number === null) {
return 0;
}
if (date1Number === null) {
return -1;
}
if (date2Number === null) {
return 1;
}
return date1Number - date2Number;
}
// eg 29/08/2004 gets converted to 20040829
function monthToComparableNumber(date) {
if (date === undefined || date === null || date.length !== 10) {
return null;
}
const yearNumber = Number.parseInt(date.substring(6, 10));
const monthNumber = Number.parseInt(date.substring(3, 5));
const dayNumber = Number.parseInt(date.substring(0, 2));
return yearNumber * 10000 + monthNumber * 100 + dayNumber;
}
// 【核心功能】
document.addEventListener('DOMContentLoaded', function() {
var gridOptions = {
// 分页start
pagination: true,
paginationPageSize: 3,
paginationPageSizeSelector: [3, 6, 10],
// 分页end
// 行样式 start
rowClassRules: {
// apply red to Ford cars
'rag-red': params => params.data.make === 'Ford',
},
// 行样式 end
// 多选 start
rowSelection: 'multiple',
// 多选 end(记住每列需要配置 多选属性)
columnDefs: [
{ headerName: "Make", field: "make", editable: true , sort:"desc", checkboxSelection: true, flex:2},
{ headerName: "Model", field: "model", editable: true, cellClassRules: {
// apply green to electric cars
'rag-green': params => params.value === "Celica",
}
},
{ headerName: "默认值列", valueGetter: p=> "默认值", flex: 2 /*相对宽度*/},
{ headerName: "Make & Model", valueGetter: p=> p.data.make + " " + p.data.model, flex: 2 /*相对宽度*/},
{ headerName: "Price", field: "price", editable: true, valueFormatter: p => '$ ' + p.value.toLocaleString() ,flex:2 },
{ headerName: "Electric", field: "electric", editable: false },
{ field: "year", width: 120, unSortIcon: true },
{ field: "date", comparator: dateComparator },
{ headerName: "操作按钮",field: "button", cellRenderer: CustomButtonComponent, flex: 1 },
],
rowData: [
{ make: "Toyota", model: "Celica", price: 358000 , electric: true, year: 2021, date: "1/10/2021"},
{ make: "Ford", model: "Mondeo", price: 32000 , electric: false, year: 2021, date: "10/10/2021"},
{ make: "Porsche", model: "Boxster", price: 72000 , electric: true, year: 2021, date: "1/11/2021"},
{ make: "Porsche", model: "Boxster", price: 72000 , electric: true, year: 2019, date: "1/10/2019"},
{ make: "Toyota", model: "Celica", price: 358000 , electric: true, year: 2021, date: "1/10/2021"},
{ make: "Ford", model: "Mondeo", price: 32000 , electric: false, year: 2023, date: "1/10/2023"},
{ make: "Toyota", model: "Celica", price: 358000 , electric: true, year: 2021, date: "15/10/2021"},
{ make: "Ford", model: "Mondeo", price: 32000 , electric: false, year: 2001, date: "1/10/2001"},
],
defaultColDef: {
flex: 1,
minWidth: 100,
editable: true
}
};
var gridDiv = document.querySelector('#myGrid');
// gridApi = new agGrid.Grid(gridDiv, gridOptions);
gridApi = agGrid.createGrid(gridDiv, gridOptions);
});
</script>
</body>
</html>
实现效果代码展示：
动态演示图如下：
【3】数据导出
官方示例：JavaScript Example - Csv Export - Csv Export (ag-grid.com)
完整代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ag-Grid Simple Example</title>
<!-- Includes all JS & CSS for the JavaScript Data Grid -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
<style>
button {
display: inline-block;
font-weight: bold;
}
</style>
</head>
<body>
<div id="myGrid" class="ag-theme-alpine" style="height: 200px; width: 600px;"></div>
<div style="display: flex; flex-direction: column; height: 100%">
<div style="margin: 10px 0">
<button onclick="onBtnUpdate()">Show CSV export content text</button>
<button onclick="onBtnExport()">Download CSV export file</button>
</div>
<div style="flex: 1 1 0; position: relative; display: flex; flex-direction: row; gap: 20px">
<div id="gridContainer" style="flex: 1">
<div id="myGrid" style="height: 100%; display: block; flex: 1" class="ag-theme-quartz"></div>
</div>
</div>
<div>
<textarea rows="8" cols="85"
id="csvResult"
style="flex: 1"
placeholder="Click the Show CSV export content button to view exported CSV here"
></textarea>
</div>
</div>
<script >
let gridApi;
const gridOptions = {
defaultColDef: {
editable: true,
minWidth: 100,
flex: 1,
},
suppressExcelExport: true,
popupParent: document.body,
columnDefs: [{ field: "make" }, { field: "model" }, { field: "price" }],
rowData: [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxster", price: 72000 },
],
};
function onBtnExport() {
gridApi.exportDataAsCsv();
}
function onBtnUpdate() {
document.querySelector("#csvResult").value = gridApi.getDataAsCsv();
}
// setup the grid after the page has finished loading
document.addEventListener("DOMContentLoaded", function () {
var gridDiv = document.querySelector("#myGrid");
gridApi = agGrid.createGrid(gridDiv, gridOptions);
});
</script>
</body>
</html>
页面效果展示：
附录
- 官网地址：AG Grid：高性能 React Grid、Angular Grid、JavaScript Grid (ag-grid.com)
- 官网地址（JavaScript 版本）：JavaScript 网格：快速入门 |AG网格 (ag-grid.com)
- 官方案例：演示 - 性能网格 (ag-grid.com)
- 官方主题：AG 网格主题构建器 (ag-grid.com)
🙏至此，非常感谢阅读🙏
