Ag-Grid React入门
作者:互联网
Ag-Grid和React兼容性:
react | Ag-Grid |
---|---|
15.x | 18 - 21.2.0 |
16.3X | 22+ |
安装
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>
标签:Ag,ag,onGridReady,React,rowData,grid,import,Grid,true 来源: https://blog.csdn.net/zhaowanwan/article/details/110084177