Angular9 ng2-smart-table服务端分页排序及列加锚点实现咨询

一、服务端分页与排序实现 #

核心通过external模式+tableChanged事件触发接口调用，所有本地分页、排序逻辑关闭，完全由服务端返回数据驱动。

实现步骤 #

• 第一步：配置表格基础参数，开启外部处理模式

// 组件内table配置
settings = {
  pager: {
    display: true,
    perPage: 10, // 默认每页展示条数
    mode: 'external' // 关闭本地分页，走服务端分页
  },
  sort: {
    mode: 'external' // 关闭本地排序，走服务端排序
  },
  columns: {
    // 后续补充列配置
  }
}

• 第二步：模板中绑定tableChanged事件，该事件会在点击页码、点击表头触发排序时自动触发

<ng2-smart-table 
  [settings]="settings" 
  [source]="tableData"
  (tableChanged)="loadServerData($event)"
></ng2-smart-table>

• 第三步：实现接口调用方法，提取分页、排序参数请求后端

// 组件属性声明
tableData: any[] = [];
total: number = 0;

loadServerData(event: any) {
  // 提取分页参数
  const page = event.paging.page;
  const pageSize = event.paging.perPage;
  // 提取排序参数
  let sortField = '';
  let sortOrder = '';
  if(event.sort?.length) {
    sortField = event.sort[0].field;
    sortOrder = event.sort[0].direction; // 返回值为asc/desc
  }

  // 调用后端接口
  this.http.post('/api/your-business-list', {
    page,
    pageSize,
    sortField,
    sortOrder
  }).subscribe((res: any) => {
    this.tableData = res.records; // 赋值当前页列表数据
    this.total = res.total; // 赋值总条数，用于分页器计算总页码
    // 更新分页器配置
    this.settings.pager.totalItems = this.total;
    this.settings = Object.assign({}, this.settings);
  })
}

二、指定列添加锚点链接实现 #

通过自定义列渲染组件实现，ng2-smart-table支持custom类型列，指定自定义渲染组件即可实现任意自定义内容。

实现步骤 #

• 第一步：创建自定义锚点渲染组件

// link-render.component.ts
import { Component, Input } from '@angular/core';
import { Cell } from 'ng2-smart-table/lib/lib/data-set/cell';

@Component({
  template: `
    <!-- 内部路由跳转用routerLink，外部链接换成href即可 -->
    <a [routerLink]="['/detail', cell.getRow().getData().id]" target="_blank">
      {{ cell.getValue() }}
    </a>
  `
})
export class LinkRenderComponent {
  // 固定注入cell参数，可获取当前单元格值、当前行全量数据
  @Input() cell: Cell;
}

• 第二步：在所属模块注册自定义组件

// your-module.module.ts
import { NgModule } from '@angular/core';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import { LinkRenderComponent } from './link-render.component';

@NgModule({
  imports: [
    Ng2SmartTableModule,
    // 其他业务依赖
  ],
  declarations: [LinkRenderComponent],
  // Angular 9动态渲染的组件必须加入entryComponents
  entryComponents: [LinkRenderComponent]
})
export class YourBusinessModule {}

• 第三步：在表格列配置中指定自定义组件

// 调整之前的settings配置
settings = {
  // 之前的pager、sort配置不变
  columns: {
    // 要加锚点的列配置
    businessName: {
      title: '业务名称',
      type: 'custom',
      renderComponent: LinkRenderComponent
    },
    // 其他普通列配置
    createTime: {
      title: '创建时间'
    }
  }
}

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