angularjs - 如何查找已排序的列以及角度 ui.grid 中的排序顺序

Question

如何在角度 ui.grid 中查找已排序的列和顺序。其实我想设置基于服务器的分页。为此，我将参数中的数据发送为 {pageNumber，pageSize，column，order}。现在如何在角度 ui.grid 中查找用户已排序的列（姓名/年龄/编号）以及按什么顺序（ASC / DESC）

Answer 1

对列进行排序后，Angular ui-grid 会启动 sortChanged 事件。您还必须显式设置useExternalSorting为 true。

您可以在函数的 gridOptions 中捕获此事件，onRegisterApi并在回调函数中处理排序逻辑，该函数将网格和已排序列的数组作为参数，如下所示：

$scope.gridOptions = {
    useExternalSorting: true,
    columnDefs: [
       ...
    ],
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
      $scope.gridApi.core.on.sortChanged( $scope, function(grid, sortColumns){

          // sortColumns is an array containing just the column sorted in the grid
          var name = sortColumns[0].name; // the name of the first column sorted
          var direction = sortColumns[0].sort.direction // the direction of the first column sorted: "desc" or "asc"

          // Your logic to do the server sorting
      });
    }
};

Answer 2

这也可以通过将 div 推入单元格标题来完成：-

$scope.gridOptions = {

        enableSorting: true,
        enablePaginationControls: false,
        paginationPageSize: 25,

        columnDefs: [

          { field: 'name' },
          { field: 'gender',
              headerCellTemplate : "<div class='ui-grid-cell-contents has-sort'>"
                + "<a ng-click='grid.appScope.testFunction(\"gender\")'>Gender <i class='fa fa-sort' ></i></a>"
                +"</div>"
          },
          { field: 'company' }
        ],

        data : [
            {
                "name": "Ethel Price",
                "gender": "female",
                "company": "Enersol"
            },
            {
                "name": "Claudine Neal",
                "gender": "female",
                "company": "Sealoud"
            },
            {
                "name": "Beryl Rice",
                "gender": "female",
                "company": "Velity"
            },
            {
                "name": "Wilder Gonzales",
                "gender": "male",
                "company": "Geekko"
            },
            {
                "name": "Georgina Schultz",
                "gender": "female",
                "company": "Suretech"
            },
            {
                "name": "Carroll Buchanan",
                "gender": "male",
                "company": "Ecosys"
            }
        ]
      };

$scope.testFunction = function(columnName) {
    console.log("Sorting..."+columnName);
}

所以 headerCellTemplate 会将 div 推送到 HTML 中：-

<div class='ui-grid-cell-contents has-sort'>
   <a ng-click='grid.appScope.testFunction('gender')'> Gender <i class='fa fa-sort'></i></a>
</div>

此外，您还可以在控制器中切换列的顺序。

注意：需要添加 grid.appScope 才能获取当前控制器的作用域。