ng2-smart-table将'Add New'按钮事件绑定到外部按钮

时间:2018-08-06 16:36:46

标签: javascript angular angular6 ng2-smart-table

我一直在为表格网格使用ng2-smart-table插件。有一个Add new按钮可将条目添加到表中。

但是我只想从外部按钮触发'Add new'事件(可能在表格的顶部,但不在表格内)。 There is a feature already available in the ng2-smart-table与我的要求完全相反。这可以通过使用'mode:external'

来实现

当前此问题以他们的Github page为开题。

如果他们没有Ng2-smart-table的选项。无论如何,将事件绑定到Angular 6中的其他按钮(外部)吗?如果是这样,请告诉我如何在Angular 6中进行操作。

任何帮助将不胜感激。

3 个答案:

答案 0 :(得分:1)

您可以通过DOM对象事件触发ng2-smart-table的create事件。

假设我的ng2-smart-table的添加按钮设置

add: {
      addButtonContent : '<span class="add"><i class=""></i></span>',
      createButtonContent:'<i class="far fa-save"></i>',
      cancelButtonContent: '<i class="fas fa-times"></i>',
      confirmCreate: true,
    }

然后点击您的外部按钮会触发ng2-smart-table中的“添加”按钮的点击,例如

onAdd(event) {
    $(".add").click();   
  }

答案 1 :(得分:0)

您需要使用LocalDataSource或ServerDataSource。

我有相同的问题,在尝试了一些示例之后,我看到了一个不错的here。 在这部分代码中,他们将data source method load(data)与source(LocalDataSource)结合使用:

constructor(protected service: BasicExampleLoadService) {
   this.source = new LocalDataSource();

   this.service.getData().then((data) => {
     this.source.load(data);
   });
}

然后我尝试使用我的代码并对LocalDataSource进行相同的操作,但是我在表中添加了一行:

this.source.add({
  name: 'name',
  description: 'desc',
  numQuestions: '8',
});
this.source.refresh();

它对我有用。 希望对您有所帮助。

答案 2 :(得分:-1)

尝试: 在您的html上:

<button (click)="addRecord()">Add</button> <ng2-smart-table #smartTable [settings]="settings" [source]="source"></ng2-smart-table>

在您的组件上: @ViewChild('smartTable') smartTable; . . . addRecord() { this.smartTable.grid.createFormShown = true; this.smartTable.grid.getNewRow(); }