Question

我正在使用 ng2-smart-table https://akveo.github.io/ng2-smart-table/#/documentation

实时演示： http://akveo.com/ngx-admin/pages/tables/smart-table

请帮助我解决以下问题：

我想选择多行并调用一个函数，所以我需要在ng2-smart-table中编写此代码？
我可以选择多行并在选定的行上调用一个函数吗？

我已经在.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>

Answer 1

我对这个库不太熟悉，但是以下内容应该会有所帮助：

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);
  }

Answer 2

在ng2-smart-table的设置（[settings]="settings"）中，添加以下行以启用选择多个行：

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>

Answer 3

1-我想选择多行并调用一个函数，所以我需要在ng2-smart-table中编写此代码？

答案：

要在ng2-smart-table中选择多行，您需要在settings对象中添加配置。

示例：

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的事件，我们可以使用该事件获取所有选定的行，然后调用一个函数对所有选定的行进行处理。

示例：

第一步：在模板中添加事件处理程序

<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

如何使用复选框选择ng2-smart-table组件中的多行？

3 个答案: