推荐一个非常好用的表格组件 - AG Grid

最新推荐文章于 2025-04-13 22:06:40 发布

杨树林er

最新推荐文章于 2025-04-13 22:06:40 发布

阅读量5.7k

点赞数 24

分类专栏：工具文章标签： javascript 前端 ecmascript aggrid grid vue 表格组件

本文链接：https://blog.youkuaiyun.com/weixin_41636483/article/details/136674624

版权

工具专栏收录该内容

11 篇文章

订阅专栏

一、前言

最近在做一个线上订货平台的项目，用户之前都是使用传统的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>

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