PrimeReact DataTable：如何（视觉）取消选择行

Posted 2023-02-21

【中文标题】PrimeReact DataTable：如何（视觉）取消选择行

【英文标题】：PrimeReact DataTable: How to (visually) deselect rows

【发布时间】：2020-11-10 05:27:02

【问题描述】：

我正在使用通过复选框进行行选择以及全局搜索的 DataTable。问题是，如果我选择一个（或多个）行，然后通过全局搜索进行过滤，则所选行的位置保持不变，例如。 G。如果我选择第一行和第二行并进行过滤，即使第一行和第二行由于过滤而现在具有完全不同的内容，它们仍然会被选中。我什至设法重置状态中的基础选择，导致状态中没有选择任何内容，但复选框仍然被选中。重置 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/Themes 并自己设置样式（主要是使用 Bootstrap），因为网站的其余部分使用 Bootstrap 并且禁用/启用似乎主要通过 CSS 类发生（复选框被隐藏并使用它们自己的），所以我“只”需要弄清楚我需要哪些样式在哪里。太棒了。

【参考方案1】：

如果其他人使用没有 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;