如何在用户搜索后切换AgGrid表格的显示列？

完全可以实现，核心是根据搜索状态动态控制列的显示/隐藏，不需要用到过滤（过滤是用来筛选行数据的，和列显示控制是两回事）。下面提供两种简单可行的实现方式：

方式一：用React状态驱动列定义 #

通过维护一个isSearched状态，在列定义中绑定hide属性，让列的显示状态随搜索状态自动切换。

代码示例： #

import { useState, useMemo } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const ProductGrid = () => {
  const [isSearched, setIsSearched] = useState(false);
  const [searchKeyword, setSearchKeyword] = useState('');
  const [rowData, setRowData] = useState([]);

  // 动态生成列定义：根据isSearched切换列的隐藏状态
  const columnDefs = useMemo(() => [
    { field: 'Product', hide: isSearched },
    { field: 'Name', hide: isSearched },
    { field: 'Date', hide: isSearched },
    { field: 'Type', hide: !isSearched },
    { field: 'Open', hide: !isSearched },
    { field: 'High', hide: !isSearched },
    { field: 'Percentage', hide: !isSearched }
  ], [isSearched]);

  // 搜索按钮点击处理
  const handleSearch = async () => {
    if (!searchKeyword.trim()) {
      // 清空搜索时恢复默认状态
      setIsSearched(false);
      const defaultData = await fetch('/api/default-data').then(res => res.json());
      setRowData(defaultData);
      return;
    }

    // 执行搜索，获取对应数据
    const searchData = await fetch(`/api/search-product?product=${searchKeyword}`).then(res => res.json());
    setRowData(searchData);
    setIsSearched(true); // 触发列显示切换
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>
      <input 
        type="text"
        value={searchKeyword}
        onChange={(e) => setSearchKeyword(e.target.value)}
        placeholder="输入产品名称搜索"
      />
      <button onClick={handleSearch}>搜索</button>
      
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        // 其他AgGrid配置（如分页、排序等）
      />
    </div>
  );
};

export default ProductGrid;

优点： #

• 逻辑简单直观，完全依赖React状态管理，无需直接操作AgGrid内部API
• 列定义随状态自动更新，减少手动操作成本

方式二：调用AgGrid的Column API控制列显示 #

如果不想修改列定义，可以通过AgGrid提供的columnApi直接操作列的隐藏状态，适合列配置复杂的场景。

代码示例： #

import { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const ProductGrid = () => {
  const [searchKeyword, setSearchKeyword] = useState('');
  const [rowData, setRowData] = useState([]);
  const [columnApi, setColumnApi] = useState(null);

  // 固定列定义，初始设置默认隐藏状态
  const columnDefs = [
    { field: 'Product', hide: false },
    { field: 'Name', hide: false },
    { field: 'Date', hide: false },
    { field: 'Type', hide: true },
    { field: 'Open', hide: true },
    { field: 'High', hide: true },
    { field: 'Percentage', hide: true }
  ];

  // 获取AgGrid的columnApi引用
  const handleGridReady = (params) => {
    setColumnApi(params.columnApi);
  };

  const handleSearch = async () => {
    if (!columnApi) return;

    if (!searchKeyword.trim()) {
      // 恢复默认列显示
      columnApi.setColumnsVisible(['Product', 'Name', 'Date'], true);
      columnApi.setColumnsVisible(['Type', 'Open', 'High', 'Percentage'], false);
      const defaultData = await fetch('/api/default-data').then(res => res.json());
      setRowData(defaultData);
      return;
    }

    // 切换为搜索后的列显示
    columnApi.setColumnsVisible(['Product', 'Name', 'Date'], false);
    columnApi.setColumnsVisible(['Type', 'Open', 'High', 'Percentage'], true);
    const searchData = await fetch(`/api/search-product?product=${searchKeyword}`).then(res => res.json());
    setRowData(searchData);
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>
      <input 
        type="text"
        value={searchKeyword}
        onChange={(e) => setSearchKeyword(e.target.value)}
        placeholder="输入产品名称搜索"
      />
      <button onClick={handleSearch}>搜索</button>
      
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        onGridReady={handleGridReady}
      />
    </div>
  );
};

export default ProductGrid;

优点： #

• 保留原始列定义，适合需要维护固定列配置的场景
• 直接操作AgGrid API，灵活性更高，支持更复杂的列操作

注意事项： #

• 确保列的field属性唯一且准确，否则API无法定位到对应列
• 两种方式都不需要用到过滤功能，过滤是用来筛选符合条件的行数据，和列显示控制无关
• 如果有列分组、列排序等其他配置，只需在原有基础上添加对应的列定义配置即可

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