如何在AG Grid中允许对分组行进行筛选

核心需求 #

• 让分组项（如group1、group2）出现在筛选下拉框中，支持直接选中/取消分组来批量控制其子行的显示/隐藏
• 修复页面加载时通过filtermodal设置初始筛选后，取消分组筛选时子行未自动移除的问题

实现步骤 #

1. 改造筛选下拉框，添加分组选项 #

修改筛选下拉框的数据源，把分组节点和子行节点一起注入选项列表：

• 生成筛选选项时，先遍历所有分组，添加分组项（可通过前缀[分组]或自定义class做视觉区分）
• 给分组项绑定点击逻辑：选中分组时自动同步勾选/取消该分组下所有子行，同时更新表格筛选状态

示例伪代码：

// 生成筛选选项列表
function buildFilterOptions() {
  const options = [];
  // 遍历表格分组结构
  tableGroups.forEach(group => {
    // 添加分组选项
    options.push({
      label: `[分组] ${group.name}`,
      value: `group_${group.id}`,
      type: 'group'
    });
    // 添加子行选项
    group.rows.forEach(row => {
      options.push({
        label: row.name,
        value: row.id,
        type: 'row'
      });
    });
  });
  return options;
}

// 处理筛选选项点击事件
function handleFilterOptionClick(option) {
  if (option.type === 'group') {
    const group = tableGroups.find(g => `group_${g.id}` === option.value);
    const isChecked = !filterState.includes(option.value);
    // 同步分组与子行的筛选状态
    if (isChecked) {
      filterState.push(option.value);
      group.rows.forEach(row => filterState.push(row.id));
    } else {
      filterState = filterState.filter(item => 
        item !== option.value && !group.rows.map(r => r.id).includes(item)
      );
    }
  } else {
    // 子行原有筛选逻辑
    const idx = filterState.indexOf(option.value);
    idx > -1 ? filterState.splice(idx, 1) : filterState.push(option.value);
    // 子行全取消时自动移除对应分组的筛选状态
    const group = tableGroups.find(g => g.rows.some(r => r.id === option.value));
    const allRowsUnchecked = group.rows.every(r => !filterState.includes(r.id));
    if (allRowsUnchecked) {
      filterState = filterState.filter(item => item !== `group_${group.id}`);
    }
  }
  // 更新表格显示
  updateTableDisplay();
}

2. 修复初始筛选后的分组同步问题 #

页面加载初始化筛选状态时，确保分组与子行状态同步：

• 初始化filterState后，检查哪些分组的子行全部被选中，自动添加对应分组标识
• 取消分组筛选时，强制清空该分组下所有子行的筛选状态，不受初始设置影响

示例初始化逻辑：

// 页面加载时初始化筛选状态
function initFilterState(initialVisibleRows) {
  filterState = [...initialVisibleRows];
  // 同步分组选中状态
  tableGroups.forEach(group => {
    const allRowsIncluded = group.rows.every(row => filterState.includes(row.id));
    if (allRowsIncluded) {
      filterState.push(`group_${group.id}`);
    }
  });
}

3. 表格显示同步逻辑 #

更新表格显示时，直接根据分组标识判断，无需单独处理子行：

function updateTableDisplay() {
  tableGroups.forEach(group => {
    const isGroupVisible = filterState.includes(`group_${group.id}`);
    // 控制分组行显示
    document.getElementById(`group-${group.id}`).style.display = isGroupVisible ? 'table-row' : 'none';
    // 控制子行显示
    group.rows.forEach(row => {
      document.getElementById(`row-${row.id}`).style.display = isGroupVisible ? 'table-row' : 'none';
    });
  });
}

注意事项 #

• 给分组选项添加视觉区分（如加粗、图标），让用户快速识别分组与子行
• 保持筛选状态双向同步：手动勾选子行时，自动更新分组状态（子行全选时自动勾选分组，部分选时显示半选状态）

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