ui-grid入門教程（二）

weixin_34236497發表於2016-05-20
UI

這部分講解ui-grid的排序功能，排序功能是預設存在的，可以在ui-grid設定enableSorting識別符號來設定 enable/disable。<p>
/需要注意的是：需要引入<code>ngAnimate</code>模組。/
（1）通過設定enableSorting: false在列上禁止排序。

（2）多列也能夠被排序，比如點選了gender然後點選name

（3）點選選單排序，這個排序效果是疊加性質的。比如你點選量一個按鈕排序，在點選另外一個按鈕排序，這個效果是疊加性質的，而不是取代。

（4）當點選頭部的時候，會移除所有的排序。

（5）當編輯資料的時候表格排序是自己重新計算的。當在後臺更改資料的時候，需要重新計算的時候，需要呼叫<code> gridApi.core.notifyDataChange( uiGridConstants.dataChange.EDIT )</code>來進行通知。

（6）可以通過為列設定<code> suppressRemoveSort: true</code>來設定預設的排序。

（7）點選一個列表的頭部，排序先是向上，然後向下，最後是沒有排序效果。

（8）排序演算法是基於列表型別的，ui-grid能夠自動猜測這個資料型別。但是還可以顯示的設定列表型別，讓其自動計算。

（9）可以通過<code> sortingAlgorithm</code>自定義排序演算法。

<!doctype html>
<html ng-app="app">
 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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>

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

相關文章