使用ngx-datatable删除行
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用ngx-datatable删除行相关的知识,希望对你有一定的参考价值。
我正在尝试从ngx-datatable中删除我的第一行。我在这个html的工作顶部创建了一个按钮:
<button (click)="onRemoveRow(0)">Remove First Row</button>
<ngx-datatable
#table
class='material'
[columns]="columns"
[columnMode]="'force'"
[rowHeight]="'auto'"
[rows]='temp'
[headerHeight]="50"
[footerHeight]="50"
[limit]="5"
[rowClass]="getRowClass"
[selected]="selected"
[selectionType]="'checkbox'">
</ngx-datatable-column>
<ngx-datatable-column name="Site" >
<ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
Site
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Filiere" >
<ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
Filiere
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Type" >
<ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
Type
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="TypeSource" >
<ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
TypeSource
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="MotifNotif" >
<ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
MotifNotif
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Canal">
<ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
Canal
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Modele" >
<ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
Modele
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="ChoixDefaut" >
<ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
ChoixDefaut
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
我尝试使用拼接方法:
rows = [
{ site : 'Site1', filiere: 'ADE', type : 'AAAB', typeSource : 'ADH', motifNotif : 'AR',
canal: 'EMAIL', modele: 'ME1', choixDefaut: ''},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'ADH', motifNotif : 'AR',
canal: 'EMAIL', modele: 'ME2'},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'ADH', motifNotif : 'AR',
canal: 'EMAIL', modele: 'ME22', choixDefaut: ''},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'ADH', motifNotif : 'RET',
canal: 'EMAIL', modele: 'ADH'},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'ADH', motifNotif : 'RET',
canal: 'EMAIL', modele: 'MEX', choixDefaut: ''},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'ADH', motifNotif : 'TRT',
canal: 'SMS', modele: 'MS1'},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'ADH', motifNotif : 'TRT',
canal: 'EMAIL', modele: 'EMY', choixDefaut: ''},
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'RH', motifNotif : 'AR',
canal: 'SMS', modele: 'MSA', choixDefaut: '' },
{ site: 'Site1', filiere: 'ADP', type: 'AAAA', typeSource : 'RH', motifNotif : 'RET',
canal: 'EMAIL', modele: 'MEF'},
];
onRemoveRow(index : number) {
this.rows.splice(0, 1);
this.rows = [...this.rows];
}
但是,我不知道为什么这是我删除的最后一行。即使我更改了我的函数的索引,结果也是一样的。首先,我想知道是否有更好的方法从我的表中删除行。此外,我非常有兴趣了解为什么我的代码无法正常工作。
谢谢。
答案
所以在我完成一些研究后,我的阵列被“过滤”了。
// Remove file
//row is passed by (click)="removeFile(row) in html"
removeFile(row) {
// you need this due to https://swimlane.gitbook.io/ngx-datatable/change-detection
this.filetitle = this.arrayRemove(this.filetitle, row.name)
}
arrayRemove(array, rowName) {
return array.filter(function(element){
return element.name != rowName;
});
}
你可以通过传递$event
(点击)获得你的价值,然后得到event.target.value
。
另一答案
它仅删除第一个元素,因为您对所有站点具有相同的名称,您将其视为最后一个元素。
以上是关于使用ngx-datatable删除行的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 ngx-datatable 实现服务端分页+服务端排序
如何使用 jquery 从 asp.net 视图模型中动态删除行而不删除集合中的其余下一个对象