1

我使用这个插件在 angualar 2 中创建一个智能表：

https://akveo.github.io/ng2-smart-table/#/documentation

我需要自定义表格。

即）只有当用户单击“创建”链接时，才应该触发该事件，他们的文档说：

'create' 事件：点击创建按钮后触发。仅当表模式 = 外部时触发。

需要知道如何设置外部模式，因为我在他们的文档中找不到任何地方。

截至目前，我正在使用：

<ng2-smart-table [settings]="settings" [source]="source" (userRowSelect)="onUserRowSelect($event)"  class="table table-hover table-striped"></ng2-smart-table>

onUserRowSelect(event): void {
   //But this event triggers whenever(wherever in the table) user clicks, which is dont want !
}

需要建议！

4

2 回答 2

4

1）设置ng2-smarttable的设置对象如下

settings = {

        mode: 'external',
    add: {
      addButtonContent: '<i class="ion-ios-plus-outline"></i>',
      createButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent: '<i class="ion-close"></i>',



    },
    edit: {
      editButtonContent: '<i class="ion-edit"></i>',
      saveButtonContent: '<i class="ion-checkmark"></i>',
      cancelButtonContent: '<i class="ion-close"></i>',


    },
    delete: {
      deleteButtonContent: '<i class="ion-trash-a"></i>',
      confirmDelete: true
    },
    columns: {
      id: {
        title: 'ID',
        type: 'number'
      },
      name: {
        title: 'Name',
        type: 'string'
      },
      lastName: {
        title: 'Last Name',
        type: 'string'
      },
      username: {
        title: 'Username',
        type: 'string'
      },
      email: {
        title: 'E-mail',
        type: 'string'
      },
      age: {
        title: 'Age',
        type: 'number'
      }
    }
  };

2) 在 html 页面中定义设置和来源

 <ng2-smart-table [settings]="settings"  [source]="source" (create)="openCreateDialog($event)"></ng2-smart-table>

您可以在单击创建按钮时执行任何您想要的操作。在您的 ts 文件中定义 openCreateDialog 函数，如下所示

openCreateDialog(event) {

    //logic
  }
于 2017-07-25T09:54:45.673 回答
0

我通过使用他们的 (createConfirm) 事件来实现，例如：

<ng2-smart-table [settings]="view_update_items_settings" [source]="source" (createConfirm)="onCreateConfirm($event)"  class="table table-hover table-striped"></ng2-smart-table>

在 .ts 文件中：

onCreateConfirm(event) {
    ...
}
于 2017-07-19T11:33:31.183 回答