ag-grid表格基本使用方法-React版本

最新推荐文章于 2025-04-11 09:22:52 发布

晓小辰

最新推荐文章于 2025-04-11 09:22:52 发布

阅读量1.1w

点赞数 1

分类专栏： web前端文章标签： ag-grid react JavaScript

本文链接：https://blog.csdn.net/HZHJC/article/details/87091569

版权

web前端专栏收录该内容

8 篇文章

订阅专栏

AG表格基本用法及Api

在要使用的项目中，首次使用需要引入相关组件包(注：项目中所有组件都是封装之后的)。引入方式如下:import {Table} from 'pkg/common/table'
引入完成后，在view层需要用到表格的地方直接放入标签。如：<Table .../>
AG表格使用中，需要用到最基础的两个属于：列规则columnDefs，数据源rowData。两个属性接受参数类型均为数组类型，其中列规则的使用方式比较多变。

官方文档：ag-Grid

示例：

    columnDefs=[
        {
            headerName: '', // 表头显示名称
            field: '', // 列索引（rowData对应显示的数据）
        },
    ]

示例：

        <Table
            columnDefs={this.columnDefs}
            rowData={[rowData]}
        />

列规则

列规则在AG表格中的使用非常复杂，在列规则中，常常会引入其他组件到AG表格中（其他组件操作在其他文档中），会出现三个新的属性，cellEditor，cellEditorFramework和cellEditorParams，其中cellEditor，cellEditorFramework任选其一

cellEditor:string在列规则中，引入其他组件的组件名称
cellEditorFramework:ReactComponent在列规则中，引入其他组件的组件名称

cellEditorParams是引入的其他组件所需要用到的参数

示例：

    columnDefs=[
        {
            headerName: '', // 表头显示名称
            field: '', // 列索引（rowData对应显示的数据）
            cellEditorFramework: Input, // 引入组件名
            cellEditorParams: { // 引入的组件所需的参数
                value: '',
            },
        },
    ]

在使用上述规则时，请使用editable回调函数打开编辑模式

部分表格API可以单独使用在列规则中

    columnDefs=[
        {
            headerName: '', // 表头显示名称
            field: '', // 列索引（rowData对应显示的数据）
            editable： true,
            cellEditorFramework: Input, // 引入组件名
            cellEditorParams: { // 引入的组件所需的参数
                value: '',
            },
        },
    ]

其余常用列规则API

表头提示文本 — headerTooltip: string
列提示文本 — tooltipField: 列规则的field

表格API获取

AG表格有一套单独的API供其使用，实现表格数据的增删改等操作。一个view层可能会同时出现使用多个表格的情况，这时就需要将每个表格的API获取出来分别保存，以避免冲突，有几个表格就存几个API。

onGridReady — 表格渲染成功时触发事件

通过onGridReady方法，获取当前表格的API和其他信息。此方法会接到一个默认参数，里边包含AG所有的API。

示例：

    let agApi
    
    /* 调用方法获取API **/
    getApi = (params) => {
        agApi = params.api
    }
    
     <Table
        columnDefs={this.columnDefs}
        rowData={[rowData]}
        onGridReady={this.getApi}
    />

其余常用表格API

开启单元格选中 — suppressCellSelection={false}
焦点离开关闭编辑模式 — stopEditingWhenGridLosesFocus={true}
关闭拖动列到表格外删除列 — suppressDragLeaveHidesColumns={true}
关闭拖动换列 — suppressMovableColumns={true}
单点击启动编辑加载组件 — singleClickEdit={true}

表格事件

AG表格向用户提供了大量的可操作事件，一般的，操作事件中都会带有一个默认参数params，这个params中包含了当前使用的事件能得到的所有数据，这就大大的方便了开发人员对于表格的操作。

例如：单击一行时，想获取当前单击行的某些数据时，就可以从方法里的默认参数直接取到。

示例：

click = (params) => {
    console.log(params);  // params参数包含事件能得到的所有数据
}

<Table
    rowData={rowData}
    columnDefs={columnDefs}
    onRowClicked={this.click} /*单击行事件
/>

几乎一半以上的事件都可以直接拿到`params`这个默认参数

常用的表格事件

onCellClick --- 单击单元格事件

onCellDoubleClicked --- 双击单元格

onRowClicked --- 单击行

onRowDoubleClicked --- 双击行

onCellContextMenu --- 右键事件

onRowSelected --- 行选中事件
......

表格更新数据

AG表格在React使用中，通常会遇到更新state后表格数据没变化或者没有显示，因为AG和state分成了两个独立的块，并不会像普通页面一样state改变后，页面就会跟着发生改变。意思就是state和AG是两个独立的块(这种现象只在本项目里生效，项目里进行了封装)，所有我们在改变state的同时，需要对AG也进行改变，那么AG也会有相应的API作为对自身的操作。

对AG进行操作，首先我们要了解它的表格数据模型。在官方文档中，没有特别明确表格怎么去看，但是给出的API却有针对性。下边是文档作者对于AG的理解：AG根据操作需求可以分成四个类型去看，分别是 — 整张表格(所有行，所有列)，行，列，单元格。那么API也对这4种模式有相应的操作。

下面会列出常用的AG用到的操作，其余可以去官方文档里查看。

更新整张表格数据

使用AG时，经常会把请求到的后台数据放在AG表格中，但是state放在rowData里不管如何改变页面上都不会有任何的呈现此时我们就要调用刷新表格数据的API，setAllRowData([rowData])，替换行节点上的数据。完成后，网格将刷新整个呈现的行。(更新所有行的Api在项目中进行了一次封装，原生APIsetRowData([rowData])，更多详情请查阅官方文档)。

示例：

this.agApi.setAllRowData([rowData])

AG表格基础操作

在AG中，官方文档给出一个API，专门用来更新行数据 — updateRowData，只需掌握以下用法就基本满足正常业务需求了。首先我们要了解updateRowData，这个API接受的是一个对象，对象里传入的分别是你当前需要进行的操作，并把操作更新到AG表格上，常用的操作，如下

新增

示例：

this.agApi.updateRowData({ add: newItems })

插入

示例：

this.agApi.updateRowData({ add: newItems, addIndex: index })

新增(插入)多条

示例：

this.agApi.updateRowData({ add: [newItems], addIndex: index })

删除

示例：

this.agApi.updateRowData({ remove: selectRow })

更新

示例：

this.agApi.updateRowData({ update: itemsToUpdate })

以上是AG表格的基本操作，AG表格本身集成了许多方便好用的API，在进行基础操作时，搭配起来使用，效率更高。

常用的API

this.agApi.getSelectedNodes() // 获取所有所选行的行数据，返回一个数组对象

this.agApi.getSelectedRows() // 获取所有所选行的数据，返回一个数组对象

this.agApi.stopEditing() // 停止所有行编辑

this.agApi.sizeColumnsToFit() // 每列自适应宽度

this.agApi.forEachNode(callback) // 针对表格的遍历，返回回调

...selectAll() // 选择所有行

...deselectAll() // 清除所有选择行

......