ui-grid多搜索字段同时过滤失效问题技术咨询

看起来你现在遇到的问题是两个搜索框的过滤条件不能同时生效，原因应该是你之前的逻辑是单独处理每个搜索字段的过滤，导致后输入的条件覆盖了前一个的过滤规则。下面给你两种可行的解决方案，你可以根据自己的代码情况选择：

方法一：利用ui-grid原生的列过滤绑定（推荐） #

ui-grid本身就支持多列的联合过滤，默认是逻辑与的关系（也就是必须同时满足所有列的过滤条件）。你只需要把搜索框直接绑定到对应列的过滤项上即可：

1. 配置gridOptions开启过滤 #

首先确保你的grid配置里开启了过滤功能，并定义好列的过滤规则：

vm.gridOptions = {
  enableFiltering: true, // 必须开启这个选项
  columnDefs: [
    {
      field: 'fullName', // 对应数据里的全名字段
      displayName: '全名',
      filter: {
        condition: uiGridConstants.filter.ICASE // 不区分大小写的模糊匹配
      }
    },
    {
      field: 'registration', // 对应数据里的注册号字段
      displayName: '注册号',
      filter: {
        condition: uiGridConstants.filter.ICASE
      }
    }
  ],
  data: vm.resultData
};

2. 绑定搜索框到列的过滤值 #

在HTML里，把你的搜索输入框直接绑定到对应列的filter.term属性：

<!-- 姓名搜索框 -->
<input type="text" 
       ng-model="vm.gridOptions.columnDefs[0].filter.term" 
       placeholder="搜索全名">

<!-- 注册号搜索框 -->
<input type="text" 
       ng-model="vm.gridOptions.columnDefs[1].filter.term" 
       placeholder="搜索注册号">

这样配置后，ui-grid会自动处理两个过滤条件的联合生效，用户输入任意一个或两个字段时，表格都会实时显示同时满足所有条件的数据。

方法二：自定义全局过滤函数 #

如果你的业务逻辑更复杂（比如需要自定义匹配规则），可以通过监听搜索字段的变化，手动编写过滤函数来实现联合过滤：

1. 注册gridApi并监听搜索字段 #

首先要确保grid初始化完成后再注册监听，所以在onRegisterApi里处理：

vm.gridOptions.onRegisterApi = function(gridApi) {
  vm.gridApi = gridApi;
  
  // 同时监听两个搜索字段的变化
  $scope.$watchGroup(['vm.model.employeeName', 'vm.model.registrationName'], function(newValues) {
    const nameKeyword = newValues[0] || '';
    const regKeyword = newValues[1] || '';
    
    // 自定义过滤函数：返回同时满足两个条件的行
    vm.gridApi.core.filter(function(rowEntity) {
      // 姓名匹配：不区分大小写的模糊匹配
      const nameMatch = rowEntity.fullName.toLowerCase().includes(nameKeyword.toLowerCase());
      // 注册号匹配：同理
      const regMatch = rowEntity.registration.toLowerCase().includes(regKeyword.toLowerCase());
      
      // 两个条件都满足才显示
      return nameMatch && regMatch;
    });
  });
};

2. 注意事项 #

• 这里使用$watchGroup来同时监听两个变量的变化，只要其中一个改变，就会重新执行过滤逻辑。
• 过滤函数里的rowEntity就是表格的每一行数据，你可以根据自己的需求修改匹配规则（比如精确匹配、正则匹配等）。

这两种方法都能解决你现在的问题，第一种更简洁，利用ui-grid原生功能；第二种更灵活，适合复杂的业务场景。

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