此篇为我使用ag-grid的笔记。
ag-grid介绍：
使用我们免费的开源库，在几分钟内为您的应用程序添加高性能、功能丰富、完全可定制的数据网格。
React、Angular 、Vue 、JavaScript 都支持。
ag-grid官网：ag-grid 官网 https://ag-grid.com/react-data-grid/reference/
ag-grid demo:ag-grid demo
我使用这个表格的感受是功能很强大，对于表格里大数据处理能力很强（上万、10万条数据都能处理）。
对数据进行过滤，排序、导出等等操作，具体可看官网的demo。
可以对列进行拖拽，列宽也可以拉伸，行也可以拉伸，可以选中行。
过滤功能很强大。
ag-grid官方自带的主题：
| 主题名称 | 风格特点 | 适用场景 |
|---|---|---|
| ag-theme-quartz | AG Grid 新版默认主题，现代感强 | 新项目推荐，搭配最新功能 |
| ag-theme-quartz-dark | Quartz 的深色版本 | 新项目的深色模式需求 |
| ag-theme-alpine | 现代标准、干净清晰，也是 Vue 3 组件的默认主题之一（社区版常用） | 需要现代、专业外观的大多数应用 |
| ag-theme-alpine-dark | Alpine 的深色版本 | 深色模式爱好者或低光环境下的应用 |
| ag-theme-balham | 温和雅致、视觉对比度较低 | 偏好柔和、简约风格界面 |
| ag-theme-balham-dark | Balham 的深色版本 | 深色模式且偏好 Balham 风格 |
| ag-theme-material | 模仿 Google Material Design 规范 | 项目整体采用 Material Design 风格 |
优势与使用场景：
| 维度 | AG Grid 的核心优势 | 典型应用场景 |
|---|---|---|
| 性能与架构 | 专为海量数据设计，通过虚拟滚动等技术实现百万级数据秒级渲染，操作流畅。采用与框架无关的设计，核心代码无依赖，并为 React、Angular、Vue 等提供原生支持。 | 金融与数据分析平台：实时股票行情、高频数据更新。 物联网监控：高频数据流渲染与历史记录回溯。 |
| 功能与特性 | 功能全面，开箱即用：社区版即包含排序、过滤、分组、单元格编辑等；企业版更提供集成图表、数据透视、主从表等高级功能。 | 后台管理系统：ERP主数据管理、用户权限矩阵、动态权限控制。 报表工具：交互式数据透视与钻取，一键导出 Excel/PDF。 |
| 定制与体验 | 提供 Excel 级别的交互体验，支持从 Excel 粘贴数据、自定义公式计算等。深度可定制，允许通过 JavaScript 或框架组件自定义单元格渲染器、过滤器、编辑器和复杂业务逻辑。 | 人力资源系统：展示嵌套的组织层次结构（树形数据），单元格内集成自定义组件（如图像、按钮）。 库存管理：使用主/详细网格显示库存水平，并集成外部过滤器与搜索。 |
| 生态与许可 | 提供社区版（MIT协议） 和企业版。社区版免费开源且功能丰富，企业版提供高级功能、专门技术支持并可去除试用水印。文档与生态完善，社区活跃。 | 适用于从轻量级应用到复杂企业级系统的各类项目，可根据预算和功能需求灵活选择版本。 |
react里使用：
使用前小技巧：
ag-grid的api和参数实在太多了，查询api时可以去官网搜索。还可以先问ai工具比如：deepseek。它给出的还挺准确的，ai和文档结合起来，可以大大的提高开发效率！
ag-grid官网是英文的，开发时需要借助翻译工具，可以使用edge浏览器自带的翻译，但原文就看不到了，可以借助沉浸式翻译的插件，可以翻译和显示原文。
沉浸式翻译插件
可以参考下面的文章安装（这篇文章写很久了，如果不行自行百度即可）：
immersive-translate(沉浸式双语网页翻译扩展)，解决谷歌翻译无法使用问题
使用须知：
了解AG Grid的优势和场景后，还有一些关键点能帮助你更好地做出决策：
版本选择：AG Grid提供社区版（Community） 和企业版（Enterprise）。社区版功能已非常强大，足以满足许多常规需求。如果你的项目需要集成图表、数据透视、服务端行模型等高级功能，或需要官方技术支持并在生产环境中去除试用水印，则需考虑企业版。企业版需要购买许可证。
框架集成：尽管AG Grid与框架无关，但它为主流框架（如React、Angular、Vue）提供了原生的、量身定制的集成包。例如，其React包完全用React编写，能很好地利用React的特性，这确保了在不同技术栈下的一致且高效的开发体验。
“一个网格”哲学：AG Grid的一个显著特点是 “一个网格，所有功能” 。这意味着你无需为树形结构、数据透视表或不同的框架去寻找和学习不同的网格。同一套API和概念可以跨越所有框架和应用场景，显著降低了学习成本和维护负担。
使用步骤：
这是我使用的版本：
"ag-grid-community": "^31.0.1",
"ag-grid-react": "^31.0.1",
"ag-grid-enterprise": "^31.0.1",1.下载依赖使用：
npm install ag-grid-community ag-grid-react ag-grid-enterprise2.引入包：
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';3.使用：
ag-grid使用时需要在外面加一个容器，容器上需要有一个主题的类名我用的是ag-theme-alpine，以及需要加上宽高。
rowData 数据
columnDefs列配置 是必须有的
<div className={`ag-theme-alpine`} style={{ width: '100%', height: '600px' }}>
<AgGridReact
ref={gridApiRef}
onGridReady={onGridReady}
rowData={tracreData}
columnDefs={columnDefs}
onFilterChanged={filterChange} //过滤条件发生变化时触发
>
</AgGridReact>
</div>最简单的完整代码：
import React, { Component, useEffect, useState, useRef, useMemo } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { Pagination, Spin } from 'antd';
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import agStyles from '@/utils/agCellStyle.less';
const data = [
{
"jjmc": "华夏成长混合型证券投资基金",
"status": "上报",
"cljsr": "2023-05-12",
"jjzxgm": 12000000
},
{
"jjmc": "易方达蓝筹精选混合型证券投资基金",
"status": "在审",
"cljsr": "2023-08-03",
"jjzxgm": 35000000
},
{
"jjmc": "嘉实新兴产业股票型证券投资基金",
"status": "成立",
"cljsr": "2023-11-15",
"jjzxgm": 80000000
},
]
const MarketTrace = (props) => {
const [tracreData, setTracreData] = useState(data);
const [gridApi, setGridApi] = useState(null);
const [pageSize, setPageSize] = useState(100); // 每页显示条数
const [currentPage, setCurrentPage] = useState(1); // 当前页码
//表格的数据 条数
const [dataToatal, setDataTotal] = useState(0); //表格显示的条数
const [loading, setLoading] = useState(false); // 加载状态
const gridApiRef = useRef();
// 数字格式化函数，添加千分位逗号
const formatNumber = (num) => {
return num.toString().replace(/\d+/, function (n) {
return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
})
}
const columnDefs = useMemo(() => [
{
headerName: '基金名称', field: 'jjmc', tooltipField: 'jjmc', sortable: true, unSortIcon: true, filter: 'agTextColumnFilter',
minWidth: 300, maxWidth: 350, headerClass: `${agStyles['filterHideIcon']}`
},
{
headerName: '产品状态', field: 'status', sortable: true, unSortIcon: true, filter: 'agSetColumnFilter',
minWidth: 140, cellClass: agStyles['textCenter'], headerClass: `${agStyles['textCenter']} ${agStyles['filterHideIcon']}`
},
{
headerName: '材料接收日', field: 'cljsr', sortable: true, unSortIcon: true, filter: 'agDateColumnFilter',
minWidth: 150,
},
{
headerName: '基金最新规模(元)', field: 'jjzxgm', tooltipField: 'jjzxgm', sortable: true, unSortIcon: true, filter: false,
valueFormatter: (params) => { return params.value ? formatNumber(params.value.toFixed(2)) : "-" },flex:1 //自适应宽度
},
// ... 其他列定义
], []); // 空依赖数组表示只在组件挂载时创建一次
// 当 Grid 准备就绪时，保存 API 实例并初始化状态
const onGridReady = (params) => {
setGridApi(params.api);
};
const filterChange = () => { //响应事件 - 当筛选条件改变时获取条数
if (gridApi) {
setDataTotal(gridApi?.getDisplayedRowCount())
}
}
return (
<div style={{ width: '100%' ,height:'650px',marginTop:'20px'}}>
<div className={`ag-theme-alpine`} style={{ width: '100%', height: '600px' }}>
<AgGridReact
ref={gridApiRef}
onGridReady={onGridReady}
rowData={tracreData}
columnDefs={columnDefs}
onFilterChanged={filterChange} //过滤条件发生变化时触发
>
</AgGridReact>
</div>
</div>
)
};
export default MarketTrace;
常用api笔记：
columnDefs配置：
ag-grid column properties ag-grid表头属性官方文档
columnDefs建议使用useMemo写可以避免，一些问题。
const columnDefs1 = useMemo(() => [
{},
{}
], []); // 空依赖数组表示只在组件挂载时创建一次{
headerName: '基金名称', // 列头显示的名称
field: 'jjmc', // 对应数据源中的字段名
pinned:'left', //居左固定 right居右固定
tooltipField: 'jjmc', // 鼠标悬停时显示的提示信息字段
sortable: true, // 启用列排序功能
unSortIcon: true, // 显示排序状态图标（升序/降序/未排序）
filter: 'agTextColumnFilter', // 使用文本过滤器
minWidth: 300, // 列的最小宽度（像素）
maxWidth: 350, // 列的最大宽度（像素）
flex:1,//占满剩余空间 一般前几列固定宽度时，有一列设置为这个就不用担心宽度占不满了
headerClass: `${agStyles['filterHideIcon']}`, // 为列头添加自定义CSS类，用于隐藏过滤图标等样式控制
valueGetter: ()=>, //对数据进行处理 会创建新数据
valueFormatter: ()=>, //对值进行格式化，单元格里展示 不改变数据
comparator: ()=>, //自定义排序逻辑
cellRenderer:()=> //单元格渲染 可以自定义渲染内容
}| 函数 | 作用时机 | 用途 | 是否影响数据 |
|---|---|---|---|
| valueGetter | 数据加载时 | 从原始数据提取/计算值 | ✅ 会创建新数据 |
| valueFormatter | 单元格渲染时 | 仅格式化显示 | ❌ 不影响实际数据 |
| comparator | 排序操作时 | 定义自定义排序逻辑 | ❌ 仅影响排序 |
使用建议：
valueGetter：当需要组合多个字段或进行复杂计算时使用
valueFormatter：当只需要改变显示格式时使用（性能更好）
comparator：当默认排序不满足业务需求时使用
这三个函数可以单独使用，也可以组合使用，为 ag-Grid 提供了极大的灵活性。
filter配置：
| 过滤器类型 | 配置值 | 使用场景 | 特点说明 |
|---|---|---|---|
| 文本过滤器 | 'agTextColumnFilter' | 字符串内容的搜索和过滤 | 支持包含、等于、开头是、结尾是等文本匹配条件 |
| 数字过滤器 | 'agNumberColumnFilter' | 数值型数据的范围筛选 | 支持等于、不等于、大于、小于、介于等数值比较 |
| 日期过滤器 | 'agDateColumnFilter' | 日期时间类型的数据筛选 | 提供日期选择器，支持等于、之前、之后、介于等时间条件 |
| 集合过滤器 | 'agSetColumnFilter' | 从预定义值集合中选择 | 显示所有唯一值复选框，适合分类、状态等离散值过滤 |
| 多列过滤器 | 'agMultiColumnFilter' | 企业版功能，复杂多条件组合 | 允许在同一过滤器内设置多个条件，支持AND/OR逻辑 |
| 自定义过滤器 | 自定义组件或函数 | 特殊业务逻辑的过滤需求 | 完全自定义过滤界面和逻辑，满足特定业务场景 |
| 快速启用 | true | 快速启用默认文本过滤器 | 等价于 'agTextColumnFilter'，简化配置 |
| 禁用过滤 | false | 特定列不需要过滤功能 | 即使全局启用过滤，该列也不会显示过滤界面 |
// 文本过滤器配置
filter: 'agTextColumnFilter',
filterParams: {
filterOptions: ['contains', 'equals', 'startsWith'],
debounceMs: 300, // 输入防抖
caseSensitive: false,
textFormatter: (value) => value?.trim().toLowerCase()
}
// 数字过滤器配置
filter: 'agNumberColumnFilter',
filterParams: {
allowedCharPattern: '\\d\\-\\.', // 只允许数字和负号小数点
minValue: 0,
maxValue: 1000
}
// 集合过滤器配置
filter: 'agSetColumnFilter',
filterParams: {
values: ['进行中', '已完成', '已取消'], // 预定义选项
applyMiniFilterWhileTyping: true
}
// 日期过滤器配置
filter: 'agDateColumnFilter',
filterParams: {
comparator: (filterDate, cellValue) => {
// 自定义日期比较逻辑
}
}filter 配置文档
如果遇到列搜索时自动失去焦点可以看下面的文章：
ag-grid 列搜索时自动失去焦点
表格搜索面板和其他地方默认是英文，需要本地化：
在使用时建议写一个配置，把所有表格的默认配置写成一个公共的配置：
localeText就是本地化配置，还可以设置其他配置比如行高、隔行变色等等。
建议写一个 ag-grid.js单独写，然后所有用到的地方引入即可！！
//ag-grid-react的默认设置
export const gridOptions = {
headerPosition: 'both',
localeText: {
// 国际化
// for filter panel
page: "当前页",
more: "更多",
to: "至",
of: "总数",
next: "下一页",
last: "上一页",
first: "首页",
previous: "上一页",
loadingOoo: "加载中...",
// for set filter
selectAll: "全选",
searchOoo: "请输入关键字...",
blanks: "空白",
// for number filter and text filter
filterOoo: "过滤...",
clearFilter: '重置',
applyFilter: "确定",
// for number filter
equals: "相等",
notEqual: "不相等",
lessThan: "小于",
greaterThan: "大于",
lessThanOrEqual: "小于等于",
greaterThanOrEqual: "大于等于",
inRange: "范围",
contains: "包含",
notContains: "不包含",
startsWith: "开始于",
endsWith: "结束于",
// the header of the default group column
group: "组",
// tool panel
columns: "列选项",
filters: '筛选',
rowGroupColumns: "laPivot Cols",
rowGroupColumnsEmptyMessage: "拖拽组到这里",
valueColumns: "laValue Cols",
pivotMode: "枢轴模式",
// groups: "列组",
// values: "值",
// pivots: "laPivots",
valueColumnsEmptyMessage: "拖到这里进行聚合",
pivotColumnsEmptyMessage: "la drag here to pivot",
// other
noRowsToShow: "无数据",
// enterprise menu
pinColumn: "固定列",
valueAggregation: "laValue Agg",
autosizeThiscolumn: "自动调整当前网格宽度",
autosizeAllColumns: "自动调整当前页所有网格宽度",
groupBy: "排序",
ungroupBy: "不排序",
resetColumns: "恢复网格样式",
expandAll: "展开全部",
collapseAll: "关闭",
toolPanel: "显示/隐藏控制表盘",
export: "导出到...",
csvExport: "导出CSV",
excelExport: "导出Excel",
// enterprise menu pinning
pinLeft: "<<锁定至表格左侧",
pinRight: ">>锁定至表格右侧",
noPin: "<>取消锁定",
// enterprise menu aggregation and status panel
sum: "总数",
min: "最小值",
max: "最大值",
none: "无",
count: "总",
average: "平均",
// standard menu
copy: "复制",
copyWithHeaders: "复制内容及标题",
ctrlC: "ctrl + C",
paste: "粘贴",
ctrlV: "ctrl + V",
noMatches: '无匹配',
},
getRowNodeId:(data)=>{return data.id}, //唯一值key
rowHeight: 36, //行高
headerHeight: 36, //表头高
defaultColDef: { //默认列定义
// 列最小宽度
minWidth: 200,
// 当表格右侧有多余地方时，可让表格单元格平均占掉
flex: 1,
// make every column use 'text' filter by default
filter: true,
// 可手动调整列宽
resizable: true,
// 表头文字过多时展开
wrapHeaderText: true,
autoHeaderHeight: true,
// 列表头操作菜单栏仅剩筛选功能
menuTabs: ['filterMenuTab'],
sortable: false,
},
getRowStyle: (params) => { //设置行样式 隔行变色
if (parseInt(params.node.rowIndex) % 2 == 0) {
return {
'backgroundColor': '#fff', //颜色可以用英文、rgb以及十六进制
}
} else {
return {
'backgroundColor': '#F5F5FA',
}
}
},
onFirstDataRendered: (params) => { // 使列宽随内容自适应设置
params.api.sizeColumnsToFit();
},
suppressDragLeaveHidesColumns: true, // 列只可在表格中来回移动，不可移动到表格之外
suppressMenuHide: true, // 控制列菜单的隐藏行为
suppressContextMenu: true, //控制是否禁用网格的右键菜单功能
suppressRowClickSelection: true, //点击表格行是否选中
suppressAggFuncInHeader: true, //控制表头是否显示聚合函数菜单
}加上这个就变成了：
在使用时就引入gridOptions 配置即可（把上面的配置放到一个单独的js然后导出即可）：
import { gridOptions } from '@/utils/utils';
<AgGridReact
ref={gridApiRef}
onGridReady={onGridReady}
rowData={tracreData}
columnDefs={columnDefs}
onFilterChanged={filterChange} //过滤条件发生变化时触发
gridOptions={gridOptions}
>
</AgGridReact>如果需果每个表格有自己的配置就可以，使用es6语法…展开运算符来做：
const opt = {
...gridOptions,
// 隐藏默认分页
pagination: true,
// 设置每页显示的数据条数
paginationPageSize: 100,
suppressPaginationPanel: true, // 隐藏分页面板
suppressScrollOnNewData: true,// 新数据加载时不滚动到顶部
// filterParams: { newRowsAction: 'keep' }, // 当有新行加载时，保持当前的过滤条件不变
};
然后gridOptions={opt}隔行变色：
getRowStyle: (params) => { //设置行样式 隔行变色
if (parseInt(params.node.rowIndex) % 2 == 0) {
return {
'backgroundColor': '#fff', //颜色可以用英文、rgb以及十六进制
}
} else {
return {
'backgroundColor': '#F5F5FA',
}
}
},获取当前表格展示的数据条数gridApi?.getDisplayedRowCount()：
ag-grid自带的分页器，一直展示的数据条数是，所有数据的条数。有的时候需要展示过滤后的条数。可以用gridApi?.getDisplayedRowCount()来获取：
gridApi?.getDisplayedRowCount()分页器使用：
ag-grid自带的分页器pagination、suppressPaginationPanel为true就可以使用。
paginationPageSizeSelector可以设置每页条数下拉框的条数。
const opt = {
...gridOptions,
// 隐藏默认分页
pagination: true,
// 设置每页显示的数据条数
paginationPageSize: 2,
suppressPaginationPanel: false, // 隐藏分页面板
paginationPageSizeSelector: [10, 20, 50, 100], // 设置每页显示条数的选项
suppressScrollOnNewData: true,// 新数据加载时不滚动到顶部
// filterParams: { newRowsAction: 'keep' }, // 当有新行加载时，保持当前的过滤条件不变
};自定义分页器：
有的时候业务会觉得自带的分页器不好看，需要自定义，而且如果页数很多，没有输入页码，调到该页也很麻烦。可以自定义分页器，下面就是我用antd和ag-grid结合实现的分页器。当然你也可以完全自己写分页器。使用ag-grid内部api就可以实现分页。
主要是使用ag-grid自带的api:
paginationGoToPage 跳转到某页和 paginationSetPageSize每页条数。
| 分类 | API 方法 | 功能描述 | 常见使用场景 |
|---|---|---|---|
| 基础分页控制 | paginationGoToPage(pageNumber) | 跳转到指定页码（从0开始）。 | 用户输入页码跳转；恢复上次浏览页面。 |
paginationGoToNextPage() | 跳转到下一页。 | "下一页"按钮。 | |
paginationGoToPreviousPage() | 跳转到上一页。 | "上一页"按钮。 | |
paginationGoToFirstPage() | 跳转到第一页。 | "首页"按钮。 | |
paginationGoToLastPage() | 跳转到最后一页。 | "末页"按钮。 | |
| 分页状态获取 | paginationGetCurrentPage() | 获取当前页码（从0开始）。 | 保存当前页面状态；显示当前页码。 |
paginationGetTotalPages() | 获取总页数。 | 显示总页数信息。 | |
paginationGetPageSize() | 获取当前每页显示条数。 | 显示或同步页面大小状态。 | |
paginationGetRowCount() | 获取总数据条数。 | 显示数据总量。 | |
| 页面大小控制 | paginationSetPageSize(size) | 动态设置每页显示的数据条数。 | 用户通过下拉框自定义每页显示数量。 |
其他更多api可以查看：ag-grid pagination api
自定义分页器时suppressPaginationPanel要设为true。
pagination也要为true。
import React, { Component, useEffect, useState, useRef, useMemo } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { Pagination, Spin } from 'antd';
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import agStyles from '@/utils/agCellStyle.less';
import { gridOptions } from '@/utils/utils';
const data = [
{
"jjmc": "华夏成长混合型证券投资基金",
"status": "上报",
"cljsr": "2023-05-12",
"jjzxgm": 12000000
},
{
"jjmc": "易方达蓝筹精选混合型证券投资基金",
"status": "在审",
"cljsr": "2023-08-03",
"jjzxgm": 35000000
},
{
"jjmc": "嘉实新兴产业股票型证券投资基金",
"status": "成立",
"cljsr": "2023-11-15",
"jjzxgm": 80000000
},
]
const MarketTrace = (props) => {
const [tracreData, setTracreData] = useState(data);
const [gridApi, setGridApi] = useState(null);
const [pageSize, setPageSize] = useState(1); // 每页显示条数
const [currentPage, setCurrentPage] = useState(1); // 当前页码
//表格的数据 条数
const [dataToatal, setDataTotal] = useState(0); //表格显示的条数
const [loading, setLoading] = useState(false); // 加载状态
const gridApiRef = useRef();
// 数字格式化函数，添加千分位逗号
const formatNumber = (num) => {
return num.toString().replace(/\d+/, function (n) {
return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
})
}
const columnDefs = useMemo(() => [
{
headerName: '基金名称',
field: 'jjmc',
tooltipField: 'jjmc',
sortable: true,
unSortIcon: true,
filter: 'agTextColumnFilter',
minWidth: 300,
maxWidth: 350,
headerClass: `${agStyles['filterHideIcon']}`
},
{
headerName: '产品状态', field: 'status', sortable: true, unSortIcon: true, filter: 'agSetColumnFilter',
minWidth: 140, cellClass: agStyles['textCenter'], headerClass: `${agStyles['textCenter']} ${agStyles['filterHideIcon']}`
},
{
headerName: '材料接收日', field: 'cljsr', sortable: true, unSortIcon: true, filter: 'agDateColumnFilter',
minWidth: 150,
},
{
headerName: '基金最新规模(元)', field: 'jjzxgm', tooltipField: 'jjzxgm', sortable: true, unSortIcon: true, filter: false,
valueFormatter: (params) => { return params.value ? formatNumber(params.value.toFixed(2)) : "-" }, flex: 1 //自适应宽度
},
// ... 其他列定义
], []); // 空依赖数组表示只在组件挂载时创建一次
// 当 Grid 准备就绪时，保存 API 实例并初始化状态
const onGridReady = (params) => {
setGridApi(params.api);
};
const filterChange = () => { //响应事件 - 当筛选条件改变时获取条数
if (gridApi) {
setDataTotal(gridApi?.getDisplayedRowCount())
}
}
const opt = {
...gridOptions,
// 隐藏默认分页
pagination: true,
// 设置每页显示的数据条数
paginationPageSize: 1,
suppressPaginationPanel:true, // 隐藏分页面板
//paginationPageSizeSelector: [10, 20, 50, 100], // 设置每页显示条数的选项
suppressScrollOnNewData: true,// 新数据加载时不滚动到顶部
// filterParams: { newRowsAction: 'keep' }, // 当有新行加载时，保持当前的过滤条件不变
};
//分页变化
const paginationChange = (page) => {
setCurrentPage(page); // 更新当前页码
gridApi.paginationGoToPage(page);
}
//分页器 每页条数变化
const sizeChange = (current, size) => {
setPageSize(size); // 更新每页显示条数
gridApi.paginationSetPageSize(size);
};
const showTotal = (total) => `共 ${total} 条数据`;
return (
<div style={{ width: '100%', height: '650px', marginTop: '20px' }}>
<div className={`ag-theme-alpine`} style={{ width: '100%', height: '150px' }}>
<AgGridReact
ref={gridApiRef}
onGridReady={onGridReady}
rowData={tracreData}
columnDefs={columnDefs}
onFilterChanged={filterChange} //过滤条件发生变化时触发
gridOptions={opt}
>
</AgGridReact>
</div>
<div>
<Pagination size="small" total={50} showTotal={showTotal} showSizeChanger showQuickJumper pageSizeOptions={[1, 20, 50, 100]} onChange={paginationChange} onShowSizeChange={sizeChange} pageSize={pageSize} current={currentPage} />
</div>
</div>
)
};
export default MarketTrace;效果如下：
文字过长显示…并且鼠标移入显示完整文字：
如果想要实现文字过长显示…并且显示tooltip。本身加上 tooltipField: 'jjmc’属性就能实现tooltip显示，但自带的反应很慢（第一次好几秒才显示），业务让优化一下，后来自己用antd的Tooltip实现了：
import { Tooltip } from 'antd';
{
headerName: '产品名称', field: 'jjmc', sortable: true, unSortIcon: true, filter: 'agTextColumnFilter', filterParams: athleteFilterParams,
minWidth: 300, maxWidth: 350, headerClass: `${agStyles['filterHideIcon']}`,
cellRenderer: (params) => {
return (
<div style={{ width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
<Tooltip title={params.value || '--'}>{params.value || '--'}</Tooltip>
</div>
);
}
},暂无数据，或者搜索时，没有符合条件的数据时自定义展示内容：
默认是什么也没有：
给gridOptions加上这个即可：
overlayNoRowsTemplate: '<span>未找到与关键字匹配的产品，请尝试调整关键词查询。</span>',
// 建议在数据更新后检查是否为空
onModelUpdated: (event) => {
// 当显示的行数为0时，自动显示无数据覆盖层
if (event.api.getDisplayedRowCount() === 0) {
event.api.showNoRowsOverlay();
} else {
event.api.hideOverlay();
}
},加上后效果如下：
自定义loading:
overlayLoadingTemplate可以自定义loading模版：
const gridOptions = {
// 其他配置...
// 定义自定义加载模板
overlayLoadingTemplate: '<div style="padding: 20px; text-align: center;"><div class="你的加载动画CSS"></div><br/><span>正在玩命加载中，请稍候...</span></div>',
};gridApi.showLoadingOverlay() / gridApi.hideOverlay() 可以精准控制什么时候展示和隐藏。
还可以用antd得Spin实现，这个就可以完全自己控制了：
设置默认搜索条件：
默认的搜索条件可以用filterParams的defaultValue设置：
filterParams: {
defaultValue: '张三'
}也可以用api的方式设置gridApi.setFilterModel(filter)：
let filter = {
status: { //key值是要设置的字段和field一致
type: 'set',
values: values.status == "全部" ? filterAllopt : [values.status],
},
jjmc: {
filterType: 'text',
type: 'contains',
filter: values.jjmc,
}
}
if (gridApiRef.current) {
setTimeout(() => {
gridApi.setFilterModel(filter);
}, 0)
}清除搜过滤条件就是：
gridApi.setFilterModel(null);导出Excel的使用（此功能需要使用企业版即付费才可以）：
/** 导出 */
const exportTable = () => {
const params = {
//文件名
fileName: `名称关键字搜索${moment().format('YYYY-MM-DD HH时mm分')}`,
//表名
sheetName: "名称关键字搜索",
//表头高度
headerRowHeight: 28,
//导出 列 默认导出全部 ，但 操作列不想导出 所以 加此属性
columnKeys: ['jjmx',],
//导出时单元格内容处理
processCellCallback(params) {
//产品最新规模 导出格式化
if (params?.column?.colDef?.field == 'jjzxgm') {
return params.value ? formatNumber(params.value.toFixed(2)) : "";
}
//对日期列进行格式化
if (params?.column?.colDef?.field == 'cljsr' ||
params?.column?.colDef?.field == 'clslr' ||
params?.column?.colDef?.field == 'hpr' ||
params?.column?.colDef?.field == 'clr') {
return dateFormatter(params);
}
//操作列不导出
// if (params?.column?.colDef?.field == "actions") {
// return null;
// }
return params?.value;
}
};
gridApi.exportDataAsExcel(params);
};其它api可参考excel export params
还可以导出csv格式，使用exportDataAsCsv即可。
ag-grid改变表格表头和单元格居中、居左、居右：
想用表格列的搜索，又想隐藏掉搜索的图标：
我这个需求有些特殊，搜索条件需要用表格上面的搜索框和下拉框，分别对应产品名称和产品状态。
需要用到ag-grid自带的搜索功能，又不想让用户能点出自带的过滤面板。
所以就需要隐藏掉可以点出过滤面板的图标，即上图红框部分。可以自定义样式隐藏掉：
//隐藏过滤图标 想用过滤，又不显示图标，可以加这个样式
.filterHideIcon {
:global {
.ag-header-icon{
display:none !important;
}
}
}使用时就是在columnDefs里加上headerClass：
headerClass: `filterHideIcon`拓展：这个搜索是借助 设置默认搜索条件实现的：
let filter = {
status: {
type: 'set',
values: values.status == "全部" ? filterAllopt : [values.status],
},
jjmc: {
filterType: 'text',
type: 'contains',
filter: values.jjmc,
}
}
if (gridApi) {
setTimeout(() => {
gridApi.setFilterModel(filter);
}, 0)
}
浙公网安备 33010602011771号