如何解决如何使用Angular primeNg锁定列?
当必须使用columnDef时如何分隔可滚动列和冻结列?以及如何在此处冻结字段名称为“ sourceName”的列?我可以有两个列数组,一个列用于可滚动列,另一个列用于冻结列吗?我还需要保留原始的columnDef吗?
这是我拥有的component.ts文件:
export class SourceMaintenanceModalComponent implements OnInit{
private readonly emailColumnWidth = '16em';
// Flag to determine if the sources grid changed.
private _sourcesChanged = false;
sources = [];
total = 0;
selectedSource;
loading = false;
pageOptions: PageOptions = {
page: 0,order: 'asc',size: 10,sort: 'defaultSortField',};
/**
* Column names and values for the source table.
* Matches the DTO.
*
* @type {any[]}
* @memberof SpanMaintenanceModalComponent
*/
columns: ColumnDef[] = [
{
field: 'sourceName',name: 'Source Name',validators:
[
DataTableValidators.maxLength(50,(message: string) => this.toastr.error(message)),DataTableValidators.notEqual('ALL SOURCES',false,(message: string) => this.toastr.error(message))
]
},{
field: 'code',name: 'Code',width: '6em',validators: DataTableValidators.maxLength(3,(message: string) => this.toastr.error(message))
},{
field: 'contactEmail',name: 'Design Source Email #1',width: this.emailColumnWidth,validators: [
DataTableValidators.maxLength(100,DataTableValidators.email((message: string) => this.toastr.error(message))
]
},{
field: 'contactEmail2',name: 'Design Source Email #2',{
field: 'contactEmail3',name: 'Design Source Email #3',{
field: 'contactEmail4',name: 'Design Source Email #4',{
field: 'contactEmail5',name: 'Design Source Email #5',{
field: 'userSourceContactEmail1',name: 'User Source Email #1',{
field: 'userSourceContactEmail2',name: 'User Source Email #2',{
field: 'userSourceContactEmail3',name: 'User Source Email #3',{
field: 'userSourceContactEmail4',name: 'User Source Email #4',{
field: 'userSourceContactEmail5',name: 'User Source Email #5',{
field: 'userSourceContactEmail6',name: 'User Source Email #6',{
field: 'userSourceContactEmail7',name: 'User Source Email #7',{ field: 'inside',name: 'Inside?',type: 'checkBox',tooltip: 'Inside Source' },{ field: 'outside',name: 'Outside?',tooltip: 'Outside Source' },{ field: 'cadence',name: 'Cadence?',tooltip: 'Cadence' },{ field: 'designSource',name: 'Design Source?',tooltip: 'Design Source' },{ field: 'constructionSource',name: 'Construction Source?',tooltip: 'Construction Source' },{ field: 'firstUserSource',name: 'First User Source?',tooltip: 'First User Source' },{ field: 'userSource',name: 'User Source?',tooltip: 'User Source' },{ field: 'active',name: 'Active?',tooltip: 'Check Box if source is active.'},];
constructor(
private readonly dialogRef: MatDialogRef<SourceMaintenanceModalComponent>,private readonly sourceMaintenanceApiService: SourceMaintenanceApiService,private readonly addSourceModalService: AddSourceModalService,private readonly cgpConfirmationDialogService: CgpConfirmationDialogService,private readonly toastr: ToastrService
) { }
ngOnInit(){}
private isPageDifferent(page: PageOptions,event: LazyLoadEvent) {
return page.order !== (event.sortOrder === 1 ? 'asc' : 'desc') ||
page.size !== event.rows ||
page.sort !== event.sortField ||
page.page !== (event.first / page.size);
}
onLazyLoad(event: LazyLoadEvent) {
this.selectedSource = null;
if (!this.isPageDifferent(this.pageOptions,event)) {
return;
}
this.pageOptions.order = event.sortOrder === 1 ? 'asc' : 'desc';
this.pageOptions.size = event.rows;
this.pageOptions.sort = event.sortField;
this.pageOptions.page = event.first / this.pageOptions.size;
this.loadSources();
}
loadSources() {
this.loading = true;
this.sourceMaintenanceApiService.getSources(this.pageOptions)
.pipe(finalize(() => this.loading = false))
.subscribe(
(response: any) => {
if (response) {
this.total = response.totalCount;
this.sources = response.data;
}
}
);
}
}
并且html设置为:
<div mat-dialog-content>
<div class="table-holder">
<data-table [data]="sources" [columns]="columns" [filterColumndisplay]="false" [loading]="loading"
[totalRecords]="total" [lazy]="true" [paging]="true" [pageSize]="this.pageOptions.size"
defaultSortField="sourceName" (select)="onGridSelectionChange($event)" (edit)="saveHandler($event)"
(lazyLoad)="onLazyLoad($event)">
<ng-container title>
Source Maintenance
</ng-container>
</data-table>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。