Как сделать, чтобы выделить все строки, используя код в 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/

Я сделал быстрый обходной путь, чтобы выбрать все строки снаружи 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;
    }

}

Объяснение:

Сначала вы берете в качестве ViewChild в файле component.ts. Теперь ngx-datatable сохраняет выбранные строки в виде массива.

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

Поскольку я не нашел функции для установки выбранных строк в DatatableComponent, я просто использовал ViewChild, чтобы установить выбранную переменную. Я не создавал привязку данных с помощью [@Input], потому что не хочу создавать впечатление, что я постоянно контролирую выбор из внешнего кода.

Answer 2

Предполагая, что ваши пользователи хранятся в users проп, вам нужно будет добавить selected введите опору в таблицу в шаблоне так:

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

После этого вы сможете выбрать всех пользователей в логике компонента следующим образом:

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

  /* ... */

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

Обратите внимание, что этот подход очень упрощен, чтобы дать вам представление о том, как может выглядеть возможное решение. Это означает, что это не было проверено, поэтому дайте мне знать, если это сработало.

Answer 3

Это старый вопрос, но у меня была такая же проблема, и я думаю, что поделиться своим решением может помочь.

На основе кода ngxdatatable (источник на github - я добавляю фрагмент, так как ссылка может устареть с изменениями кода):

  /**
  * 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 что может вызвать проблемы, которые я здесь не рассматривал.