如何在MUI DataGrid中程序化选中下一行？排序后ID方法失效

为什么按ID递增的方法会失效？ #

排序、过滤或者分页之后，DataGrid里行的展示顺序和ID的数值顺序完全没关系——比如ID=3的行可能排在ID=5的行前面，这时候按ID+1选行肯定不对。

正确实现思路 #

别盯着ID的数值看，要基于用户当前看到的行顺序来定位下一行。用DataGrid的apiRef能拿到实时渲染的行列表，再结合选中状态就能准确找到下一行。

具体步骤 #

1. 先拿到DataGrid的api引用
   用useGridApiRef()创建api实例，绑到你的DataGrid组件上：

   import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
   
   function YourGridComponent() {
     const apiRef = useGridApiRef();
   
     return (
       <DataGrid
         apiRef={apiRef}
         // 你的列定义、数据源、排序配置等
       />
     );
   }
   

2. 写选中下一行的函数
   点击按钮时执行这个逻辑：

   const selectNextRow = () => {
     // 获取当前选中的行集合
     const selectedRows = apiRef.current.getSelectedRows();
     if (selectedRows.size === 0) return; // 没选中任何行就直接返回
   
     // 取第一个选中的行ID（如果是单选场景，这就是当前选中行）
     const currentSelectedId = Array.from(selectedRows.keys())[0];
     // 获取当前页面渲染的所有行（已经是排序/过滤后的顺序）
     const renderedRows = apiRef.current.getRenderedRows();
     // 找到当前选中行在渲染列表里的位置
     const currentRowIndex = renderedRows.findIndex(row => row.id === currentSelectedId);
   
     // 检查有没有下一行
     if (currentRowIndex !== -1 && currentRowIndex + 1 < renderedRows.length) {
       const nextRowId = renderedRows[currentRowIndex + 1].id;
       // 选中下一行
       apiRef.current.selectRow(nextRowId);
       // 可选：自动滚动到下一行的位置，用户不用自己滚
       apiRef.current.scrollToIndexes({ rowIndex: currentRowIndex + 1 });
     }
   };
   

3. 加个触发按钮
   把按钮放到页面合适的位置，绑定上面的函数：

   <button onClick={selectNextRow}>选中下一行</button>
   

额外提示 #

• 如果你的DataGrid是多选模式，可能需要调整逻辑，但一般“选中下一行”的需求都是基于当前焦点行，所以取第一个选中行就够了。
• getRenderedRows()会自动处理排序、过滤、分页，返回的就是用户眼前看到的行顺序，完全不用担心排序后失效的问题。

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