Ng2-smart-table bind 'Add New' button event to an external button

问题

I have been using ng2-smart-table plugin for the table grid. There is an Add new button to add entry into the table.

But i just want to trigger the 'Add new' event from an external button (May be top of the table but not within the table). There is a feature already available in the ng2-smart-table which is completely reverse to my requirement. That can be achieved by using 'mode:external'

Currently this is open with their Github page as an issue.

If they don't have an option with Ng2-smart-table. Is there anyway to bind an event to other buttons(External) in Angular 6? If so, Please give me how to do it in Angular 6.

Any help would be greatly appreciated.

回答1:

You can trigger the ng2-smart-table's create event via DOM object event.

Let's say my ng2-smart-table's add button settings

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,
    }

then on click of your external button trigger the click of 'add' button in the ng2-smart-table like

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

回答2:

You need to use LocalDataSource or ServerDataSource.

I had the same question, and after trying some examples, I saw the good one here. In this part of the code they use the data source method load(data) with source(LocalDataSource):

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

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

Then i try with my code and did the same with LocalDataSource, but to add a row into the table I did this:

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

And it work for me. I hope it helps.

回答3:

try it: on your html:

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

on your component: @ViewChild('smartTable') smartTable; . . . addRecord() { this.smartTable.grid.createFormShown = true; this.smartTable.grid.getNewRow(); }

来源：https://stackoverflow.com/questions/51712119/ng2-smart-table-bind-add-new-button-event-to-an-external-button