reactjs - PrimeReact DataTable:如何(视觉上)取消选择行
问题描述
我正在使用通过复选框进行行选择以及全局搜索的 DataTable。问题是,如果我选择一(或多)行然后通过全局搜索进行过滤,则所选行的位置保持不变,例如,如果我选择第一行和第二行并进行过滤,则第一行和第二行仍然被选中如果他们现在因为过滤而具有完全不同的内容。我什至设法重置了状态中的基础选择,导致状态中没有选择任何内容,但复选框仍然被选中。重置 DataTable 不会做任何事情。
我如何(至少在视觉上)重置复选框?谢谢!
我的代码如下:
<InputText type="search" onInput={e =>
this.setState({
globalFilter: e.target.value,
selectedProjectListEntries: []
})}
placeholder={this.intl.formatMessage({id: "input.global-search.hint"})}
className={"form-control"}/>
<DataTable ref={el => this.dataTable = el}
value={this.state.projectListEntries} autoLayout={false}
globalFilter={this.state.globalFilter} rows={20}
className={'table table-striped'}
selection={this.state.selectedProjectListEntries}
onSelectionChange={e => this.setState({selectedProjectListEntries: e.value})}>
<Column selectionMode="multiple"/>
... Columns ...
解决方案
如果其他人使用没有 PrimeReact 的 CSS 和主题的 DataTable,则需要以下 CSS 才能使其工作(除了使用 PrimeIcons):
body .p-checkbox {
display: inline-block;
vertical-align: middle;
margin: 0;
width: 20px;
height: 20px;
}
.p-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.p-hidden-accessible input, .p-hidden-accessible select {
-webkit-transform: scale(0);
transform: scale(0);
}
body .p-checkbox .p-checkbox-box.p-highlight {
border-color: $highlight_color;
background-color: $highlight_color;
color: #ffffff;
}
body .p-checkbox .p-checkbox-box {
border: 1px solid #a6a6a6;
background-color: #ffffff;
width: 20px;
height: 20px;
text-align: center;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-checkbox .p-checkbox-box {
width: 1.125em;
height: 1.125em;
line-height: 1.125em;
border-radius: 2px;
text-align: center;
}
body .p-checkbox .p-checkbox-box .p-checkbox-icon {
overflow: hidden;
position: relative;
font-size: 18px;
}
.p-checkbox .p-checkbox-icon {
display: block;
}
body .p-datatable .p-datatable-tbody > tr.p-highlight {
background-color: $highlight_color;
color: #ffffff;
}
推荐阅读
- elasticsearch - 处理 Elasticsearch 中的可选字段搜索
- java - 尝试验证空字段时,应用程序崩溃并出现错误“无法执行 android:onClick 的方法”
- flutter - 文本字段颤动的默认值?
- python - 自动安装 GFortran 和 Python3
- php - 如何在 MYSQL 中创建子查询
- javascript - 如何在 React 中导入 JS 脚本,类似于它在 HTML 中的完成方式
- django - 在 Django 返回对象中获取最新 ID 是不可迭代的
- powershell - 如何在 Powershell 中加速 Get-ChildItem
- ios - 在运行时在 tableview 单元格中添加子视图并展开 tableview 单元格的最佳方法
- json - 无法将 json 映射到 golang 结构