如何使用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 (将#修改为@）