ui-grid入门教程（二）

这部分讲解ui-grid的排序功能，排序功能是默认存在的，可以在ui-grid设置enableSorting标识符来设置 enable/disable。

/需要注意的是：需要引入ngAnimate模块。/
（1）通过设置enableSorting: false在列上禁止排序。

（2）多列也能够被排序，比如点击了gender然后点击name

（3）点击菜单排序，这个排序效果是叠加性质的。比如你点击量一个按钮排序，在点击另外一个按钮排序，这个效果是叠加性质的，而不是取代。

（4）当点击头部的时候，会移除所有的排序。

（5）当编辑数据的时候表格排序是自己重新计算的。当在后台更改数据的时候，需要重新计算的时候，需要调用 gridApi.core.notifyDataChange( uiGridConstants.dataChange.EDIT )来进行通知。

（6）可以通过为列设置 suppressRemoveSort: true来设置默认的排序。

（7）点击一个列表的头部，排序先是向上，然后向下，最后是没有排序效果。

（8）排序算法是基于列表类型的，ui-grid能够自动猜测这个数据类型。但是还可以显示的设置列表类型，让其自动计算。

（9）可以通过 sortingAlgorithm自定义排序算法。

 
 
 
 
 
 
 
 
 
 
 
 
 

 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.
 
 

 

 Toggle Gender
 

 
 

 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).
 

 

 
 

 
 

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

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;
 });
}]);