寻求KendoUI React Grid集成REST数据及增改操作的示例

嘿，我刚好对KendoUI React Grid对接REST服务这块挺熟的，给你捋捋具体怎么搞，包括新增行（POST）和更新行（PUT）的操作，结合你提到的Data Operations示例思路展开：

核心思路 #

Kendo Grid负责数据展示和编辑交互，REST接口的调用需要我们通过Grid的事件钩子触发——比如用onSave处理新增/更新提交，接口调用完成后再同步更新本地数据状态，或者重新拉取最新数据。

1. 新增行（REST POST） #

步骤拆解： #

• 先给Grid配置新增工具栏按钮，让用户触发新增操作：

  import { Grid, GridToolbar } from '@progress/kendo-react-grid';
  import { Button } from '@progress/kendo-react-buttons';
  
  <Grid
    data={gridData}
    editField="inEdit"
    onSave={handleSave}
  >
    <GridToolbar>
      <Button onClick={() => handleAdd()}>新增数据</Button>
    </GridToolbar>
    {/* 列配置省略 */}
  </Grid>
  

• 实现handleAdd函数，让Grid进入新增编辑模式：

  const handleAdd = () => {
    const newItem = { id: null, name: '', age: 0, inEdit: true };
    setGridData([...gridData, newItem]);
  };
  

• 在handleSave中捕获新增数据，调用REST POST接口：

  const handleSave = (event) => {
    const { dataItem } = event;
    // 判断是新增（id为null）还是更新
    if (!dataItem.id) {
      // 调用POST接口
      fetch('https://你的REST接口地址/items', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: dataItem.name,
          age: dataItem.age
          // 其他需要提交的字段
        })
      })
      .then(res => res.json())
      .then(newItem => {
        // 接口返回新增后的完整数据（包含自动生成的id），更新本地数据
        const updatedData = gridData.map(item => 
          item === dataItem ? { ...newItem, inEdit: false } : item
        );
        setGridData(updatedData);
      })
      .catch(err => {
        // 处理请求失败，比如提示用户
        console.error('新增失败:', err);
      });
    } else {
      // 后面讲更新逻辑
    }
  };
  

2. 更新行（REST PUT） #

步骤拆解： #

• 当用户编辑已有行并点击保存时，handleSave会拿到更新后的dataItem（包含主键id）：

  const handleSave = (event) => {
    const { dataItem } = event;
    if (dataItem.id) {
      // 调用PUT接口，注意把id拼在URL里或者放在请求体
      fetch(`https://你的REST接口地址/items/${dataItem.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          id: dataItem.id,
          name: dataItem.name,
          age: dataItem.age
          // 其他更新字段
        })
      })
      .then(res => res.json())
      .then(updatedItem => {
        // 更新本地数据，退出编辑模式
        const updatedData = gridData.map(item => 
          item.id === updatedItem.id ? { ...updatedItem, inEdit: false } : item
        );
        setGridData(updatedData);
      })
      .catch(err => {
        console.error('更新失败:', err);
      });
    } else {
      // 新增逻辑
    }
  };
  

• 额外提示：如果需要批量更新，也可以收集多个编辑后的项统一调用批量PUT接口，但单条更新更常用。

关键注意事项 #

• 一定要处理接口请求的异常情况，比如网络失败、后端返回错误，避免用户操作后状态不一致；
• 可以用loading状态禁用Grid或者显示加载动画，提升用户体验；
• 如果后端分页/排序/过滤是服务器端处理的，还要结合Grid的onDataStateChange事件，把分页、排序参数传给REST接口，再用返回结果更新Grid数据（这部分和你看的Data Operations示例逻辑一致，只是把本地数据操作换成REST请求）。

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