标签：Ag ag onGridReady React rowData grid import Grid true

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>

标签：Ag,ag,onGridReady,React,rowData,grid,import,Grid,true
来源： https://blog.csdn.net/zhaowanwan/article/details/110084177

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。