问题描述
我正在尝试在react-bootstrap-table-next
中实现条件选择和selectAll。
意味着我想在条件为真时禁用selectRow
元素。
案例:
用户上传文件-file has an Upload DateTime
-除非经过15分钟,否则不允许他们删除文件。
逻辑:
moment() >= moment(row.upload_date).add(15,'minutes')
UI实现:
selectRow
的防御力:
const selectRow = {
mode: "checkBox",selected: selectedFiles.id,onSelect: (row,isSelect,rowIndex,e) => {
if ( moment() >= moment(row.upload_date).add(15,'minutes')) {
handleOnSelect(row,isSelect);
} else {
return false;
}
},onSelectAll:(rows,isSelected) => {
if(isSelected) {
for(let i = 0 ; i < rows.length ; i++){
if (moment() >= moment(rows[i].upload_date).add(15,'minutes')){
handleOnSelectAll(rows[i],isSelected);
} else {
return false;
}
}
} else {
return false;
}
},selectionHeaderRenderer: ({ indeterminate,...rest }) => (
<Form.Check
custom
type="checkBox"
label={(<></>)}
ref={ (input) => {
if (input) input.indeterminate = indeterminate;
} }
{ ...rest }
/>
),selectionRenderer: ({ mode,...rest }) => (
<Form.Check
custom
type="checkBox"
label={(<></>)}
type={ mode } { ...rest }
/>
)
};
handleOnSelect
实现:
const handleOnSelect = (row,isSelect) => {
// Selected file
if (isSelect) {
if (
!selectedFiles.length ||
(selectedFiles.length && selectedFiles[0].id !== row.id)
) {
setSelectedFiles([...selectedFiles,row]);
}
}
// deselected file
else {
setSelectedFiles(selectedFiles.filter((x) => x.id !== row.id));
}
};
handleOnSelectAll
实现:
const handleOnSelectAll = (isSelected,rows) => {
console.log(rows)
let files = rows.map((r) => r);
console.log(files)
// Selected all files
if (isSelected) {
setSelectedFiles(files);
}
// deselected all files
else {
setSelectedFiles([]);
}
};
当我们单击全选时,它不应检查最近上传的文件。 我已经参考过react-bootstrap-table-next api文档,但未能实现。
请指导我,谢谢
解决方法
请参阅react-bootstrap-table2
Styorybook
handleOnSelectAll = (isSelect,rows) => {
if (isSelect) {
return rows.filter(r => r.id >= 3).map(r => r.id);
}
}