在React.js的Ag-Grid中如何设置行默认选中状态？

实现步骤 #

1. 绑定Grid API实例

首先给AgGridReact组件添加onGridReady回调，将Grid操作实例存入组件状态，方便后续调用行选择方法：

// 给AgGridReact新增属性
<AgGridReact
  // 原有属性保持不变
  onGridReady={this.handleGridReady}
>
</AgGridReact>

// 组件内新增回调方法
handleGridReady = (params) => {
  this.setState({
    gridApi: params.api,
    columnApi: params.columnApi
  }, () => {
    // 实例初始化完成后执行默认选中逻辑
    this.setDefaultSelectedRows()
  })
}

2. 实现默认选中逻辑

根据你的业务场景二选一即可：

• 场景1：已知要选中的行的唯一标识列表（比如凭证编码）

setDefaultSelectedRows = () => {
  const { gridApi } = this.state
  // 替换为你实际需要默认选中的行标识列表
  const targetVoucherCodes = ['VC001', 'VC005', 'VC012']

  gridApi.forEachNode(rowNode => {
    const currentCode = rowNode.data.ApplicationVoucher.Voucher.VoucherCode
    if (targetVoucherCodes.includes(currentCode)) {
      // 第二个参数设为false不会触发onSelectionChanged回调，需要触发可改为true
      rowNode.setSelected(true, false)
    }
  })
}

• 场景2：已提前筛选好要选中的行数据数组

setDefaultSelectedRows = () => {
  const { gridApi, documentList } = this.state
  // 替换为你的筛选条件
  const needSelectedRows = documentList.filter(item => item.ApplicationVoucher.IsDefaultSelected)

  gridApi.setSelectedNodes(needSelectedRows, true)
}

注意事项 #

如果你的表格行数据documentList是异步从接口获取的，不要在onGridReady中调用选中方法，改为在接口请求成功、更新documentList到state的回调中执行选中逻辑，避免行数据未加载完成导致遍历不到节点的问题。

内容的提问来源于stack exchange，提问作者Ali