Angularjs ng-grid 升级到 UI-Grid

为什么80%的码农都做不了架构师？>>>   

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.

从ng-grid 2.x 到ui-grid 3.0是一个重大升级。大部分的代码被重构，配置可能会向后面的版本兼容，一些思想方式已经改变， 需要对集成代码进行修改。

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

本教程涵盖了在应用程序中可能需要调整的关键元素。

Module Name  module名称ngGrid 改为 ui.grid

Previously you included the grid within your application using: 

以前在应用中是这样使用的：

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

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

 你现在用ui.grid 代替，可以选择包含要启用的模块功能，如下添加了 ui.grid.edit 模块：

angular.module( 'yourApplication', [
  'ui.grid',
  'ui.grid.edit'
]);

Grid Directive   grid 指令修改

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

同样，指令的名称也改变了，你可以选择包含grid 的其它功能，如ui-grid-edit;

Previously you had: 

以前使用方式：

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

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

升级后的使用方式，包含了多个要用到的指令：

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

Update columnDefs  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

所有的列必须有name或者field属性，（name或field属性不能为空）。如果列没有定义这两个其中一个属性，那么name 属性将不能得到；

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

String values are no longer supported for columns defs:

字符串值不在支持列定义：

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

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

  or

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

Accessing cell values  获取cell 值方式修改

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

在2.x 版本中使用cellTmmplate 中使用row.getProperty(col.field) 获取一个cell 值。在3.0版本变成了

grid.getCellValue(row,col)。 

Grid now uses isolate scope   grid 现在将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.

grid 现在将grid 作用域隔离，这意味着控制器中不能直接访问grid 中的属性。可以在template 中使用ui-grid 的父作用域grid.appScope；

ng-grid 用法如下：

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

becomes:

ui-grid 用法改变后如下：

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

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.

许多ng-grid 以前默认的功能，现在都已经变成了独立的插件，保留了ng-grid 的核心功能，使grid 更小运行更快。要启用这些插件功能时，需要在js 中引入这些模块和在html 中添加这些指令。

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:

例如，包含selection 插件，需要引入ui.grid.selection 模块：

angular.module( 'yourApplication', [
  'ui.grid',
  'ui.grid.selection'
]);

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

并且在html 中加入要用到的指令 ui-grid-selection：

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

过滤api 同样也有大的改变，过滤器是过滤grid 的每一列而不是过滤整个grid。参考过滤文档，关键变化是现在是每个列都有一个过滤器，而可不是以前一个gird只有一个filterOptions 元素；

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

排序也有变化，排序移动到了列选项中，并提供一个排序优先级 sortOptions 元素。

转载于:https://my.oschina.net/gmd/blog/668987