AngularJS版ag-grid免费版：仅过滤器有内容时显示行数据可行吗？

当然可以搞定这个需求！我来给你分享一个在AngularJS版ag-grid免费版里实现的具体方案，亲测可行：

核心思路 #

我们需要监听过滤器的变化，判断是否有任何过滤器处于活跃状态（即有输入内容），然后动态控制grid的行数据：

• 当有活跃过滤器时，加载原始数据并让ag-grid自动应用过滤
• 当没有任何过滤器生效时，清空grid的行数据

具体实现步骤 #

1. 保存原始数据集
   首先在你的AngularJS控制器里，把原始的行数据存起来，避免后续操作修改到源数据：

   // 假设你的原始数据是从接口或本地获取的
   $scope.originalRowData = angular.copy(yourSourceData);
   

2. 配置gridOptions并监听过滤器变化
   在gridOptions中添加onFilterChanged回调，用来检测过滤器状态并更新行数据：

   $scope.gridOptions = {
     columnDefs: [
       // 你的列定义，比如带文本过滤器的列
       { 
         headerName: "姓名", 
         field: "name", 
         filter: 'agTextColumnFilter' 
       },
       { 
         headerName: "年龄", 
         field: "age", 
         filter: 'agNumberColumnFilter' 
       }
       // 其他列...
     ],
     rowData: [], // 初始状态下不显示任何数据
     onFilterChanged: function(params) {
       // 获取当前所有过滤器的模型
       const filterModel = params.api.getFilterModel();
       
       // 判断是否有活跃的过滤器
       const hasActiveFilters = Object.values(filterModel).some(filter => {
         if (!filter) return false;
         // 针对不同过滤器类型做判断，覆盖文本、数字、日期等常见类型
         return Object.values(filter).some(val => {
           return val !== undefined && val !== '' && val !== null;
         });
       });
   
       // 根据过滤器状态更新行数据
       if (hasActiveFilters) {
         // 有过滤器时，加载原始数据，ag-grid会自动完成过滤
         params.api.setRowData($scope.originalRowData);
       } else {
         // 无过滤器时，清空行数据
         params.api.setRowData([]);
       }
     },
     // 其他grid配置项...
   };
   

额外说明 #

• 这个方案兼容ag-grid免费版的所有内置过滤器（文本、数字、日期等），因为我们通过遍历过滤器模型的所有值来判断是否活跃
• 如果你的自定义过滤器有特殊的模型结构，只需要调整hasActiveFilters里的判断逻辑即可
• 初始状态下grid是空的，只有当用户在任意过滤器中输入内容后，才会显示匹配的行数据；当用户清空所有过滤器时，grid会再次回到空状态

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