Ag-Grid React入门

Ag-Grid和React兼容性:

安装

npm install --save ag-grid-community ag-grid-react ag-grid-enterprise

• ag-grid-community: 原始版本，零依赖性，不会拉取第三方依赖关系到应用程序中
• 分组等高级功能是ag-grid-enterprise独有的功能。可以免费试用，如果打算用于生产项目，需要获取企业许可证密钥。
• ag-grid-enterprise自定义上下文菜单和更高级的列菜单弹出。
  高级列菜单控制grid显示或隐藏部分列数据；控制grid列的宽度是否自适应，列pin的位置。
  自定义的上下文菜单提供了复制、粘贴、导出数据（.cvs、.xlsx、.xml格式）的功能

使用

// import依赖
import React, { useState } from 'react'
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
import 'ag-grid-enterprise'
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

// 定义数据rowData
const [rowData, setRowData] = useState([
	{ make: "Toyota", model: "Celica", price: 35000 },
	{ make: "Ford", model: "Mondeo", price: 32000 },
	{ make: "Porsche", model: "Boxter", price: 72000 }
])

// grid定义
<div className="ag-theme-alpine-dark" style={ { height: 400, width: 600 } }>
	<AgGridReact
		rowSelection="multiple"
		rowData={rowData}
	>
		<AgGridColumn field="make" sortable={true} filter={true} checkboxSelection={true}></AgGridColumn>
		<AgGridColumn field="model" filter={true}></AgGridColumn>
		<AgGridColumn field="price" sortable={true}></AgGridColumn>
	</AgGridReact>
</div>

• 通过容器元素的className设置网格theme
• rowData对象的字段与AgGridColumn中的field值匹配

基本使用

排序

• 在AgGridColumn上定义sortable属性，点击表头在升序、降序、无序之间切换

<AgGridColumn field="price" sortable={true}></AgGridColumn>

过滤

• 在AgGridColumn上定义filter属性，筛选功能显示在列菜单中显示

<AgGridColumn field="model" filter={true}></AgGridColumn>

选择

• AgGridReact上定义rowSelection属性，定义checkboxSelection属性
• 获取并保存选中状态需要用到Ag-Grid提供的api，onGridReady事件返回params，包含各种api

// params 包含有type、api(gridApi)、columnApi
const [gridApi, setGridApi] = useState(null)
const [gridColumnApi, setGridColumnApi] = useState(null)

function onGridReady(params) {
	setGridApi(params.api);
	setGridColumnApi(params.columnApi);
}

<AgGridReact
	rowSelection="multiple"
	rowData={rowData}
	onGridReady={onGridReady}
>
	<AgGridColumn field="make" checkboxSelection={true}></AgGridColumn>
</AgGridReact>

分组

• AgGridReact上设置autoGroupColumnDef和groupSelectsChildren；
• AgGridColumn上设置rowGroup

<AgGridReact
	rowSelection="multiple"
	rowData={rowData}
	onGridReady={onGridReady}
	groupSelectsChildren={true}
	autoGroupColumnDef={{
		headerName: "Price",
		field: "price",
		cellRenderer:'agGroupCellRenderer',
		cellRendererParams: {
			checkbox: true
		}
	}}
>
	<AgGridColumn field="make" filter={true} rowGroup={true}></AgGridColumn>
</AgGridReact>