如何使用复选框选择ng2-smart-table组件中的多行? [英] How to select multiple rows in ng2-smart-table component with checkbox?

问题描述

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

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

Live Demo: http://akveo.com/ngx-admin/pages/tables/smart-table

请帮助我解决以下问题:

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

1. I want to select multiple rows and call one function so where I need to write this code in ng2-smart-table?

我可以选择多行并在选定的行上调用一个函数吗?

Can I select multiple rows and call one function on selected rows ?

我已经在.ts和.html文件中编写了以下代码:

I have written below code in .ts and .html files:

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>

推荐答案

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

答案:

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

For selecting multiple rows in ng2-smart-table, you need to add configuration in your 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的事件，我们可以使用该事件获取所有选定的行，然后调用一个函数对所有选定的行进行处理.

ng2-smart-table have an event to get userSelectedRows, we can use that event to get all the selected rows and then call a function to do something with all selected rows.

示例:

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

<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中创建事件处理程序以获取选定的行
• Step2: Create event handler in component.ts to get the selected rows

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

• 第3步:创建按钮并调用函数以对选定的行执行操作
• Step3: Create button and call a function to do something with selected rows

html

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

component.ts

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

在这里您可以看到它正在运行: https://stackblitz.com/编辑/example-ng2-smart-table-18qsws

Here you can see this in working: https://stackblitz.com/edit/example-ng2-smart-table-18qsws

这篇关于如何使用复选框选择ng2-smart-table组件中的多行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！