如何将AngularJS v1.5中的ag-grid v18升级至v28+版本

一、先锁准兼容版本 #

ag-grid v28是最后一批对AngularJS友好的大版本，v29+开始重点转向Angular框架，所以直接选v28.x的稳定版（比如v28.2.1）最稳妥。你的AngularJS v1.5.8刚好满足v28的最低要求，但要注意：如果项目里用了jQuery，得升级到3.x以上，v28不再兼容老版本jQuery。

二、替换依赖包 #

不管你用npm还是bower，先卸载旧的ag-grid包：

# npm环境下的操作
npm uninstall ag-grid ag-grid-angularjs
# 安装v28.x适配包
npm install ag-grid-community@28.2.1 ag-grid-angularjs@28.2.1

v28开始拆分了包结构，必须同时安装社区版核心包和AngularJS适配层，别漏了。

三、筛选功能适配（你关心的重点） #

v28+的默认筛选器自带空白/非空白、多条件筛选，不用自己折腾了，按下面调整：

• 启用默认筛选：旧版v18如果写了自定义筛选配置，直接删掉就行。v28会根据列类型自动匹配筛选器（文本列用agTextColumnFilter，数字列用agNumberColumnFilter），这些默认组件自带空白/非空白选项。
  举个列配置的例子：

  $scope.columnDefs = [
    {
      headerName: '用户名',
      field: 'username',
      // 无需手动指定filter属性，v28自动启用对应筛选器
      filterParams: {
        // 可选：将空白筛选选项提前，或自定义显示文本
        includeEmptyValueOption: true,
        // 默认开启多条件筛选，也可改为"equals"这类默认匹配规则
        defaultOption: 'contains'
      }
    }
  ];
  

• 旧自定义筛选迁移：如果之前有自己编写的筛选组件，v28的API有变更，需要调整：
  • 原有的getModel()/setModel()接口替换为getFilterModel()/setFilterModel()
  • 自定义筛选需实现IFilterAngularComp接口，不再支持旧版的IFilterComp
• 空白筛选直接使用：默认筛选器中，文本/数字列的下拉菜单会自带“空白”“非空白”选项，只要列的filter属性没设为false就能直接用。

四、代码细节调整 #

• 模板指令修改：旧版的ag-grid指令替换为ag-grid-angularjs，参数从grid-options改成ag-grid-options，主题建议换成v28推荐的ag-theme-alpine（旧主题仍兼容，但后续会被废弃）：
  旧模板：

  <div ag-grid="gridOptions" class="ag-theme-balham"></div>
  

  新模板：

  <div ag-grid-angularjs ag-grid-options="gridOptions" class="ag-theme-alpine"></div>
  

• API和事件更新：v28移除了部分旧API，比如api.setFilter()改为api.setFilterModel()，api.getFilterInstance()的返回结构也有变化，对照v28的AngularJS文档调整即可。
• 样式微调：v28的默认样式变化较大，可能需要调整自定义CSS，避免和现有页面样式冲突。

五、测试环节要做足 #

• 核心功能测试：重点测试筛选（空白筛选、多条件筛选）、列渲染、数据加载，确保逻辑和升级前一致。
• 浏览器兼容测试：如果仍需支持IE11，要额外引入core-js这类polyfill，v28对IE11的依赖需手动补充。
• 性能测试：v28优化了大数据量场景下的性能，但仍要测试滚动、筛选的响应速度，确保符合业务要求。

内容的提问来源于stack exchange，提问作者Ashok P