Angularjs ng-grid 升级到 UI-Grid

2016/05/03 10:28

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

<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

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

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.

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:

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:

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

1
3 收藏

0 评论
3 收藏
1