二、UI-Grid 排序

最新推荐文章于 2024-08-01 15:20:50 发布

西柚叨叨

最新推荐文章于 2024-08-01 15:20:50 发布

阅读量6.4k

点赞数

分类专栏： angularjs ui-grid中文api 文章标签： angularjs

原文链接：https://xiyoudaodao.gitee.io/ui-grid/ui-grid-sorting/

版权

angularjs ui-grid中文api 专栏收录该内容

35 篇文章 11 订阅

订阅专栏

原文：102Sorting
UI-Grid 默认允许排序。可以在grid options 中设置enableSorting 标签来启用和关闭它。

注意：可以通过访问列菜单来排序列。如果希望菜单有下拉的效果必须引入ngAnimate，但在项目中不是必须引入的。

在columnDefs中可以通过设置 enableSorting: false 来禁用排序。可以看下面例子中的最后一列。

可以通过shift+click同时选中2列排序。

在使用菜单进行排序时，类别是添加的。因此，如果有一列排序，然后又选择另一列排序，它将是2列都添加到现有的排序上，而不是取代它。如果您不想对列进行排序，可以在现有列上使用“remove sort”选项。

当使用表头排序时，单击表头会移除所有其他类型，除非shift+click。

如果修改数据后想重新计算，可以通过 gridApi.core.notifyDataChange( uiGridConstants.dataChange.EDIT )通知表格数据已经被修改。

如果设置了默认排序，则可以通过设置suppressRemoveSort: true防止用户移除该排序。用户可以改变排序的方向，但是没有“remove sort”选项。

当单击列标题，排序方向会循环着上升，下降，然后重新排序。你可以通过在columnDef option中设置sortDirectionCycle 选择跳过这部分或者重新安排。

根据列类型选择排序算法。ui-grid将根据数据猜测类型，如果在列之后异步加载的数据，通常会默认所有的列都是字符串。可以在列定义中显式地设置列类型 type=‘number’。columnDef可以使用的类型包括字符串、数字、日期和numberstr。如果使用日期，则需要一个JavaScript日期对象。

可以通过columnDef option中设置sortingAlgorithm来自定义排序算法。排序算法接受带参的function()方法，像“a”，“b”，“rowA”，“rowB’，和’direction’，来分别对行和当前的方向进行排序。

默认的排序算法也会应用在列筛选上。columnDef option的sortCellFiltered 可以设置排序后的列筛选。例子可以参照AllFeatures 教程的“Month Joined”列。

源码：

index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="/release/ui-grid.js"></script>
    <script src="/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      Click on a column header to sort by that column. (The third column has sorting disabled.)
      To demonstrate the live sorting we provide a button that toggles the gender of Alexander Foley.
      Sort by gender (ASC - so click twice) then name (using shift click), so that Alexander is at the top of the grid,
      then click the toggleGender button.
    
      <br>
      <br>
      <button id='toggleGender' ng-click='toggleGender()' class="btn btn-success" >Toggle Gender</button>
      <div id="grid1" ui-grid="gridOptions1" class="grid"></div>
    
      <br>
      You can set an initial sort state for the grid by defining the `sort` property on your column definitions.
      The `direction` sub-property says which way to sort, and the `priority` says what order to sort the columns
      in (lower priority gets sorted first).
      <br>
      <br>
    
      <div id="grid2" ui-grid="gridOptions2" class="grid"></div>
    </div>
  </body>
</html>

main.css

.grid {
  width: 500px;
  height: 200px;
}

app.js

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
 
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
  $scope.gridOptions1 = {
    enableSorting: true,
    columnDefs: [
      { field: 'name' },
      { field: 'gender' },
      { field: 'company', enableSorting: false }
    ],
    onRegisterApi: function( gridApi ) {
      $scope.grid1Api = gridApi;
    }
  };
 
  $scope.toggleGender = function() {
    if( $scope.gridOptions1.data[64].gender === 'male' ) {
      $scope.gridOptions1.data[64].gender = 'female';
    } else {
      $scope.gridOptions1.data[64].gender = 'male';
    };
    $scope.grid1Api.core.notifyDataChange( uiGridConstants.dataChange.EDIT );
  };
 
   $scope.gridOptions2 = {
    enableSorting: true,
    onRegisterApi: function( gridApi ) {
      $scope.grid2Api = gridApi;
    },
    columnDefs: [
      {
        field: 'name',
        sort: {
          direction: uiGridConstants.DESC,
          priority: 1
        }
      },
      {
        field: 'gender',
        sort: {
          direction: uiGridConstants.ASC,
          priority: 0,
        },
        suppressRemoveSort: true,
        sortingAlgorithm: function(a, b, rowA, rowB, direction) {
          var nulls = $scope.grid2Api.core.sortHandleNulls(a, b);
          if( nulls !== null ) {
            return nulls;
          } else {
            if( a === b ) {
              return 0;
            }
            if( a === 'male' ) {
              return 1;
            }
            if( b === 'male' ) {
              return -1;
            }
            if( a == 'female' ) {
              return 1;
            }
            if( b === 'female' ) {
              return -1;
            }
            return 0;
          }
        }
      },
      { field: 'company', enableSorting: false  }
    ]
  };
 
 $http.get('/data/100.json')
    .success(function(data) {
      $scope.gridOptions1.data = data;
      $scope.gridOptions2.data = data;
    });
}]);

demo
例一
这里写图片描述