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('请选择一条数据!');
}

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

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

赞 (4)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)