Angular ui-grid 2.0 與 3.0 版本區別

這兩天用到了Angular的ui-grid插件。網上能搜到的教程基本上是基於2.0版本的，現把3.0版本的不同點列出來，以免入坑。

Upgrading from 2.x to 3.0

ui-grid 3.0 is a substantial upgrade from ng-grid 2.x, with the majority of the code base having been rewritten. Where possible the configuration is backward compatible, but some concepts have changed in ways that require code change to integrate.

This tutorial covers the key elements that may require adjusting in your application.

Module Name

Previously you included the grid within your application using:

1. angular.module( 'yourApplication', [
2. 'ngGrid'
3. ]);

You now include ui.grid instead, and may optionally also include the modules for features that you choose to enable:

1. angular.module( 'yourApplication', [
2. 'ui.grid',
3. 'ui.grid.edit'
4. ]);

Grid Directive

Similarly, the directive name has changed, and you may choose to include additional features within your grid.

Previously you had:

1. <div class="gridStyle" ng-grid="gridOptions"></div>

You now include multiple directives for each of the features you wish to use:

1. <div class="gridStyle" ui-grid="gridOptions" ui-grid-edit></div>

Update columnDefs

All columns must have a name or a field. If you have columns that have neither you need to define one. Name will be derived from field if not present.

1. $scope.gridOptions = {
2. columnDefs: [
3. {field: 'id', displayName: 'Id'},
4. {field: 'name', displayName: 'Name'},
5. {displayName: 'Edit', cellTemplate: '<button id="editBtn" type="button" class="btn-small" >Edit</button> '}
6. ]
7. };

Becomes:

1. $scope.gridOptions = {
2. columnDefs: [
3. {field: 'id', displayName: 'Id'},
4. {field: 'name', displayName: 'Name'},
5. {name: 'edit', displayName: 'Edit', cellTemplate: '<button id="editBtn" type="button" class="btn-small" ng-click="edit(row.entity)" >Edit</button> '}
6. ]
7. };

String values are no longer supported for columns defs:

1. $scope.myColDefs = {[...]};
2. $scope.gridOptions.columnDefs = 'myColDefs'

1. $scope.gridOptions.columnDefs = $scope.myColDefs = [...];

or

1. $scope.gridOptions.columnDefs = [...];

Accessing cell values

In 2.x you would use row.getProperty(col.field) within a cellTemplate to get the value of a cell. In 3.0 this has changed to grid.getCellValue(row, col).

Grid now uses isolate scope

The grid now uses an isolate scope, meaning that the scope on your controller is not directly accessible to widgets that you include in the grid. You can get the parent scope used by the ui-grid element in any template with the grid.appScope property.

1. $scope.gridOptions = {
2. columnDefs: [
3. {field: 'id', displayName: 'Id'},
4. {field: 'name', displayName: 'Name'},
5. {name: 'edit', displayName: 'Edit', cellTemplate: '<button id="editBtn" type="button" class="btn-small" ng-click="edit(row.entity)" >Edit</button> '}
6. ]
7. };

becomes:

1. $scope.gridOptions = {
2. columnDefs: [
3. {field: 'id', displayName: 'Id'},
4. {field: 'name', displayName: 'Name'},
5. {name: 'edit', displayName: 'Edit', cellTemplate: '<button id="editBtn" type="button" class="btn-small" ng-click="grid.appScope.edit(row.entity)" >Edit</button> '}
6. ]
7. };

Separate features

Many elements included by default in ng-grid have now been shifted into separate features, allowing the core ng-grid to be kept smaller and faster. Features are enabled only when included, inclusion of a feature requires both including the module in your application and adding the feature directive onto the grid definition.

Features include:

• column resizing
• selection
• cell navigation and selection of individual cells
• editing in place

For example, to include the selection feature, you would include the module:

1. angular.module( 'yourApplication', [
2. 'ui.grid',
3. 'ui.grid.selection'
4. ]);

and include the relevant directive on the grid that you wish to have access to the feature:

1. <div class="gridStyle" ui-grid="gridOptions" ui-grid-edit ui-grid-selection></div>

Filtering and Sorting

The filtering api changes substantially, as filters are now per-column rather than for the grid as a whole. Refer the filtering documentation, the key change is that filters are now stored on the individual columns rather than as a single filterOptions element.

Sorting behaviour changes somewhat, and again sort options are moved onto the individual columns, along with provision of a "priority" element within the sortOptions.