angularjs - 在 wijmo 网格 angular2 的开头添加新的空行

Question

我试图在单击外部按钮时在网格的开头添加一个新的空行。网格显示非常好。

<wj-flex-grid #flex 
    [itemsSource]="data" 
    [isReadOnly]="true" 
    [headersVisibility]="'Column'" 
    [selectionMode]="'ListBox'" 
    (selectionChanged)="gridSelectionChange($event, flex)" 
    (loadedRows)="onGridLoaded($event)">
</wj-flex-grid>

和使用 collectionView 的数据:

this.data = new wjcCore.CollectionView(records);

使用[allowAddNew] = 'true'，默认在底部添加新行。但我想在按钮点击开始时添加。

更新:

addNewRow(ctl) {
    this.data.addNew();
}

addNewRow 工作正常但在 bottom 中添加:

<a (click)="addNewRow(flex)">add new</a>

请帮助我如何实现这一目标。

谢谢

Answer 1

为了将新行设置在顶部，wijmo grid 提供了一个属性newRowAtTop。

修改你的代码如下:

<wj-flex-grid #flex 
    [newRowAtTop] = "true"
    [itemsSource]="data" 
    [isReadOnly]="true" 
    [headersVisibility]="'Column'" 
    [selectionMode]="'ListBox'" 
    (selectionChanged)="gridSelectionChange($event, flex)" 
    (loadedRows)="onGridLoaded($event)">
</wj-flex-grid>

注意上面代码中的[newRowAtTop] = "true"部分。

newRowAtTop 的以下描述是从 this 复制的链接:

Gets or sets a value that indicates whether the new row template should be located at the top of the grid or at the bottom.

If you set the newRowAtTop property to true, and you want the new row template to remain visible at all times, set the frozenRows property to one. This will freeze the new row template at the top so it won't scroll off the view.

The new row template will be displayed only if the allowAddNew property is set to true and if the itemsSource object supports adding new items.