前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ag-grid设置选中单行多行及获取选中行数据

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

作者头像
德顺
发布2022-09-30 08:12:47
2.2K0
发布2022-09-30 08:12:47
举报
文章被收录于专栏:前端资源前端资源

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设置选中单行多行及获取选中行数据

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 设置多行选中
  • 获取选中行数据
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档