如何实现点击Syncfusion Grid按钮跳转新页面展示对应行数据？

下面以React为例，给出具体实现步骤（Vue/Angular思路一致，仅语法差异）：

1. 配置子网格的按钮列 #

在子网格的列配置中，通过template字段自定义按钮，并绑定点击事件，直接传入当前行的完整数据：

const childGridColumns = [
  { field: 'OrderID', headerText: '订单ID' },
  { field: 'CustomerName', headerText: '客户名称' },
  { field: 'OrderDate', headerText: '下单日期' },
  // 操作按钮列
  {
    headerText: '操作',
    template: (rowData) => (
      <button className="view-btn" onClick={() => handleViewDetail(rowData)}>查看详情</button>
    )
  }
];

2. 处理按钮点击逻辑：传递数据并跳转 #

点击按钮时，根据数据量选择合适的传递方式：

• 小体量/扁平数据：用URL搜索参数传递，直接拼接在跳转地址后
• 复杂/大数据：用sessionStorage临时存储（用完记得清除）

const handleViewDetail = (rowData) => {
  // 方式1：URL参数传递（适合简单数据）
  const params = new URLSearchParams();
  Object.entries(rowData).forEach(([key, value]) => {
    params.append(key, value);
  });
  window.location.href = `/order-detail?${params.toString()}`;

  // 方式2：sessionStorage存储（适合复杂嵌套数据）
  // sessionStorage.setItem('currentOrder', JSON.stringify(rowData));
  // window.location.href = '/order-detail';
};

3. 详情页接收并渲染数据 #

在目标页面中，获取传递的数据并展示：

// 对应方式1：解析URL参数
useEffect(() => {
  const params = new URLSearchParams(window.location.search);
  const detailData = {};
  params.forEach((val, key) => {
    // 按需转换数据类型，比如数字、日期
    detailData[key] = isNaN(val) ? val : Number(val);
  });
  // 拿到数据后即可渲染到页面
  console.log('详情数据：', detailData);
}, []);

// 对应方式2：读取sessionStorage
// useEffect(() => {
//   const storedData = sessionStorage.getItem('currentOrder');
//   if (storedData) {
//     const detailData = JSON.parse(storedData);
//     console.log('详情数据：', detailData);
//     // 清除临时存储，避免页面刷新后残留
//     sessionStorage.removeItem('currentOrder');
//   }
// }, []);

额外建议 #

• 如果数据包含敏感信息，不建议用URL或本地存储传递，最好只传递行ID，详情页通过接口根据ID拉取完整数据，更安全。
• 不同框架下，Syncfusion Grid的模板语法略有不同：比如Vue用<template #template="{ data }"，Angular用ng-template，但核心逻辑都是绑定点击事件并传递行数据。

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