React - Datagrid boleh tangan: alihkan lajur dan kemas kini status

Question

Saya menggunakan perpustakaan untuk React dan saya mempunyai senarai (tatasusunan) pengepala dan di sisi lain tatasusunan yang mengandungi data jadual.

Selepas membaca dokumentasi saya dapat mendayakan menu di mana saya menambah pilihan "Tambah Lajur ke Kiri" dan "Tambah Lajur ke Kanan", tetapi ini hanya dilakukan secara visual dan tidak mengemas kini tajuk dalam keadaan React.

Saya mencuba dua kaedah. Kaedah kedua ialah "Konfigurasi Dropdown Tersuai", saya menambah lajur secara manual dan menggunakan kaedah handsontable "updateSettings" untuk mengemas kini pengepala, tetapi ia masih tidak berfungsi (kadangkala ia berfungsi, kadangkala ia menambah lajur di tempat lain ).

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

Saya menyelesaikan tugasan ini seperti berikut:

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

Maksudnya, apa yang saya tidak sedar sebelum ini ialah selain status pengepala jadual tidak dikemas kini, apabila memindahkan lajur, data jadual juga mesti dikemas kini, di mana saya melaksanakan fungsi js untuk bergerak maklumat (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
}

Penting: Saya melaksanakan fungsi ini untuk memindahkan satu lajur