typescript 如何在Ngx-datable表中只选中1个复选框?

qlvxas9a  于 2023-06-24  发布在  TypeScript
关注(0)|答案(2)|浏览(135)

我有一个ngx-datatable切换复选框,一次只需要选择1个复选框。
我尝试使用以下内容访问事件:
html

<ngx-datatable 
  class="margin-left bootstrap" 
  [rows]="rows" 
  [loadingIndicator]="'true'" 
  [rowHeight]="'30'"
  [reorderable]="'true'" 
  [scrollbarH]="'true'" 
  [columnMode]="'standard'" 
  [columns]="columns"
  [selectionType]="'checkbox'"
  [selectAllRowsOnPage]="false"
  (select)='onSelect($event)'>    
  </ngx-datatable>

但是事件只包含所选择的内容。有没有办法取消选中除了最后一个复选框之外的所有内容?

shstlldc

shstlldc1#

Swimlane提供了一个关于如何清除所有选择here的示例,并在此处进行了演示。请注意页面顶部的“删除”按钮。
要点是使用@Inputs [selected]并更新@Output (select)

component.html

<ngx-datatable 
  class="margin-left bootstrap" 
  [rows]="rows" 
  [loadingIndicator]="'true'" 
  [rowHeight]="'30'"
  [reorderable]="'true'" 
  [scrollbarH]="'true'" 
  [columnMode]="'standard'" 
  [columns]="columns"
  [selectionType]="'checkbox'"
  [selectAllRowsOnPage]="false"
  (select)='onSelect($event)'>    
  </ngx-datatable>

component.ts

export class MyComponent {

  selected = [];

  onSelect({ selected }) {
    this.selected = [];
    this.selected.push(...selected);
  }

}
kd3sttzy

kd3sttzy2#

使用值radio而不是复选框。示例:

<ngx-datatable 
  class="margin-left bootstrap" 
  [rows]="rows" 
  [loadingIndicator]="'true'" 
  [rowHeight]="'30'"
  [reorderable]="'true'" 
  [scrollbarH]="'true'" 
  [columnMode]="'standard'" 
  [columns]="columns"
  [selectionType]="'radio'"
  [selectAllRowsOnPage]="false">    
  </ngx-datatable>

相关问题