Angular ui-grid数据刷新后如何沿用原有筛选条件？

我之前在项目里也碰到过一模一样的UI-Grid问题——刷新新数据后，筛选框里的值明明还在，但新数据完全没被过滤，当时折腾了好一会儿才找到靠谱的解决办法，给你分享下具体步骤：

• 第一步：提前保存当前的筛选状态
  在你发起新数据请求之前，先把所有列的筛选规则都存下来。UI-Grid的gridApi提供了获取筛选实例的方法，我们可以遍历可见列，把每个列的筛选值和类型（下拉/自由文本）都记录好：

  // 定义变量存储筛选状态，放在合适的作用域里
  let savedFilters = {};
  
  // 保存当前所有列的筛选条件
  function saveFilterState() {
    $scope.gridApi.core.getVisibleColumns().forEach(column => {
      const filterInstance = $scope.gridApi.core.getFilterInstance(column.colDef.field);
      if (filterInstance) {
        savedFilters[column.colDef.field] = {
          term: filterInstance.term, // 自由文本的筛选关键词
          selectedItems: filterInstance.selectedItems // 下拉筛选的选中项
        };
      }
    });
  }
  

• 第二步：新数据加载后恢复并触发筛选
  当新数据返回并赋值给UI-Grid的data之后，我们需要把刚才保存的筛选规则重新应用到对应列上，然后手动触发UI-Grid的筛选刷新：

  // 恢复保存的筛选条件并应用到新数据
  function applySavedFilters() {
    Object.keys(savedFilters).forEach(field => {
      const filterInstance = $scope.gridApi.core.getFilterInstance(field);
      const savedFilter = savedFilters[field];
      
      if (!filterInstance) return;
  
      // 恢复自由文本筛选值
      if (savedFilter.term) {
        filterInstance.term = savedFilter.term;
      }
      
      // 恢复下拉筛选的选中项（适配下拉类型的筛选）
      if (savedFilter.selectedItems && savedFilter.selectedItems.length > 0) {
        filterInstance.selectedItems = savedFilter.selectedItems;
        // 部分UI-Grid下拉筛选需要同步设置term，根据你的列配置调整
        filterInstance.term = savedFilter.selectedItems.map(item => item.value).join(',');
      }
    });
    
    // 触发UI-Grid重新执行筛选逻辑
    $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.FILTER);
    // 也可以用refresh方法兜底：$scope.gridApi.core.refresh();
  }
  

• 第三步：整合到你的数据刷新流程
  把上面两个方法嵌入到你的数据刷新逻辑里，顺序一定要对：

  function refreshGridData() {
    // 1. 先保存当前筛选状态
    saveFilterState();
    
    // 2. 调用接口获取新数据
    yourDataFetchService.getLatestData().then(newDataSet => {
      // 3. 更新Grid的数据源
      $scope.gridOptions.data = newDataSet;
      
      // 4. 延迟一点再应用筛选（确保数据已完成绑定）
      $timeout(() => {
        applySavedFilters();
      }, 100);
    }).catch(err => {
      // 处理接口错误
      console.error('数据刷新失败:', err);
    });
  }
  

• 额外注意点

  • 确保你的代码是在UI-Grid的API注册完成后执行的，也就是要放在gridApi.core.on.registerApi的回调函数里，不然会拿不到gridApi实例
  • 如果你的下拉筛选是自定义模板或者特殊配置，可能需要调整selectedItems的处理逻辑，比如有些下拉是用label匹配而不是value
  • 要是有列的筛选规则比较复杂（比如多值匹配），可以在保存状态时把更多筛选相关的属性也存下来

内容的提问来源于stack exchange，提问作者Udaya Bhanu