时间戳

首页 > 解决方案 > 如何在 Material-Table 中实现批量编辑

reactjs - 如何在 Material-Table 中实现批量编辑

问题描述

批量编辑是一项要求的功能，但当前的材料表库只有打开多个编辑的选项，但一次只能编辑一行，我如何才能实现批量编辑？同时编辑多行？

标签： reactjsmaterial-uimaterial-table

解决方案

我通过使用该onSelectionChange函数创建一个将处理所选行的状态来实现这一点。

const [allSelectedRows, setAllSelectedRows] = useState([]);

onSelectionChange={(rows) => {
  setAllSelectedRows([...rows]);
}}

之后，我生成了一个 diff (with deep-object-diff) 来查看这些选定行中发生了什么变化，生成了一个包含新数据的数组并更新了状态。

editable={{
  isEditable: (rowData) => data[rowData.tableData.id].Locked !== true,
  onRowUpdate: (newData, oldData) => new Promise((resolve) => {
    const dataUpdateArray = [...data];
    if (allSelectedRows.length && allSelectedRows.includes(oldData)) {// if there is multiple checkboxes selected
      const updatedData = updatedDiff(oldData, newData);
      allSelectedRows.map((item) => {
        return Object.assign(dataUpdateArray[item.tableData.id], updatedData);
      });
    } else {// if there is no selected checkbox, you are editing a non-checked row
      dataUpdateArray[oldData.tableData.id] = newData;
    }
    setData([...dataUpdateArray]);
    resolve();
  }),
}}

有关实现的更多细节，这里有一个堆栈闪电战，其中包含实现此功能的所有必要代码。

推荐阅读