使用客戶分頁反應 Material UI 數據網格 onSelectionModelChange

Question

我在使用DataGrid onSelectionModelChange道具時遇到問題。 我可以獲得單個頁面的當前選定行，但是當我使用custom分頁並移至下一頁並再次使用onSelectionModelChange時，我丟失了之前的selections 。

function DataTable(props, list, count) {

  const [page, setPage] = React.useState(1)
  const [selectionModel, setSelectionModel] = React.useState([]);
  const prevSelectionModel = React.useRef(selectionModel);


  let history = useHistory();
  const columns = [#cols here]

  React.useEffect(() => {

    listView(page, newSearch);
   
  }, [page, newSearch]);

  const data = {
    columns: columns,
    rows: JSON.parse(localStorage.getItem("results"))
  }

  return (
    <div style={{ height: 600, width: '100%' }}>
      <DataGrid
        autoHeight
        rows={data.rows}
        columns={columns}
        hideFooterPagination={true}
        checkboxSelection
        onSelectionModelChange={(ids) => {
          setSelectionModel(ids);
          console.log(selectionModel)
        }}
        pageSize={10}
        rowsPerPageOptions={[10]}
        // {...data}
      />
      <AppPagination
      setPage={setPage}
      page={page}
      />
    </div>
  );
}


enter code here

Answer 1

道具keepNonExistentRowsSelected適用於您的代碼。 更多信息參見Mui 數據網格文檔和github 問題

Answer 2

這是您的案例的一個工作示例：您可以在此沙箱中觀看控制台...不會丟失選定的行

現場演示

Answer 3

在 DataGrid 中使用 Props keepNonExistentRowsSelected。 如果 keepNonExistentRowsSelected 屬性為真，則選擇 model 將保留不存在的選定行。 在使用服務器端分頁時很有用，並且在更改頁面時需要保留行選擇。

 <StyledDataGrid
          keepNonExistentRowsSelected/>.

與服務器端分頁一起使用