handsontable 解冻列并返回到原始位置

Question

我正在尝试创建一个手动表，当我冻结该列时，它会转到第 0 列位置，但是当您右键单击以解冻时，我希望它返回到其原始位置。

我尝试使用自定义回调

unfreezeColumn

，它采用列的原始顺序，这样如果我冻结位置索引3中的列，冻结时它将变为0，解冻时将返回3，但是这个自定义索引功能不起作用

Codepen 在这里：https://codepen.io/MayaRGans/pen/mdNJJwm

<div id="grid" class="handsontable"></div>

$(function () {
  var data = [
    ['Year', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
    ['2009', 0, 2941, 4303, 354, 5814],
    ['2010', 5, 2905, 2867, 412, 5284],
    ['2011', 4, 2517, 4822, 552, 6127],
    ['2012', 2, 2422, 5399, 776, 4151]
  ];

  const container = document.getElementById('grid');
  let isUpdatingOrder = false; // Flag to prevent recursion
  const originalOrder = [...Array(data[0].length).keys()]; // Track the original column order
  const hiddenColumnsList = [];
  const expandedCells = {};

  // Initialize Handsontable
  const hot = new Handsontable(container, {
    data: data,
    columns: originalOrder.map((index) => ({
      title: data[0][index],
      minWidth: 150,
      width: 160
    })),
    filters: true,
    dropdownMenu: ['filter_by_value', 'filter_action_bar'],
    height: 900,
    autoWrapRow: true,
    autoWrapCol: true,
    contextMenu: {
      items: {
        "freeze_column": {},
        "unfreeze_column": {
          name: 'Unfreeze column',
          callback: function(key, selection) {
            const colIndex = selection[0].start.col;
            console.log('Unfreezing column index:', colIndex);
            unfreezeColumn(colIndex);
          }
        },
        "hidden_columns_hide": {},
        "hidden_columns_show": {}
      }
    },
    manualColumnFreeze: true,
    readOnly: true,
    editor: false,
    width: '100%',
    colHeaders: true,
    manualColumnResize: true,
    autoColumnSize: true,
    wordWrap: true,
    className: 'jnj-table',
    licenseKey: 'non-commercial-and-evaluation',
    hiddenColumns: {
      columns: hiddenColumnsList,
      indicators: true
    }
  });

  // Function to unfreeze the column
  function unfreezeColumn(colIndex) {
    hot.getPlugin('manualColumnFreeze').unfreezeColumn(colIndex);
    updateColumnOrder();
  }

  // Function to update the column order
  function updateColumnOrder() {
    if (isUpdatingOrder) return; // Prevent recursion
    isUpdatingOrder = true; // Set the flag

    const currentOrder = hot.getSettings().manualColumnMove || [];
    
    // Restore the columns to the original order only if they're not in the original state
    if (!arraysEqual(currentOrder, originalOrder)) {
      hot.updateSettings({
        manualColumnMove: originalOrder
      });
    }

    hot.render();
    isUpdatingOrder = false; // Reset the flag
  }

  // Helper function to compare two arrays
  function arraysEqual(arr1, arr2) {
    if (arr1.length !== arr2.length) return false;
    return arr1.every((value, index) => value === arr2[index]);
  }

});

Answer 1

我使用 unfreeze 和 moveColumn 方法解决了这个问题

<div id="grid" class="handsontable"></div>

$(function () {
  var data = [
    ['Year', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
    ['2009', 0, 2941, 4303, 354, 5814],
    ['2010', 5, 2905, 2867, 412, 5284],
    ['2011', 4, 2517, 4822, 552, 6127],
    ['2012', 2, 2422, 5399, 776, 4151]
  ];

  const container = document.getElementById('grid');
  let originalIndex; // To store the original index of the column being frozen

  // Initialize Handsontable
  const hot = new Handsontable(container, {
    data: data,
    columns: data[0].map(title => ({ title, minWidth: 150, width: 160 })),
    manualColumnFreeze: true,
    readOnly: true,
    colHeaders: true,
    contextMenu: true,
    height: 900,
    width: '100%',
    licenseKey: 'non-commercial-and-evaluation',
    beforeColumnFreeze: function (currentCol) {
      originalIndex = currentCol; // Store the original index of the column being frozen
    },
    afterColumnUnfreeze: function (currentCol) {
      if (originalIndex !== undefined) {
        // Move the column back to its original position
        hot.getPlugin('manualColumnMove').moveColumn(currentCol, originalIndex);
        hot.render(); // Refresh the table
      }
    }
  });
});