如何在AG-Grid Angular中实现客户端数据排序与搜索？

完全可行。AG-Grid原生支持客户端数据操作，即使数据通过服务端分页加载，只要当前页的数据已加载到客户端，就可以对这部分数据执行排序、搜索操作；若需全局跨分页的排序/搜索，则需结合服务端接口调整，以下是纯客户端针对当前页数据的实现步骤：

一、客户端排序实现 #

1. 基础排序配置 #

在AG-Grid的列定义中，为需要支持排序的列设置sortable: true，列头会自动出现排序按钮，点击后AG-Grid将自动对当前客户端数据执行排序：

columnDefs = [
  { field: 'id', sortable: true },
  { field: 'name', sortable: true },
  { field: 'age', sortable: true }
];

2. 自定义排序规则（可选） #

如果需要特殊排序逻辑（如字符串不区分大小写、自定义字段排序），可为列定义添加comparator函数：

columnDefs = [
  {
    field: 'name',
    sortable: true,
    comparator: (valueA, valueB) => {
      const lowerA = valueA.toLowerCase();
      const lowerB = valueB.toLowerCase();
      return lowerA.localeCompare(lowerB);
    }
  },
  // 其他列定义
];

二、客户端搜索实现 #

1. 全局快速搜索（所有列模糊匹配） #

通过AG-Grid的quickFilterText属性实现全局搜索，绑定输入框的值即可：

模板代码：

<input type="text" [(ngModel)]="searchKeyword" placeholder="输入关键词搜索">
<ag-grid-angular
  [rowData]="currentPageData"
  [columnDefs]="columnDefs"
  [quickFilterText]="searchKeyword"
  [pagination]="true"
  [paginationPageSize]="10"
  <!-- 其他必要配置 -->
></ag-grid-angular>

组件代码：

searchKeyword = '';
currentPageData: any[]; // 从服务端分页接口获取的当前页数据

2. 特定列精准过滤 #

针对单个列设置过滤组件，用户可在列头的过滤框中执行精准搜索：

columnDefs = [
  { 
    field: 'id', 
    sortable: true, 
    filter: 'agNumberColumnFilter',
    filterParams: { filterOptions: ['equals', 'greaterThan', 'lessThan'] }
  },
  { 
    field: 'name', 
    sortable: true, 
    filter: 'agTextColumnFilter',
    filterParams: { 
      filterOptions: ['contains', 'startsWith'],
      defaultOption: 'contains'
    }
  }
];

注意事项 #

• 上述操作仅对当前已加载到客户端的分页数据生效，若需跨所有分页数据的全局排序/搜索，需将排序规则、搜索关键词传递给服务端API，由服务端处理后返回对应数据（属于服务端操作范畴）。
• 确保AG-Grid的分页配置正确：[pagination]="true"并设置paginationPageSize，保证服务端分页逻辑正常运行。

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