React - Grille de données Handsontable : déplacer les colonnes et mettre à jour le statut

Question

J'utilise une bibliothèque pour React et j'ai une liste (tableau) d'en-têtes et de l'autre côté un tableau contenant les données du tableau.

Après avoir lu la documentation, j'ai pu activer le menu dans lequel j'ai ajouté les options "Ajouter une colonne à gauche" et "Ajouter une colonne à droite", mais cela n'a été fait que visuellement et n'a pas mis à jour le titre dans l'état React.

J'ai essayé deux méthodes. La deuxième méthode est "Configuration déroulante personnalisée", j'ai ajouté les colonnes manuellement et utilisé la méthode pratique "updateSettings" pour mettre à jour l'en-tête, mais ça ne marche toujours pas (parfois ça marche, parfois ça ajoute les colonnes ailleurs).

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

J'ai accompli cette tâche comme suit :

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)
    }
  }
}

Le fait est que ce que je n'avais pas réalisé auparavant, c'est qu'en plus du statut de l'en-tête du tableau qui n'est pas mis à jour, lors du déplacement des colonnes, les données du tableau doivent également être mises à jour, c'est là que j'ai implémenté une fonction js pour déplacer les informations (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
}

Important : j'ai implémenté cette fonction pour déplacer une seule colonne