Angular-UI UI-Grid 从2.0升级到3.0版本指南

Angular-UI UI-Grid 从2.0升级到3.0版本指南

ui-grid UI Grid: an Angular Data Grid 项目地址: https://gitcode.com/gh_mirrors/ui/ui-grid

前言

Angular-UI UI-Grid（原ng-grid）是一款功能强大的AngularJS数据表格组件。在从2.0版本升级到3.0版本时，开发者需要注意一些重大变更。本文将详细介绍这些变更点，帮助开发者顺利完成升级。

模块和指令名称变更

最直观的变化是模块和指令名称的改变：

变更前：

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

<div ng-grid="{ data: data }"></div>

变更后：

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

<div ui-grid="{ data: data }"></div>

这一变更反映了项目从"ng-grid"到"ui-grid"的品牌重塑，开发者需要全局替换相关代码。

列定义(columnDefs)处理方式变更

3.0版本对列定义的处理方式做了重要改进：

1. 不再支持字符串引用：2.0版本允许通过字符串引用列定义，3.0版本必须直接使用对象

变更前：

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

变更后：

$scope.gridOptions.columnDefs = $scope.myColDefs = [...];
// 或直接赋值
$scope.gridOptions.columnDefs = [...];

2. 列必须包含name或field属性：每列定义必须至少指定name或field属性之一

变更前：

$scope.gridOptions = {
  columnDefs: [
    { displayName: 'Edit' }  // 缺少name/field
  ],
  data: myData
};

变更后：

$scope.gridOptions = {
  columnDefs: [
    { name: 'edit', displayName: 'Edit' }  // 添加了name属性
  ],
  data: myData
};

隔离作用域(Isolate Scope)变更

3.0版本引入了隔离作用域，这意味着：

• 网格内部无法直接访问父作用域的变量和函数
• 必须通过grid.appScope访问父作用域

变更前：

$scope.gridOptions = {
  columnDefs = [
    { 
      name: 'edit', 
      displayName: 'Edit', 
      cellTemplate: '<button ng-click="edit(row.entity)">Edit</button>' 
    }
  ],
  data: myData
};

变更后：

$scope.gridOptions = {
  columnDefs = [
    { 
      name: 'edit', 
      displayName: 'Edit', 
      cellTemplate: '<button ng-click="grid.appScope.edit(row.entity)">Edit</button>' 
    }
  ],
  data: myData
};

功能模块化

3.0版本将许多功能从核心中分离出来，改为插件形式：

• 列调整大小(Resize Columns)
• 行排序(Sorting)
• 分页(Pagination)
• 等等

使用这些功能需要在HTML中显式声明：

<div ui-grid="gridOptions" ui-grid-resize-columns></div>

这种模块化设计使得核心更轻量，同时允许开发者按需加载功能。

升级建议

1. 逐步替换：先替换模块和指令名称，再处理列定义，最后处理作用域问题
2. 测试驱动：对每个变更点进行充分测试
3. 查阅文档：参考官方文档了解所有插件及其使用方法
4. 性能优化：利用新的$watchCollection机制优化大数据量场景

通过遵循这些指导原则，开发者可以顺利将项目从ng-grid 2.0迁移到ui-grid 3.0，并享受新版本带来的性能改进和功能增强。

ui-grid UI Grid: an Angular Data Grid 项目地址: https://gitcode.com/gh_mirrors/ui/ui-grid