ngx-datatable静态与动态列重排及用户偏好保存实现问询

嘿，这个问题我之前也碰到过，核心思路就是把静态列和动态列放到同一个配置数组里统一管理，不管是带自定义逻辑的还是纯展示的列，都用一套规则来处理，这样重排和保存偏好就顺理成章了。下面给你一步步拆解实现方案：

首先我们要把所有列（静态+动态）的配置都整合到一个数组里，给带自定义逻辑的列加个标记，方便后续渲染时区分。比如：

// 先定义列配置的接口，统一字段
interface ColumnConfig {
  prop: string;
  displayName: string;
  minWidth: number;
  sortable: boolean;
  isCustom?: boolean; // 标记是否是带自定义逻辑的列
  customType?: 'ticketNumber' | 'serialNumber' | 'status'; // 自定义列的类型，用来匹配对应模板
}

// 初始化所有列：静态列（带自定义逻辑）+ 动态列
allColumns: ColumnConfig[] = [
  // 静态列（你的3个带自定义逻辑的列）
  {
    prop: 'TicketNumber',
    displayName: 'Ticket Number',
    minWidth: 145,
    sortable: true,
    isCustom: true,
    customType: 'ticketNumber'
  },
  {
    prop: 'SerialNumber',
    displayName: 'Serial Number',
    minWidth: 130,
    sortable: true,
    isCustom: true,
    customType: 'serialNumber'
  },
  {
    prop: 'Status',
    displayName: 'Status',
    minWidth: 120,
    sortable: true,
    isCustom: true,
    customType: 'status'
  },
  // 动态列（把你原来的dynamicColumns转成统一格式）
  ...this.dynamicColumns.map(col => ({
    prop: col.Name,
    displayName: col.DisplayName, // 假设动态列有显示名称字段，没有的话就用col.Name
    minWidth: 130,
    sortable: true,
    isCustom: false
  }))
];

接下来在模板里，我们用ng-template定义好各个自定义列的渲染逻辑，再用ngTemplateOutlet动态匹配对应的模板，不用再分开写静态列和动态列了：

<!-- 先定义各个自定义列的模板 -->
<ng-template #ticketNumberTpl let-value="value" let-row="row">
  <a (click)="displayTicketDetails(row.TicketId)" class="ticketNumberValue" style="cursor: pointer">
    {{ value }}
  </a>
</ng-template>

<ng-template #serialNumberTpl let-value="value" let-row="row">
  <a [routerLink]="['/record', row.RecordId]" class="serial-link">
    {{ value }}
  </a>
</ng-template>

<ng-template #statusTpl let-value="value">
  <span [class]="getStatusIconClass(value)">
    {{ getStatusDisplayText(value) }}
  </span>
</ng-template>

<!-- 通用动态列模板（纯展示的列用这个） -->
<ng-template #defaultColumnTpl let-value="value" let-row="row" let-col="col">
  <label>{{ row[col.prop] | UTCToLocalTime }}</label>
</ng-template>

<!-- 表格主体：遍历统一的allColumns数组 -->
<ngx-datatable 
  [rows]="yourDataList"
  [reorderable]="true" <!-- 开启列重排功能 -->
  (columnReordered)="handleColumnReorder($event)" <!-- 监听重排事件 -->
>
  <ngx-datatable-column 
    *ngFor="let col of allColumns"
    [prop]="col.prop"
    [minWidth]="col.minWidth"
    [sortable]="col.sortable"
    [cellClass]="col.customType === 'ticketNumber' ? IsSLABreach : ''" <!-- 动态绑定cellClass -->
  >
    <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
      <!-- 匹配自定义模板 -->
      <ng-container 
        *ngIf="col.isCustom"
        [ngTemplateOutlet]="getCustomTemplate(col.customType)"
        [ngTemplateOutletContext]="{ value: value, row: row }"
      ></ng-container>
      <!-- 非自定义列用通用模板 -->
      <ng-container 
        *ngIf="!col.isCustom"
        [ngTemplateOutlet]="defaultColumnTpl"
        [ngTemplateOutletContext]="{ value: value, row: row, col: col }"
      ></ng-container>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

然后在组件类里，通过ViewChild获取模板引用，实现模板匹配方法：

@ViewChild('ticketNumberTpl') ticketNumberTpl!: TemplateRef<any>;
@ViewChild('serialNumberTpl') serialNumberTpl!: TemplateRef<any>;
@ViewChild('statusTpl') statusTpl!: TemplateRef<any>;

getCustomTemplate(type?: string): TemplateRef<any> | null {
  switch(type) {
    case 'ticketNumber':
      return this.ticketNumberTpl;
    case 'serialNumber':
      return this.serialNumberTpl;
    case 'status':
      return this.statusTpl;
    default:
      return null;
  }
}

// 这里补上你原来的getStatusIconClass、getStatusDisplayText等方法
getStatusIconClass(status: string): string {
  return status === 'Open' ? 'icon-open' : 'icon-closed';
}

ngx-datatable自带列重排功能，我们只需要监听重排事件，把新的列顺序保存起来（比如localStorage，多用户系统就存到后端），然后在组件初始化时恢复这个顺序：

// 监听列重排事件，保存新顺序
handleColumnReorder(event: any) {
  // 提取重排后的列prop数组，用来保存顺序
  const newOrder = event.columns.map((col: any) => col.prop);
  // 存到localStorage（如果是登录用户，建议存到后端用户配置里）
  localStorage.setItem('userColumnOrder', JSON.stringify(newOrder));
}

// 组件初始化时恢复保存的列顺序
ngOnInit() {
  const savedOrder = localStorage.getItem('userColumnOrder');
  if (savedOrder) {
    const orderedProps = JSON.parse(savedOrder);
    // 根据保存的prop顺序重新排列allColumns
    this.allColumns = orderedProps
      .map((prop: string) => this.allColumns.find(col => col.prop === prop))
      .filter(Boolean); // 过滤掉可能不存在的列（比如动态列有更新的情况）
    
    // 把没在保存顺序里的列（比如新增的动态列）加到末尾
    const missingCols = this.allColumns.filter(col => !orderedProps.includes(col.prop));
    this.allColumns = [...this.allColumns, ...missingCols];
  }
}

如果你的动态列是从后端动态获取的，当动态列发生变化时，要重新合并静态列和新的动态列，再应用保存的顺序：

updateDynamicColumns(newDynamicCols: any[]) {
  // 先保留静态列，再添加新的动态列
  const staticCols = this.allColumns.filter(col => col.isCustom);
  const newDynamicConfigs = newDynamicCols.map(col => ({
    prop: col.Name,
    displayName: col.DisplayName,
    minWidth: 130,
    sortable: true,
    isCustom: false
  }));
  this.allColumns = [...staticCols, ...newDynamicConfigs];
  
  // 重新应用保存的列顺序
  this.restoreColumnOrder();
}

// 把恢复顺序的逻辑抽成单独方法，方便复用
private restoreColumnOrder() {
  const savedOrder = localStorage.getItem('userColumnOrder');
  if (savedOrder) {
    const orderedProps = JSON.parse(savedOrder);
    this.allColumns = orderedProps
      .map((prop: string) => this.allColumns.find(col => col.prop === prop))
      .filter(Boolean);
    const missingCols = this.allColumns.filter(col => !orderedProps.includes(col.prop));
    this.allColumns = [...this.allColumns, ...missingCols];
  }
}

这样下来，不管是静态列还是动态列，都能一起参与重排，而且用户的列顺序偏好也能保存下来，下次登录直接恢复～

内容的提问来源于stack exchange，提问作者Minu