如何基于给定Angular代码使用angular-data-grid同时筛选两个数据库？

嘿，我看你已经搭好了两个angular-data-grid的基础框架，分别绑定了monthArray和dayArray这两个数据集对吧？要实现同时筛选两个表格其实很容易，咱们可以通过共享筛选状态、同步筛选逻辑的方式来实现，下面结合你的现有代码给你具体步骤：

1. 添加共享的筛选状态变量 #

首先在你的Angular控制器初始化代码里，新增一个用来存储筛选关键词的共享变量，同时结合你已有的selectedStore，把它也纳入筛选逻辑：

$scope.UI = {}; 
$scope.gridActions = {}; 
$scope.storeNameArray = []; 
$scope.selectedStore = {}; 
$scope.monthArray = []; 
$scope.dayArray = [];
// 新增：共享筛选关键词
$scope.sharedFilter = '';

2. 封装通用的筛选函数 #

为了避免重复代码，咱们把筛选逻辑抽成一个公共函数，这样两个表格可以复用同一套规则，还能灵活指定每个表格需要筛选的字段：

// 通用筛选函数：item为当前行数据，filterKeys为需要匹配的字段数组
$scope.filterGridItem = function(item, filterKeys) {
  // 先处理店铺筛选（如果有选中店铺的话）
  if ($scope.selectedStore.id && item.storeId !== $scope.selectedStore.id) {
    return false;
  }
  // 处理文本关键词筛选
  if (!$scope.sharedFilter) return true; // 无关键词时显示所有数据
  const lowerCaseFilter = $scope.sharedFilter.toLowerCase();
  // 检查item的指定字段是否包含关键词
  return filterKeys.some(key => {
    const fieldValue = item[key];
    return fieldValue && fieldValue.toString().toLowerCase().includes(lowerCaseFilter);
  });
};

3. 给两个Grid配置同步筛选规则 #

修改你已有的monthGridOptions和dayGridOptions，添加filter.predicate属性，绑定到咱们上面写的通用筛选函数，分别指定每个表格需要筛选的字段：

$scope.monthGridOptions = { 
  data: $scope.monthArray, 
  urlSync: true, 
  enableSorting: true, 
  sort: { predicate: 'month', direction: 'asc' },
  // 新增筛选配置
  filter: {
    predicate: function(item) {
      // 指定月度表格需要筛选的字段，比如month、storeName等
      return $scope.filterGridItem(item, ['month', 'storeName']);
    }
  }
}; 

$scope.dayGridOptions = { 
  data: $scope.dayArray, 
  urlSync: true, 
  enableSorting: true, 
  sort: { predicate: 'day', direction: 'asc' },
  // 新增筛选配置
  filter: {
    predicate: function(item) {
      // 指定日度表格需要筛选的字段，比如day、storeName等
      return $scope.filterGridItem(item, ['day', 'storeName']);
    }
  }
};

4. 在视图层添加筛选控件 #

最后在你的HTML里添加筛选输入框（和店铺下拉框，如果需要的话），绑定到咱们的共享变量，这样用户操作时两个表格会同步更新：

<!-- 店铺筛选下拉框（如果需要） -->
<select ng-model="selectedStore" ng-options="store as store.name for store in storeNameArray">
  <option value="">选择店铺</option>
</select>

<!-- 文本筛选输入框 -->
<input 
  type="text" 
  ng-model="sharedFilter" 
  ng-model-options="{ debounce: 300 }" <!-- 防抖优化，避免频繁触发筛选 -->
  placeholder="输入关键词同时筛选两个表格"
/>

<!-- 两个angular-data-grid的渲染代码 -->
<angular-data-grid options="monthGridOptions"></angular-data-grid>
<angular-data-grid options="dayGridOptions"></angular-data-grid>

这样配置之后，不管是选择店铺还是输入文本关键词，两个表格都会同时应用筛选规则，实现你要的同步筛选效果啦。如果你的数据集字段和示例不同，只需要调整filterGridItem里的字段判断逻辑，或者修改filterKeys数组里的字段名就行。

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