如何在 angular ui.grid 中查找哪一列已排序以及排序顺序

Question

如何查找 angular ui.grid 中哪一列已排序以及排序顺序。其实我想设置基于服务器的分页。为此，我要将参数中的数据作为 {pageNumber、pageSize、column、order} 发送。现在如何找到用户在 angular ui.grid

中排序的列（姓名/年龄/号码）以及排序顺序（ASC / DESC）

Answer 1

Angular ui-grid 在对列进行排序后启动 sortChanged 事件。您还必须明确地将 useExternalSorting 设置为 true。

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

$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 推入单元格 header 来完成：-

$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才能得到当前控制器的作用域

如何在 angular ui.grid 中查找哪一列已排序以及排序顺序

How to find which column was sorted and in what order in angular ui.grid

angularjs

angular-ui

angular-ui-grid

angular-ui-select