如何使用ngx-datatable

时间:2017-11-23 16:11:07

标签: angular ngx-datatable

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

3 个答案:

答案 0 :(得分:2)

假设您的用户已存储在users道具中,您需要在模板中添加selected输入道具,如下所示:

<ngx-datatable [rows]="users" [selected]="selectedUsers">...

之后,您应该能够选择组件逻辑中的所有用户:

@Component()
export class UsersComponent {
  users: any[];
  selectedUsers: any[];

  /* ... */

  selectAllUsers(): void {
    this.selectedUsers = [...users];
  }
}

请注意,此方法非常简单,只是为了让您了解可能的解决方案。这意味着它还没有经过测试,所以让我知道它是否有效。

答案 1 :(得分: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);
    }

}

OLD ANSWER

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

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]创建数据绑定,因为我不想留下我一直在控制外部代码选择的印象。

答案 2 :(得分:0)

这是一个古老的问题,但我遇到了同样的问题,并认为共享我的解决方案可能会有所帮助。

基于ngxdatatable的代码(github source-我添加了代码段,并且链接可能因代码更改而过时了):

  /**
  * Toggle all row selection
  */
  onHeaderSelect(event: any): void {
    if (this.selectAllRowsOnPage) {
      // before we splice, chk if we currently have all selected
      const first = this.bodyComponent.indexes.first;
      const last = this.bodyComponent.indexes.last;
      const allSelected = this.selected.length === last - first;

      // remove all existing either way
      this.selected = [];

      // do the opposite here
      if (!allSelected) {
        this.selected.push(...this._internalRows.slice(first, last));
      }
    } else {
      // before we splice, chk if we currently have all selected
      const allSelected = this.selected.length === this.rows.length;
      // remove all existing either way
      this.selected = [];
      // do the opposite here
      if (!allSelected) {
        this.selected.push(...this.rows);
      }
    }

    this.select.emit({
      selected: this.selected
    });
  }

onHeaderSelect可以切换所有不需要的行。

我需要选择所有行。

因此,受代码源的启发,我在组件中编写了以下方法:

 @ViewChild(DatatableComponent) ngxDatatable: DatatableComponent;

 ...

 unselectRows(): void {
    const table = this.ngxDatatable;
    const allSelected = table.selected.length === table.rows.length;
    if (!allSelected) {  // Select all only if not already the case
      // Reset the selection first
      table.selected = [];
      // Add all rows to the selection
      table.selected.push(...table.rows);
      // Important: Emit the select event
      table.select.emit({
        selected: table.selected
      });
    }
  }

此解决方案适用于我的用例。

注意:我不使用selectAllRowsOnPage,这可能会引起我在此处未处理的问题。