如何在 ng2 智能表的最后一行之后添加行？

Question

任何人都可以幫助解決這個問題。 是否可以在 ng2 智能表中單擊添加新按鈕的最后一行后添加新行。 如果是這樣，你能幫我解決這個問題/屬性嗎？ 請在下面找到代碼。

static settings= {
      add: {
        addButtonContent: '<i class="nb-plus"></i>',
        createButtonContent: '<i class="nb-checkmark"></i>',
        cancelButtonContent: '<i class="nb-close"></i>',
        confirmCreate: true
      },
      edit: {
        editButtonContent: '<i class="nb-edit"></i>',
        saveButtonContent: '<i class="nb-checkmark"></i>',
        cancelButtonContent: '<i class="nb-close"></i>',
      },
      delete: {
        deleteButtonContent: '<i class="nb-trash"></i>',
        confirmDelete: false,
      },
      columns: {
         options: {
            title: 'Options',
            type: 'html',
            width:"30%",
            editor:{
              type:'list',
              config:{
                selectText: 'Select',
                list:[{value:'Option1',title:'Option1'},
                {value:'Option2',title:'Option2'},
                {value:'Option3',title:'Option3'},
                {value:'Option4',title:'Option4'}]
              }
            }
          },
          values: {
            title: 'Values',
            width:"70%",
            type: 'html',
          },
        },
    };

[從表中添加新行按鈕的圖片] 1

HTML：

<ng2-smart-table [settings]="settings" [source]="settingsSource"
                    (createConfirm)="validateRecord($event,'cmd')">
</ng2-smart-table>  

validateRecord(event,module){
    if(module == 'cmd'){
      if (event.newData.command !== ""){
        event.confirm.resolve(event.newData);
        this.emptyRecordError = false;
      }
    }
  }

我的要求是，每次當我點擊添加按鈕時，該行都必須添加為最后一行。

Answer 1

確保add.confirmCreate設置為true ，這是給你的。

添加(createConfirm)事件監聽器

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

Append 回調中的數據，拒絕被前置的數據。

  create(event: { newData: Object; source: DataSource; confirm: Deferred }) {
    event.source.append(event.newData);
    event.confirm.reject();
  }

你需要這些導入

import { DataSource } from 'ng2-smart-table/lib/lib/data-source/data-source';
import { Deferred } from 'ng2-smart-table/lib/lib/helpers';

在此處挖掘源代碼： https://github.com/akveo/ng2-smart-table/blob/master/projects/ng2-smart-table/src/lib/lib/grid.ts我能夠找到一個之后關閉創建框的方法

  create(event: { newData: Object; source: DataSource; confirm: Deferred }) {
    event.source.append(event.newData);
    event.confirm.resolve.skipAdd = true;
    event.confirm.resolve();
  }