ag-grid设置选中单行多行及获取选中行数据

ag-Grid 是比较实用的数据表格组件，最近接触到了相关的项目，简单记录一下设置选中单行多行和获取选中行数据的方法。

设置多行选中

rowSelection 行选择的类型，设置为 'single' 或者 'multiple' 启用单选和多选。

const gridOptions = {
  headerHeight: 40,
  rowSelection: 'multiple', // 单选 single | 多选 multiple
  suppressContextMenu: true,
}

获取选中行数据

绑定 ref 

const gridRef = useRef();
<AgGridReact
    ref={gridRef}
    //...
/>

获取数据

const rows = gridRef.current.getSelectedRows();
if (rows && rows.length) {
  // 得到一个数组，如果是多选，会显示多条
  // 如果是单选，直接去下标是 0 的数据即可
  console.log(rows[0])
} else {
  alert('请选择一条数据！');
}

可以根据自己的需求，进行更进一步的扩展。

未经允许不得转载：Web前端开发资源网 - w3h5 » ag-grid设置选中单行多行及获取选中行数据

推荐阅读：

HTML引入文件的绝对路径、相对路径、根目录

用css实现文本溢出 超出部分隐藏显示省略号

20180410博客更换服务器步骤

Z-Blog 搜索报错：Cannot pass parameter 1 by reference 解决方法

jQuery实现本地input选择图片实时显示