React-Data-Grid - 选择/取消选择所有行忽略折叠的组

编程问答 2022-05-30

问题描述

环境信息

  • 反应版本：16.13.1
  • 反应数据网格版本：7.0.0-canary.16
  • 浏览器：Chrome 版本 87.0.4280.141（官方版本）（64 位）

当分组和行选择同时存在并且 rowSelection 道具的 selectBy 分配有键而不是索引时，我面临的问题发生。

当前的行为是当网格被分组并且用户选中全选按钮时，除了折叠的行之外的所有行都被选中。取消选择所有选项时也会发生这种情况。

重现步骤

  • 使用分组和行选择设置网格（selectBy 应使用键进行初始化）。
  • 折叠一组或多组
  • 点击网格顶部的勾选所有复选框
  • 将检查除折叠的行之外的每一行，

SAMPLE CODE JSX 文件（不会在代码片段中运行，因为它不是独立文件，抱歉！）

import ReactDataGrid,{ SelectColumn,Row as GridRow } from 'react-data-grid';
import { DragDropContext } from 'react-beautiful-dnd';
import { ContextMenu } from 'react-contextmenu';

class DocListTable extends React.Component {
constructor(props) {
super(props);
this.state = {
allDocuments: props.documents,displayedDocuments,//set based on expand/collapse
columns: this.defaultColumns,expandedRows: [],selectedRows: new Set(),selectedDocuments: [],sortColumn: 'name',sortDirection: 'ASC',filters: [],gridWidth: 750,};
}
render() {
return (


<ReactDataGrid
rowKey="id"
ref={node => this.grid = node}
columns={this.state.columns}
rows={this.state.displayedDocuments}
enableFilters={this.props.displayFilters}
minColumnWidth="235"
selectedRows={this.state.selectedRows}
onSelectedRowsChange={this.setSelectedRows}
sortColumn={this.state.sortColumn}
sortDirection={this.state.sortDirection}
onSort={this.handleSort}
emptyRowsView={this.emptyRowsView}
onColumnResize={this.resizeColumn}
rowRenderer={this.rowRenderer}
/>
    <ContextMenu id="grid-context-menu" hideOnLeave>
      <Access roles={['ADMIN']}>
        <UpdateDocumentModal contextOpen getContextDoc={this.getContextDoc} documents={this.state.contextDocuments} reRenderParent={this.props.reRenderParent} />
      </Access>
    </ContextMenu>
    </Segment>
  );
}
}
export default DocListTable;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreact-data-gridreactjsreactjstypescripttypescript