一、前言
最近在做一个线上订货平台的项目，用户之前都是使用传统的Excel表格完成工作数据的提交和汇总，工作效率非常低。
希望我们能将历年的各项数据导入系统，之后可以参照历年数据格式，能直接在系统上创建新的工作，并进行管理。
在项目中，我们需要尽可能的将数据以表格的形式呈现，从而最大程度还原用户熟悉的工作操作。
重新开发一套表格组件所使用的时间和精力相对来说是非常大的，为了能尽快将成果完美的呈现给用户，我们选择了AG-Grid这个号称最强的表格组件。
接下来简单记录下AG-Grid的使用经验，方便大家参考。
二、介绍
AG-Grid是一个高级数据网格，适用于JavaScript / TypeScript应用程序。AG-Grid没有其他依赖项，不需要提前加载 Vue 或 React 或 Angular，甚至不使用 JQuery、Undercore 或 LoDash。没有依赖性意味着AG-Grid可以与任何框架一起工作。
它是一种功能强大、灵活且具有高度可定制性的表格解决方案，提供了丰富的特性，如排序、过滤、分组、编辑、无限滚动、行拖动、分组等，甚至可以和桌面Excel文件之间进行复制粘贴，多选数据后即时生成图表等强大功能。
且开源免费！！！
三、获取
- Github 地址：https://github.com/ag-grid/ag-grid
- 官方文档地址：https://www.ag-grid.com/
- 中文文档地址：https://www.itxst.com/ag-grid/tutorial.html
1. Vue环境
- 使用 npm 安装 ag-grid-vue3
npm install ag-grid-vue3 - 引入并注册到组件
<template></template><script> import { ref } from 'vue'; import "ag-grid-community/styles/ag-grid.css"; import "ag-grid-community/styles/ag-theme-quartz.css"; import { AgGridVue } from "ag-grid-vue3";export default {name: "App",components: {AgGridVue,},setup() {}, }; </script> - 定义行列数据
setup() {// 行数据：要显示的数据const rowData = ref([{ make: "Tesla", model: "Model Y", price: 64950, electric: true },{ make: "Ford", model: "F-Series", price: 33850, electric: false },{ make: "Toyota", model: "Corolla", price: 29600, electric: false },]);// 列定义：定义要显示的列const colDefs = ref([{ field: "make" },{ field: "model" },{ field: "price" },{ field: "electric" }]);return {rowData,colDefs,}; }, - 使用 Grid 组件，配置 rowData 和 columnDefs 属性，为表格提供数据
<template><ag-grid-vue:rowData="rowData":columnDefs="colDefs"style="height: 500px"class="ag-theme-quartz"></ag-grid-vue> </template>
2. JavaScript环境
- 提供容器
- 引入AG-Grid库文件，并创建一个空白div
<html lang="en"><head><script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script></head><body><div id="myGrid"></div></body> </html> - 创建实例
- 创建实例，并将空白div传入
const gridOptions = {};const myGridElement = document.querySelector('#myGrid'); // 创建实例，传入容器 和 Grid 配置对象 agGrid.createGrid(myGridElement, gridOptions); - 定义行和列
// Grid 配置对象 const gridOptions = {// 行数据：要显示的数据rowData: [{ make: "Tesla", model: "Model Y", price: 64950, electric: true },{ make: "Ford", model: "F-Series", price: 33850, electric: false },{ make: "Toyota", model: "Corolla", price: 29600, electric: false },],// 列定义：定义要显示的列columnDefs: [{ field: "make" },{ field: "model" },{ field: "price" },{ field: "electric" }] }; - 添加样式
- 通过class设置表格主题：
ag-theme-quartz
<div id="myGrid" class="ag-theme-quartz" style="height: 500px"></div> - 通过class设置表格主题：
3. 其他方式
- React：https://ag-grid.com/react-data-grid/getting-started/
- Angular：https://ag-grid.com/angular-data-grid/getting-started/
四、最后
AG-Grid真的是一个功能强大的数据表格，借用官网上的一句话作为结束：
The Best JavaScript Grid in the World
)
