Angular UI Grid：如何获取表格排序后的数据

当然可以拿到排序后的数据集！Angular UI Grid确实会在内部维护一份经过排序、过滤或分页处理后的视图数据副本，我们可以通过Grid提供的API轻松获取这份数据，下面是具体的实现方法：

1. 先保存Grid API实例 #

首先要确保你在配置Grid时，把Grid的API实例保存下来，这样后续才能调用相关方法。通常是在gridOptions的onRegisterApi回调中处理：

$scope.gridOptions = {
  columnDefs: [/* 你的列配置 */],
  data: /* 你的原始数据源 */,
  onRegisterApi: function(gridApi) {
    // 将API保存到$scope或全局服务中，方便后续调用
    $scope.gridApi = gridApi;
  }
};

2. 手动获取排序后的数据 #

当需要主动获取当前排序后的视图数据时，可以使用getVisibleRows()方法，该方法返回当前页面可见的行对象数组，每个行对象的entity属性就是对应的数据条目。我们可以通过map方法提取出纯数据数组：

// 获取当前视图中排序后的纯数据数组
var sortedData = $scope.gridApi.core.getVisibleRows().map(function(row) {
  return row.entity;
});
// 可以在这里使用sortedData做后续操作，比如打印、导出等
console.log("排序后的数据：", sortedData);

3. 监听排序事件自动获取数据 #

如果你想在用户每次完成排序操作后，自动获取最新的排序数据，可以监听Grid的sortChanged事件：

$scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
  // 排序完成后触发此回调
  var sortedData = $scope.gridApi.core.getVisibleRows().map(row => row.entity);
  console.log("排序更新后的数据集：", sortedData);
  // 在这里加入你的业务逻辑，比如更新统计数据、导出数据等
});

4. 获取全量排序后的数据（忽略分页） #

如果你的Grid开启了分页功能，getVisibleRows()只会返回当前页的数据。如果需要获取全量的排序后数据（所有分页的数据），可以调用Grid内部的排序方法：

// 获取全部数据排序后的结果，不受分页影响
var fullSortedData = $scope.gridApi.grid.sorting.sortData($scope.gridOptions.data);
console.log("全量排序后的数据：", fullSortedData);

以上方法在Angular UI Grid 3.x（适配Angular 1.x的稳定版本）中都能正常工作，你可以根据自己的业务场景选择对应的方式~

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