如何使用ngx-datatable中的代码选择所有行

Question

我正在使用 ngx-datatable 列出一些我想使用函数调用选择所有行的用户。有什么办法吗？我正在使用角度 4

Answer 1

编辑 1

我的旧答案有一些负面影响，我花了一些时间来深入研究。据我了解，由于您只能勾选标题中的全选按钮，因此 DatatableComponent 下有一个 onHeaderSelect() 函数，如果我们从外部触发它，它的作用就像全选复选框单击。

代码如下。

export class DatatableVerticalComponent implements OnInit {

    public rows = [{prop1:1, prop2:2},{prop1:3, prop2:4}];

    @ViewChild(DatatableComponent) ngxDatatable: DatatableComponent;

    onSelectAllClick() {
        this.ngxDatatable.onHeaderSelect(true);
    }

}

旧答案

由于我删除了标题行，因此无法使用默认复选框功能

http://swimlane.github.io/ngx-datatable/#chkbox-selection

我做了一个快速的解决方法来从 ngx-datatable 之外选择所有行。

代码：

export class DatatableVerticalComponent implements OnInit {

    public rows = [{prop1:1, prop2:2},{prop1:3, prop2:4}];

    @ViewChild(DatatableComponent) ngxDatatable: DatatableComponent;

    onSelectAllClick() {
        this.ngxDatatable.selected = this.rows;
    }

}

解释：

首先，您将 视为 component.ts 文件中的 ViewChild。现在 ngx-datatable 将选定的行保留为数组

/**
   * List of row objects that should be
   * represented as selected in the grid.
   * Default value: `[]`
   */
@Input() selected: any[] = [];

由于我在DatatableComponent中没有找到设置选中行的函数，所以我只是用ViewChild来设置选中的变量。我没有使用 [@Input] 创建数据绑定，因为我不想给人留下我一直在从外部代码控制选择的印象。