Как выбрать несколько строк в компоненте ng2-smart-table с помощью флажка?

Я использую ng2-smart-table из https://akveo.github.io/ng2-smart-table/#/documentation

Интерактивная демонстрация: http://akveo.com/ngx-admin/pages/tables/smart-table

Помогите мне с вопросами ниже:

  1. Я хочу выбрать несколько строк и вызвать одну функцию, поэтому где мне нужно написать этот код в ng2-smart-table?

  2. Могу ли я выбрать несколько строк и вызвать одну функцию для выбранных строк?

Я написал ниже код в файлах .ts и .html:

smart-table-component.ts:

 actions: {
      add: false,
      edit: true,
      delete: false,
      custom: [{ name: 'ourCustomAction'}],
      position: 'left',
      columnTitle: 'Actions'

    },   

    mode: 'external',

smart-table-component.html:

   <nb-card-body>
    <ng2-smart-table [settings]="settings" allowFiltering='true' allowPaging='true' [source]="windchillData"
     (deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)" (edit)="onEdit($event)">
    </ng2-smart-table>
  </nb-card-body>

typescript angular ng2-smart-table
person Swapnil G Thaware    schedule 02.04.2019    source источник

Ответы (3)


arrow_upward
14
arrow_downward

1- Я хочу выбрать несколько строк и вызвать одну функцию, поэтому где мне нужно написать этот код в ng2-smart-table?

Ответ:

Для выбора нескольких строк в ng2-smart-table вам необходимо добавить конфигурацию в свой settings Object.

Пример:

settings = {
    // This `selectMode` is the configuration for selecting multiple rows in the table using checkbox
    selectMode: 'multi',
    delete: {
      confirmDelete: true,

      deleteButtonContent: 'Delete data',
      saveButtonContent: 'save',
      cancelButtonContent: 'cancel'
    },
    add: {
      confirmCreate: true,
    },
    edit: {
      confirmSave: true,
    },
    columns: {
      // columns configuration
    },
  };

2- Могу ли я выбрать несколько строк и вызвать одну функцию для выбранных строк?

ng2-smart-table есть событие для получения userSelectedRows, мы можем использовать это событие для получения всех выбранных строк, а затем вызвать функцию, чтобы что-то сделать со всеми выбранными строками.

Пример:

  • Шаг 1. Добавьте обработчик событий в шаблон
<ng2-smart-table [settings]="settings" allowFiltering='true' allowPaging='true' [source]="windchillData" (deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)" (edit)="onEdit($event)" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table>
  • Шаг 2. Создайте обработчик событий в component.ts, чтобы получить выбранные строки
onUserRowSelect(event) {
    this.selectedRows = event.selected;
}
  • Шаг 3. Создайте кнопку и вызовите функцию для выполнения каких-либо действий с выбранными строками

Кнопка в html

<button (click)="onClick()"> Get Selected </button>

Обработчик кликов в component.ts

onClick() {
    // It will console all the selected rows
    console.log(this.selectedRows);
  }

Вот это можно увидеть в работе: https://stackblitz.com/edit/example-ng2-smart-table-18qsws

person Johar Zaman    schedule 10.04.2019
comment
когда вы добавляете режим множественного выбора, вы теряете возможность вызывать строку, щелкая по самой строке, она вызывается только при установке флажка - person Abhijeet Khangarot; 21.08.2020

arrow_upward
4
arrow_downward

Я не слишком знаком с этой библиотекой, но следующее должно помочь:

html

<button (click)="logAllSelectedRows()">log All selected</button>
<ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)" (rowSelect)="rowSelectedHandler($event)">

ts

  selectedRows = [];
  rowSelectedHandler(rowData:{isSelected:boolean, data:any}){
    if(rowData.isSelected === false){
      /*remove row*/
      this.selectedRows = this.selectedRows.filter((rowItem)=>rowItem .id !== rowData.data.id)
    }else {
      /*add row*/
      this.selectedRows = [...this.selectedRows, ...rowData.data];
      console.log('added rowdata');
    }
  }

  logAllSelectedRows(){
      console.log(this.selectedRows);
  }
person dasfdsa    schedule 09.04.2019

arrow_upward
3
arrow_downward

В настройках ([settings]="settings") ng2-smart-table добавьте эту строку, чтобы разрешить выбор более одной строки:

selectMode: 'multi',

Затем в своем шаблоне добавьте событие (userRowSelect) в свою ng2-smart-table:

<ng2-smart-table [settings]="settings" allowFiltering='true' allowPaging='true' [source]="windchillData" (deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)" (edit)="onEdit($event)" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table>

В своем компоненте обновляйте список выбранных строк каждые (userRowSelect):

private selectedRows: any;

// ...

onUserRowSelect(event) {
    this.selectedRows = event.selected;
}

По-прежнему в компоненте добавьте функцию, которая делает то, что вы хотите, с выбранными строками:

public doSomething() {
    // Do something with `this.selectedRows`
}

Добавьте кнопку и вызовите свою функцию при нажатии на нее!

<button (click)="doSomething()"> Run code on selected rows! </button>
person Hacène    schedule 09.04.2019