React – Handsontable Datagrid: Spalten verschieben und Status aktualisieren

Question

Ich verwende eine Bibliothek für React und habe eine Liste (Array) von Headern und auf der anderen Seite ein Array mit den Tabellendaten.

Nachdem ich die Dokumentation gelesen hatte, konnte ich das Menü aktivieren, in dem ich die Optionen „Spalte nach links hinzufügen“ und „Spalte nach rechts hinzufügen“ hinzugefügt habe, aber dies geschah nur visuell und der Titel wurde im React-Status nicht aktualisiert.

Ich habe zwei Methoden ausprobiert. Die zweite Methode ist „Benutzerdefinierte Dropdown-Konfiguration“. Ich habe die Spalten manuell hinzugefügt und die handsontable Methode „updateSettings“ verwendet, um den Header zu aktualisieren, aber es funktioniert immer noch nicht (manchmal funktioniert es, manchmal werden die Spalten an anderer Stelle hinzugefügt).

function addToHeader (array, index, side, valor) {
  if (side === "Left") array.splice(index, 0, valor)
  else if (side === "Right") array.splice(index + 1, 0, valor)
  return array
}

在代码中：
dropdownMenu: {
      items: {
        col_right: {
          name: 'Move column right',
          callback: (key: any, selection: any, clickEvent: any) => {
            const column = selection[0].end.col
            headers = addToHeader(headers, column, "Right", 'New column')
            console.log('headers', headers) // 返回正确更改的数组
            hot.updateSettings({ colHeaders: headers })
          }

        },
        col_left: {
          name: 'Move column left',
          callback: (key: any, selection: any, clickEvent: any) => {
            const column = selection[0].end.col
            headers = addToHeader(headers, column, "Left", 'New column')
            console.log('headers', headers) // 返回正确更改的数组
            hot.updateSettings({ colHeaders: headers })
          }
        },
}

Answer 1

我按照以下方式完成了这个任务：

afterColumnMove: (
  movedColumns: number[],
  finalIndex: number,
  dropIndex: number | undefined,
  movePossible: boolean,
  orderChanged: boolean
) => {
  if (orderChanged) {
    let ht
    if (hotRef.current) ht = hotRef.current.hotInstance
    if (ht) {
      const headers = ht.getColHeader()
      const colMoved = movedColumns[0]
      setHeaders(prevHeaders => headers as string[]) // 这样如果你更新了状态
      const newOrderData = moveColumnTable(list, finalIndex, colMoved)
      setList(prevData => newOrderData)
      ht.loadData(list)
    }
  }
}

关键是，我之前没有意识到的是，除了表头的状态没有被更新之外，当移动列时，表格数据也必须被更新，这就是我实现一个js函数来移动信息的地方（moveColumnTable）

const moveColumnTable = (tableData: any[], fromIndex: number, toIndex: number) => {
  if (toIndex === fromIndex || toIndex < 0 || fromIndex < 0) {
    // 如果起始索引等于结束索引或者它们是无效值，那么就没有变化。
    return tableData
  }

  const reorderedTableData = tableData.map(row => {
    const newRow = [...row]
    const movedItem = newRow.splice(toIndex, 1)[0]
    newRow.splice(fromIndex, 0, movedItem)

    return newRow
  })

  return reorderedTableData
}

重要提示：我实现了这个函数来移动单个列