MUI DataGrid服务端排序：如何向排序处理器传递额外数据

方案1：利用闭包绑定额外参数 #

在每个DataGrid的渲染范围内定义专属的额外参数，在onSortModelChange回调中直接将排序模型与这些参数合并，传递给数据获取函数。这种方式简单直接，适合页面中多个独立的DataGrid实例。

{/* 用户数据集 */}
<DataGrid
  rows={userRows}
  columns={userColumns}
  serverSideSorting
  onSortModelChange={(sortModel) => {
    // 直接在回调中传入需要的额外参数
    fetchUserData({
      sortModel,
      category: "user",
      filter: { status: "active" }
    });
  }}
/>

{/* 订单数据集 */}
<DataGrid
  rows={orderRows}
  columns={orderColumns}
  serverSideSorting
  onSortModelChange={(sortModel) => {
    fetchOrderData({
      sortModel,
      category: "order",
      filter: { dateRange: ["2024-01-01", "2024-06-01"] }
    });
  }}
/>

如果需要优化性能，用useCallback避免重复创建回调函数：

const fetchUserData = useCallback(async ({ sortModel, ...extraParams }) => {
  // 调用API获取数据
  const res = await api.get("/users", {
    params: {
      sort: sortModel.map(item => `${item.field}:${item.sort}`).join(","),
      ...extraParams
    }
  });
  setUserRows(res.data);
}, []);

const handleUserSort = useCallback((sortModel) => {
  fetchUserData({
    sortModel,
    category: "user",
    filter: { status: "active" }
  });
}, [fetchUserData]);

方案2：封装自定义DataGrid组件 #

如果页面中有多个结构类似的DataGrid，封装带额外参数的自定义组件能让代码更整洁、易于维护。把额外参数作为组件props传入，内部统一处理排序回调：

// 自定义带额外参数的DataGrid组件
const CustomServerSideGrid = ({ rows, columns, extraParams, onSortChange }) => {
  const handleSortModelChange = useCallback((sortModel) => {
    // 合并排序模型与额外参数后传递给父组件
    onSortChange({ sortModel, ...extraParams });
  }, [extraParams, onSortChange]);

  return (
    <DataGrid
      rows={rows}
      columns={columns}
      serverSideSorting
      onSortModelChange={handleSortModelChange}
    />
  );
};

// 使用自定义组件
<CustomServerSideGrid
  rows={userRows}
  columns={userColumns}
  extraParams={{ category: "user", filter: { status: "active" } }}
  onSortChange={(params) => fetchUserData(params)}
/>

<CustomServerSideGrid
  rows={orderRows}
  columns={orderColumns}
  extraParams={{ category: "order", filter: { dateRange: ["2024-01-01", "2024-06-01"] } }}
  onSortChange={(params) => fetchOrderData(params)}
/>

方案3：通过组件状态关联动态参数 #

如果额外参数需要随页面状态动态变化，将参数存在组件state中，在排序回调中直接读取状态值：

const [userFilter, setUserFilter] = useState({ status: "active" });

// 用户DataGrid的排序回调
const handleUserSort = (sortModel) => {
  fetchUserData({
    sortModel,
    category: "user",
    filter: userFilter
  });
};

// 筛选条件变化时更新状态
const handleFilterChange = (newFilter) => {
  setUserFilter(newFilter);
};

最优方案推荐 #

如果页面存在多个DataGrid实例，封装自定义DataGrid组件是最优选择。它既能统一处理排序逻辑，又能让每个实例的额外参数配置独立，代码复用性强，后期维护更方便。如果只是少量独立的DataGrid，直接用闭包绑定额外参数的方式更轻便。

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