[英]React Material UI Data Grid onSelectionModelChange with custome pagination
我在使用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
道具keepNonExistentRowsSelected
适用于您的代码。 更多信息参见Mui 数据网格文档和github 问题
在 DataGrid 中使用 Props keepNonExistentRowsSelected。 如果 keepNonExistentRowsSelected 属性为真,则选择 model 将保留不存在的选定行。 在使用服务器端分页时很有用,并且在更改页面时需要保留行选择。
<StyledDataGrid
keepNonExistentRowsSelected/>.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.