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

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

设置多行选中

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

代码语言：javascript复制

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

获取选中行数据

绑定 ref 

代码语言：javascript复制

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

获取数据

代码语言：javascript复制

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

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

未经允许不得转载：w3h5 » ag-grid设置选中单行多行及获取选中行数据

grid ref

0 人点赞